そんなときはBootstrapのカードが便利です。クラスをつけるだけで簡単に作れます。
Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
こんにちは、ティロといいます
プログラミング好きな理系大学生です
Bootstrapをhead内に読み込みます。
Bootstrapってなんぞや？という方はこちらの記事をどうぞ！
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
またカードは単体で使うのではなくグリッドシステムと組み合わせて使います。
グリッドシステムって何ぞやという方はこちらの記事をご覧ください。
グリッドシステムってなんだ？グリッドシステムを詳しく知りたい... 今回はこんな疑問を解消していきます!Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。[…]
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
カードの基本的な使い方
まずはカードの基本的な形をご覧ください。
写真とタイトル、副見出し、本文、リンクがカードの基本的な形です。またヘッダー部分やフッターを追加することや写真を除くことも可能です。
左のカードのコードは以下の通りです。
1 2 3 4 5 6 7 8 9 | <div class="card"> <img class="card-img-top" src=""> <div class="card-body"> <h4 class="card-title">タイトル</h4> <h6 class="card-subtitle">副見出し</h6> <p class="card-text">カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文</p> <a href="#" class="btn btn-dark">read more</a> </div> </div> |
クラスの意味はこんな感じです。
| card | カードの大枠を作ります。 |
| card-img-top | 写真をカードトップに配置します。写真の大きさは自動で調整されます。 |
| card-body | カードのコンテンツ(文章が入る)を作ります。 |
| card-title | カードのタイトルを作ります。下マージンを12px取ります。 |
| card-subtitle | カードの副見出しを作ります。下マージンを0に上マージを－6px取ります。－マージンを取ると要素が上に移動します。 |
| card-text | カードの本文を作ります。 |
ボタンのクラスはこんな感じです。
class=”btn”はボタンのデフォルトの装飾を解除しただけなのでbtn-(色)でボタンに色をつけます。
| btn-primary | 青 |
| btn-secondary | グレー |
| btn-success | 緑 |
| btn-warning | 黄 |
| btn-info | 水色 |
| btn-light | 薄いグレー |
| btn-dark | 濃いグレー |
| btn-white | 黒 |
| btn-transparent | 透明 |
| btn-danger | オレンジ |
真ん中のカードのコードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 | <div class="card"> <div class="card-header">ヘッダー</div>//ヘッダー <img class="card-img-top" src="img/1.png"> <div class="card-body"> <h4 class="card-title">タイトル</h4> <h6 class="card-subtitle">副見出し</h6> <p class="card-text">カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文</p> <a href="#" class="btn btn-dark">read more</a> </div> <div class="card-footer">フッター</div>//フッター </div> |
右のカードは写真がないだけなので分かると思います。
横並びする方法についても触れておきます。
親にcontainerというクラスをつけてその下にrowというクラスをつけます。これで横並びになります。
次にカードの幅を決めます。カードの幅はcol-4と書くことで設定しています。col-(数字)が大きくなるほど幅も大きくなります。最大は12です。
この辺の詳しいことは「【Bootstrap グリッドシステム】グリッドシステムを詳しくご紹介します。」で詳しく紹介しています。
コードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <body> <div class="container"> <div class="row"> <div class="col-4 my-4"> <div class="card"> <img class="card-img-top" src=""> <div class="card-body"> <h4 class="card-title">タイトル</h4> <h6 class="card-subtitle">副見出し</h6> <p class="card-text">カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文</p> <a href="#" class="btn btn-dark">read more</a> </div> </div> </div> <div class="col-4 my-4"> <div class="card"> <div class="card-header">ヘッダー</div> <img class="card-img-top" src=""> <div class="card-body"> <h4 class="card-title">タイトル</h4> <h6 class="card-subtitle">副見出し</h6> <p class="card-text">カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文</p> <a href="#" class="btn btn-dark">read more</a> </div> <div class="card-footer">フッター</div> </div> </div> <div class="col-4 my-4"> <div class="card"> <div class="card-body"> <h4 class="card-title">タイトル</h4> <h6 class="card-subtitle">副見出し</h6> <p class="card-text">カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文カードの本文</p> <a href="#" class="btn btn-dark">read more</a> </div> </div> </div> </div> </div> </body> |
カードの応用
カードを横並びにしたい
グリッドシステムを使ってカードを横並びにします。グリッドシステムはガター（両サイドの余白）があるので「<div class=”row no-gutters”>」でガターを消しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="col-8 my-4"> <div class="card mb-3"> <div class="row no-gutters"> <div class="col-4"> <img class="img-fluid" src=""> </div> <div class="col-8"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> |
出典：Cards – Bootstrap 4.2 – 日本語リファレンス
写真とテキストを重ねたい
こんな感じにテキストと写真を重ねることが出来ます。
方法は簡単でcard-img-overlayというクラスをつけるだけです。
コードは以下の通りです。
1 2 3 4 5 6 7 8 | <div class="card border-primary text-white"> <img class="img-fluid" src=""> <div class="card-img-overlay"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">Last updated 3 mins ago</p> </div> </div> |
出典：Cards – Bootstrap 4.2 – 日本語リファレンス
カードのカスタマイズ方法
次にカードのカスタマイズ方法についてご紹介します。
カードの背景の色を変えたい
色はbg-(色)で指定することが出来ます。色はボタンと一緒です。
1 | <div class="card bg-primary"> |
のようにcardにbg-(色)を追加します。
背景の色の種類はこんな感じです。
| bg-primary | 青 |
| bg-secondary | グレー |
| bg-success | 緑 |
| bg-warning | 黄 |
| bg-info | 水色 |
| bg-light | 薄いグレー |
| bg-dark | 濃いグレー |
| bg-white | 黒 |
| bg-transparent | 透明 |
| bg-danger | オレンジ |
ボーダーの色を変えたい
ボーダーの色も変えることが可能です。
1 | <div class="card border-primary"> |
このようにcardに指定の色を加えるだけです。
色の指定は背景と同じです。border-(色)で指定します。色の種類は背景と同じです。
実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．
参考にしたサイト