【Bootstrap 初心者】すぐに使える!便利なカードについて分かりやすく解説します

背景の色を変える
簡単におしゃれたサイトを作りたいな

そんなときはBootstrapのカードが便利です。クラスをつけるだけで簡単に作れます。

 

ティロ

こんにちは、ティロといいます

プログラミング好きな理系大学生です

 

Bootstrapをhead内に読み込みます。

Bootstrapってなんぞや?という方はこちらの記事をどうぞ!

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方


またカードは単体で使うのではなくグリッドシステムと組み合わせて使います。

グリッドシステムって何ぞやという方はこちらの記事をご覧ください。

関連記事

グリッドシステムってなんだ?グリッドシステムを詳しく知りたい... 今回はこんな疑問を解消していきます! ティロこんにちは、ティロといいますプログラ[…]

グリッドシステムを詳しく解説します

Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

カードの基本的な使い方

まずはカードの基本的な形をご覧ください。

カードの基本的な形

写真とタイトル、副見出し、本文、リンクがカードの基本的な形です。またヘッダー部分やフッターを追加することや写真を除くことも可能です。

左のカードのコードは以下の通りです。

 

クラスの意味はこんな感じです。

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オレンジ

 

真ん中のカードのコードはこんな感じです。

右のカードは写真がないだけなので分かると思います。

横並びする方法についても触れておきます。

親にcontainerというクラスをつけてその下にrowというクラスをつけます。これで横並びになります。

次にカードの幅を決めます。カードの幅はcol-4と書くことで設定しています。col-(数字)が大きくなるほど幅も大きくなります。最大は12です。

この辺の詳しいことは「【Bootstrap グリッドシステム】グリッドシステムを詳しくご紹介します。」で詳しく紹介しています。

コードはこんな感じです。


 

カードの応用

カードを横並びにしたい

グリッドシステムを使ってカードを横並びにします。グリッドシステムはガター(両サイドの余白)があるので「<div class=”row no-gutters”>」でガターを消しています。

 

出典:Cards – Bootstrap 4.2 – 日本語リファレンス

横並びのカード

写真とテキストを重ねたい

こんな感じにテキストと写真を重ねることが出来ます。

写真を重ねる

方法は簡単でcard-img-overlayというクラスをつけるだけです。

コードは以下の通りです。

出典:Cards – Bootstrap 4.2 – 日本語リファレンス

カードのカスタマイズ方法

次にカードのカスタマイズ方法についてご紹介します。

カードの背景の色を変えたい

色はbg-(色)で指定することが出来ます。色はボタンと一緒です。

のようにcardにbg-(色)を追加します。

背景の色の種類はこんな感じです。

bg-primary
bg-secondaryグレー
bg-success
bg-warning
bg-info水色
bg-light薄いグレー
bg-dark濃いグレー
bg-white
bg-transparent透明
bg-dangerオレンジ

背景の色を変える

ボーダーの色を変えたい

ボーダーの色も変えることが可能です。

このようにcardに指定の色を加えるだけです。

色の指定は背景と同じです。border-(色)で指定します。色の種類は背景と同じです。

ボーダーの色を変える

 

いかがでしたでしょうか?

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.

 

参考にしたサイト

Cards – Bootstrap 4.2 – 日本語リファレンス