Bootstrapカードデザインの基本構造を学ぼう

Published on: 2023年5月24日
Category: Bootstrap
Tags: html,カードデザイン,コード,リスト
Author: SAKUWEB by Liruu Design

いよいよセカンドページ最後のコンテンツです。

ここは他コンテンツのリンク集となります。

このパーツを設置しておけば、現在地からユーザーが興味のあるページに誘導することができます。

以前学んだカードデザインを利用して、下層ページの全リンクを配置していきますが、まずは基本構造を学びます。

*-*-* Chapter34 *-*-*

カードデザインの基本構造

導線としてリンク集を設置しよう

今回作るスマホ版デザインです。

導線に関しては次回説明するとして、ベッドに関するページのリンク集を作っていきます。

これをカードデザインでコーディングしていきます。

この段階で、ディスクトップ版の表示も考えておきましょう。

画像のタイトル名のデザインは、見たことありますよね。

前回やったタイトル名と同じです。

・・・気になりますか？

この余白・・・・。

カードデザインを使おう

カードデザイン、以前学びましたね。

復習しておきましょう。

今回のリンク集の部分は、「画像」+「リスト」としてコーディングしていきます。

まずは、コンテンツの土台を作ります。

また、画像を3枚準備してimgフォルダに格納しておきましょう。

以下の条件で、デザインを見ながらコーディングしてみてください。

1–　コンテンツはフル幅

2–　h2タグでタイトルを作る

「いろんなタイプのベッドあります！おすすめベッド！」

3–　row-colsとガターを使って列数と余白を設置する。

また、ブレイクポイントを使って列数を適切な数に変えておく。

4–　カードデザインの土台を3つ作る

※画像やリストは後回しで、カードデザインが使えるボックスのみを作る

5–　カードデザインの枠線を消しておく

それではコードを。

<div class="container-fluid">
  <h2 class="text-center py-5"><span class="h6 d-block">いろんなタイプのベッドあります！</span>おすすめベッド！</h2>
  
  <div class="row row-cols-sm-3 row-cols-2 gy-4">
    <div class="card border-0">
      <!-- カードデザインの中身 -->
    </div>
    <div class="card border-0">
      <!-- カードデザインの中身 -->
    </div>
    <div class="card border-0">
      <!-- カードデザインの中身 -->
    </div>
  </div>
  
</div>

まず、3番のrow-cols+ガター+ブレイクポイントです。

「row-cols-sm-3 row-cols-2」で、スマホで2カラム、ディスクトップでは3カラムに設定しました。

また、ガターは「gy-4」、垂直方向に余白を設けます。

4番のカードデザインの土台として、クラス名「card」を付与し、

5番の枠線を消すには、クラス名「border-0」を適用しています。

これで、土台が完成しましたが、カードデザインはよく利用するので基本的な構成要素を学んでいきましょう。

カードデザインの構成要素を見てみよう

カードデザインは、柔軟性が高いので、使い勝手が良いです。

使う場面が増えると思うので、用意されているさまざまなパーツを見ていきましょう。

画像やタイトル、テキスト、リスト、ヘッダー、フッター、リンクなどの基本構成を学んでいきます。

カードを利用するための「card」

カードデザインを利用するには必ず必要なクラスです。

背景色は白に、枠線が引かれて角丸になります。

<div class="card">
  <!-- コンテンツを入れます -->
</div>

上もしくは下に画像を配置する「card-img-*」

cardを付与した時点で、角丸が適用されていますね。

画像を上もしくは下に配置した場合、cardの角丸からはみ出てしまうので、

画像にも角丸を適用してはみ出さないようになっています。

上に配置するときは「card-img-top」、下に配置するときは「card-img-bottom」を指定します。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
 </div>

カードの本体部分「card-body」

コンテンツの量に応じて、キレイに配置するためのクラスです。

インライン要素の場合は特に、親タグに設定しておくと便利です。

また、1remのpaddingが設けられています。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
  <div class="card-body">
    <!-- コンテンツを入れます -->
  </div>
</div>

タイトルの下に余白を設ける「card-title」

タイトルのデザインが適用されている訳ではなく、タイトルの下に入る要素とくっつかないように、下に0.5remの余白を設けています。

なので、見出しタグを使いましょう。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
  </div>
</div>

最後のテキスト下の余白を消す「card-text」

テキストはpタグを使いますね。

もともとmargin-bottom　1remの余白が設けられています。

また、「card-body」でpadding　1remが設定されているため、

下の余白は計2remとなります。

余白が大きくなってしまうので、

一番最後に配置したcard textに対して、マージンを打ち消す指定をして、計1remで統一させています。

以下のコードで見ると、2番目に入れたpタグのマージンを打ち消して、計1remにしています。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">本文</p>
    <p class="card-text">..</p>
  </div>
</div>

ヘッダーを格納する「card-header」

背景色と要素の下にラインが引かれます。

また、「card-body」の外側に配置してください。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">本文</p>
    <p class="card-text">..</p>
  </div>
  <div class="card-header">..</div>
</div>

リストグループ「list-group」

これは以前学んだコードと同じです。

リストグループはこれだけで完成されているので、「card-body」の外側に配置してください。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">本文</p>
    <p class="card-text">..</p>
  </div>
  <div class="card-header">..</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">..</li>
  </ul>
</div>

リンクを制御する「card-link」

リンク間がくっつかないように、余白1remを設けています。

ここは要素の幅に応じたサイズとなるため、リンクを多く配置するとテキストの途中で改行されてしまうので注意が必要です。

その場合は、リストグループなどの利用を考えましょう。

また、「card-body」で囲むことで、キレイに配置してくれます。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">本文</p>
    <p class="card-text">..</p>
  </div>
  <div class="card-header">..</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">..</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">..</a>
  </div>
</div>

フッターを格納する「card-footer」

ヘッダーと同じく背景色と要素の上にラインが引かれます。

また、「card-body」の外側に配置してください。

サンプルではテキストが右寄せになっていますが、デフォルトは左寄せです。

<div class="card">
  <img class="card-img-top" src=".."alt="..">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">本文</p>
    <p class="card-text">..</p>
  </div>
  <div class="card-header">..</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">..</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">..</a>
  </div>
  <div class="card-footer">..</div>
</div>

画像を背景にしてテキストを重ねる「card-img-overlay」

カードの背景に画像を敷いて、「card-img-overlay」で囲ったパーツを重ねて表示します。

前回やりましたね。

画像には「card-img」を適用してください。

画像の高さが有効になりますので、中に入れる要素との兼ね合いで任意に余白で調整しましょう。

<div class="card">
  <img src=".." class="card-img" alt="..">
  <div class="card-img-overlay">
    <h5 class="card-title">..</h5>
    <p class="card-text">..</p>
    <a href="#" class="btn btn-outline-light w-100">..</a>
  </div>
</div>