Bulmaのカード Card [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。

Bulmaには、簡単にカード型のUIを実装するためのクラスが用意されています。

今回は、カードのスタイルを設定するcardクラスについて紹介します。

万能の柔軟性を持つコンポーネントが構成可能なcardクラス

cardクラスはカードを作成する際のメインのコンテナクラスになります。
Bulmaのカードのスタイルを設定するクラスは、cardクラスといくつかのサブクラスで構成されています。

cardクラスとサブクラス

cardクラスとサブクラスは、以下の構成になっています。

クラス 説明
card カードのメインコンテナのクラスです。
card-header カードのヘッダー部の水平バーのクラスです。
card-header-title カードヘッダーのタイトルのクラスです。
card-header-icon カードヘッダーのアイコンのクラスです。
card-image カードのレスポンシブ画像用のクラスです。
card-content カードのコンテンツ部分のクラスです。
card-footer カードのフッター部の水平リストのクラスです。
card-footer-item カードのフッターに配置するリストアイテムのクラスです。

カードサンプル

以下に簡単なカードのサンプルを示します。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

カードの部品

カードには、ヘッダー、イメージ、コンテンツ、フッターを配置することができます。

ヘッダー

カードのヘッダーには、card-headerクラスを指定します。

カードのヘッダーには、タイトルが配置できます。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ヘッダーのタイトルには、card-header-titleクラスを指定します。

ヘッダーのタイトルは、中央に配置することもできます。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

タイトルを中央に配置する場合は、is-centeredクラスを指定します。

カードのヘッダーには、アイコンを追加することができます。
アイコンには、card-header-iconクラスを指定します。

アイコンをタイトルの左に配置すると次のようになります。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

タイトルを中央に配置すると次のようになります。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

アイコンをタイトルの右に配置すると次のようになります。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

タイトルを中央に配置すると次のようになります。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

アイコンをタイトルの左右に配置すると次のようになります。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

タイトルを中央に配置すると次のようになります。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

イメージ

カードのイメージには、card-imageクラスを指定します。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

card-imageクラスは、imageクラスのコンテナになります。

imageクラスについては、以下の記事を参考にしてください。

Bulmaのイメージ Image [CSSフレームワーク]
Webページにサイズの大きい画像を配置した際、画像の読み込みに時間がかかってしまう場合やまったく読み込まれない場合があります。 ...

コンテンツ

コンテンツはカードの主要部分になります。
カードのコンテンツには、card-contentクラスを指定します。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

Bulmaのコンテンツ Content [CSSフレームワーク]
Bulmaには、テキストを記述する際のコンテナとなるクラスが用意されています。 Bulmaを適用(参照)したページでは、ヘッデ...

コンテンツには、画像などを配置することもできます。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

Bulmaの見出し(表題と副題)Title Subtitle [CSSフレームワーク]
Webページでは、見出し(タイトル)は欠かせないものです。 見出しはページを見やすく飾ります。 Bulmaには見出しをス...
Bulmaのメディアオブジェクト Media Object [CSSフレームワーク]
ソーシャルメディアのインターフェースで普及している「メディアオブジェクト」は、ウェブ上のいたるところで見られるデザインのパターンです...

フッター

カードのフッターには、card-footerクラスを指定します。
フッターにはいくつかのアイテムを配置できます。
フッターのアイテムには、card-footer-itemクラスを指定します。

Bulmaのcardクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

Bulma 入門 Tips 一覧