【入門】Bootstrapの書き方　〜 Cards 〜

2019.11.28
2022.05.03
Bootstrap

みなさんこんにちはさくちゃんです。
本日は「Cards」の書き方について紹介していきます。

では早速やっていきましょう！

1. Bootstrapの書き方〜Cards 〜
2. まとめ

Bootstrapの書き方〜Cards 〜

公式サイトの確認

まずは、公式サイトを確認していきましょう。

公式サイトのタブの「Documentation」をクリックします。

次に左サイドバーの「Components」をクリックします。

そして「Components」の中の「Cards」をクリックすると参照できます。

Cardsとは？

そもそもCardsとは何かと言うと、言葉で説明すると難しいのですが、簡単に言うと下の図のようなものです。

↑こんないかにもカッコ良さそうな感じのものが簡単に作れます。

では実際に基本的な書き方と、グリットシステムを利用した書き方について見ていきましょう。

基本的な書き方

上の図のような基本的な書き方は下のようになります。
それぞれのタグについて説明して行きます。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

card

まずはじめに、「Cards」として認識させるために、クラス名に「card」と指定します。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">

</div>

また、「style」で幅（width）の大きさを決めることもできます。

card-img-top

card-img-topは、cardの中に画像を入れるときにクラス名で「card-img-top」と指定してあげます。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
</div>

画像を挿入する<img>タグにクラス名で「card-img-top」を書きます。

card-body

card-bodyは、「card」の中に文章を書くときに指定するクラス名です。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
  <div class="card-body">

  </div>
</div>

「card-body」と指定してあげることで、「card」の中の文章を各部分だと認識してくれます。

card-title

card-titleは、「card-body」の中にタイトルとして表示させたいときに、クラス名で指定してあげます。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
   <div class="card-body">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
    </div>
   </div>
</div>

ここでは<h5>を指定していますが、他の<h1>、<h2>などでも構いません。

card-text

card-textは、「card-body」の中にテキストとして表示させたいときに、クラス名で指定してあげます。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">TEXT</p>
   </div>
</div>

こうすることで、「card-body」の中のテキストとして認識されます。

「card」の中に「ボタン」を設置することもできるので、自分好みにアレンジして行きましょう！

グリッドシステムを利用した書き方

「Cards」は、グリッドシステムと組み合わせることもできます。
グリッドシステムについて、こちらをご覧ください。

【入門】Bootstrapの書き方　〜グリッドシステム〜

では実際に書いて行きましょう。
書き方は下のように書いて行きます。

<div class="container">
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
</div>

書き方は簡単で、グリッドシステムで学んだ「container」「row」「col」を使うだけです！
この場合だと、「col-sm-6」なので、「画面幅がsm以上のときはグリッドを6個持つcol（カラム）を作成します。」という風になります。これが2つあるので、「sm以上のときは、グリッドを6個持つcol（カラム）を2つ作成する」ということになります。

実際に表示されるときは下のようになります。

✅ sm以上のとき

✅ sm以下のとき

まとめ

「Cards」のようなものを一から書いていくとなると、レスポンシブも含め、物凄い量のコードになってしまいます。しかしBootstrapを使用することで、簡単に作成することができます。

今回紹介した内容は一部でしかないので、もっと知りたいという方は、公式サイトをご覧ください。
では本日は以上になります。

オススメの教材

前の記事
【入門】Bootstrapの書き方　〜Pagination〜 2019.11.27
次の記事
【Bootstrap】Jumbotronの書き方 2019.11.29