Bulmaのメッセージブロック(メッセージボックス) Message [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webシステムでは、様々な場面でユーザーにメッセージを表示します。
ユーザーの操作に対して、情報や警告、またはエラーなど、メッセージはWebシステムには欠かせない要素です。

Bulmaには、メッセージを表示するブロックを作成するためのクラスが用意されています。

今回は、メッセージブロックのスタイルを設定する際に利用できるmessageクラスを紹介します。

ページの一部を強調するためのメッセージブロックを作成するmessageクラス

Bulmaでメッセージブロックを作成する際は、messageクラスを使用します。
messageクラスはメッセージブロックのコンテナになります。

Bulmaのメッセージブロックでは、ヘッダーと本文が配置できます。

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

HTML

メッセージブロックのヘッダーには、message-headerクラスを指定します。
メッセージブロックの本文には、message-bodyクラスを指定します。

ヘッダーには削除ボタンが配置できます。

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

HTML

Bulmaのデリートボタン Delete [CSSフレームワーク]
WebページやWebシステムでは、しばしばメッセージボックスやモーダルダイアログボックスなどのユーザー対話型のUIを実装することがあ...

メッセージブロックの色

メッセージブロックの色は、Bulmaに定義されているカラーに変更することができます。

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

HTML

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

HTML

メッセージブロックのサイズ

メッセージブロックのサイズには、通常サイズ以外に「小」「中」「大」の3つのサイズが用意されています。

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

HTML

本文のみのメッセージ

メッセージブロックは本文のみ表示することもできます。

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

HTML

Bulma 入門 Tips 一覧