こんにちは、yutaです。
今回はBootstrapのCardという機能(コンポーネント)の使い方を4パターン紹介します。実際やり方は公式ページにも紹介されているんですが、英語を読みたくない！という方や、長い説明を読みたくない！という方向けにまとめています。
Bootstrapの導入に関してはこちらの記事を参照してください。
パターン1. 画像が上 (基本)
パターン2. 画像が下
パターン3. 画像が左
パターン4. カードグループ
記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
パターン1.画像が上 (基本)
まずは一番基本的なカードの使い方から見てみましょう。
このように画像、タイトル、説明、リンクボタンを1つ枠の中に入れ込んで、まるで一枚のカードのように扱えるのがBootstrapのCard機能です。
SNS用に設定するOGPに似ていますね。内容の一部だけを見せて閲覧者に興味を持たせてリンク先へ飛んでもらう仕掛けです。
商品一覧や、写真ギャラリーなどに使えるかと思います。
なお、タイトル、説明、リンクボタンなどは好みに合わせて付けたり外したりできます。
実装コード
パターン2. 画像が下
パターン1は画像が上に表示されていましたが、次は下に表示されているパターンです。
違いは写真の位置だけなので、どちらを使うかは完全に好みの問題ですね。笑
場合によっては、パターン1とパターン2を交互に入れると面白い見せ方ができるかも？
実装コード
パターン1との違いは、<img>の記述位置だけです。
パターン3. 画像が左
今度は画像が左側、説明などが右側に配置されたパターンを見てみましょう。
今回使用している画像が横長なので上下のスペースが空いていますが、縦長な画像の場合は、ぴちっと写真が入ります。もちろんアスペクト比によって横に隙間ができたりするのでその辺は調整が必要ですけどね。
デフォルトだと今回の画像の場合、カード上部に写真が配置されるので、my-autoで縦方向に中央寄せしています。(以下の実装コード参照)
実装コード
パターン4. カードグループ
最後にパターン1のカードをまとめたカードグループを紹介します。
カードグループはまさに写真ギャラリーって感じですね。タイトル部分に車の名前と価格を記載すると商品カタログとしても利用できそうです。
実装はいたって簡単で、<div class=”card-group”></div>の中にまとめたいカードのコード(パターン1と全く同じでok)を好きなだけ並べればokです。
実装コード
コードを見てみるとわかりますが、7~14行目までがパターン1と全く同じコードです。以降、同じコードをコピペしているだけですね。
今回は、BootstrapのCard機能についての紹介でした！
記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
