Bulmaの見出し(表題と副題)Title Subtitle [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webページでは、見出し(タイトル)は欠かせないものです。

見出しはページを見やすく飾ります。

Bulmaには見出しをスタイリングするクラスも用意されています。

今回は、見出しのスタイルを設定するtitleクラスを紹介します。

ページに深みを与える見出しを作るtitleクラスとsubtitleクラス

見出しを飾るクラスにはtitleクラスとsubtitleクラスがあります。

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

HTML

見出し(タイトル)のサイズ

Bulmaには、見出しに設定できるサイズが6種類用意されています。

  • is-1(最大)
  • is-2
  • is-3
  • is-4
  • is-5
  • is-6(最小)

is-3クラスの大きさがtitleクラスのデフォルトサイズになります。
is-5クラスの大きさがsubtitleクラスのデフォルトサイズになります。

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

HTML

タイトル(title)とサブタイトル(subtitle)の組み合わせ

titleクラスを指定した表題とsubtitleクラスを指定した副題の組み合わせ(サイズの組み合わせ)は、何通りも考えられますが、titleとsubtitleは、2サイズの差をも置けることが推奨されています。
例えば、titleにis-1を使用した場合は、subtitleにis-3を使用します。
titleにis-3を使用した場合は、subtitleにis-5を使用します。

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

HTML

タイトル(title)とサブタイトル(subtitle)の間隔

is-spacedクラスを指定することで、titleクラスを指定した表題とsubtitleクラスを指定した副題の間隔を維持することができます。

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

HTML

Bulma 入門 Tips 一覧