Bootstrapの見出し(ヘッダー要素 h1~h6)

CSSフレームワークのBootstrapを使った見出し(ヘッダー)のスタイルを紹介します。

BootstrapはTwitter社が開発したCSSフレームワークです。

Bootstrapは誰でも簡単にWebサイトに導入することができます。
Bootstrapを導入する方法については、以下の記事を参照してください。

Bootstrapを導入(インストール・CDNから参照)する
Twitter社が開発したCSSフレームワークのBootstrapを使うと、通常はCSSを自分で書かなければならないスタイルも簡単に実現でき...

見出し要素のスタイル

<h1>~<h6>要素

Bootstrapでは見出しを表すHTMLの要素に対してスタイルが設定されています。
見出しは<h1>~<h6>が利用可能です。

ブラウザーでの表示

Bootstrap 見出し h1~h6要素のスタイル

<h1>~<h6>の各要素のフォントサイズ(font-size)は、デフォルトで次のようになっています。

要素 サイズ
h1 2.5rem
h2 2rem
h3 1.75rem
h4 1.5rem
h5 1.25rem
h6 1rem

見出し用クラス

Bootstrapでは見出し要素の<h1>~<h6>の他に、「h1~h6」クラス(.h1~.h6)も利用できます。
HTMLの要素のclass属性に「h1~h6」を指定します。

ブラウザーでの表示

Bootstrap 見出し用クラス .h1~.h6のスタイル

.h1~.h6のクラスは<h1>~<h6>の要素と同じスタイルになります。
h1~h6のタグを記述せずにヘッダーとしてのスタイルを適用したい時に使えます。

フォントを大きくする

ヘッダー的なスタイルとして「display-1~4」クラスを利用することで、フォントを大きくして目立たせることができます。

ブラウザーでの表示

Bootstrap 見出しスタイル .display-1~.display-4のスタイル

「display-1~4」の各クラスは、見出し要素以外の要素にも適用されます。

ブラウザーでの表示

Bootstrap 見出しスタイル .display-1~.display-4のスタイル
上記の例では、p要素のスタイルに「display-1~4」を指定しています。

display-1~4の各クラスのフォントサイズ(font-size)は、デフォルトで次のようになっています。

クラス サイズ
display-1 6rem
display-2 5.5rem
display-3 4.5rem
display-4 3.5rem