Bootstrap5のタイポグラフィを理解する【図解たっぷりBootstrap5入門】

吉田先生

Bootstrapの仕様に従って文字を設定するだけで美しい文字組み(タイポグラフィ)が実現できますよ。
文字の空け方などでも悩まなくてすみますし、とても助かります。

見出しと文字のサイズ

今回の章では、タイポグラフィ(文字の体裁)を学んでいきます。

タイポグラフィの詳細はBootstrapサイト Content > Typographyにあります。
https://getbootstrap.jp/docs/5.0/content/typography/

Bootstrapの見出しとスタイル

まず、見出しを作る際にはHTMLの<h1>~<h6>というタグを使います。
この「hタグ」にも、それぞれCSSが用意されています。
では、Bootstrapのhタグを使うと文字はどのような見え方になるかを見てみましょう。

一番下は、本文等用のpタグです。
pタグに比べ、hタグは文字が太めになっています。
hの数字が若いほど、サイズが大きいことも分かりますね。

クラスとしても使用可能

h1~6に設定されているスタイルは、CSSクラスを使うことでも表現できます。

例えば、文字サイズ・太さは<h2>が丁度良いけれど、文脈的にはもっと下位の見出しである。
見出しではなくテキストだけど、デザイン的に文字を大きくしたい…なんてときもありますよね。

そういった場合、ページ全体や文章の構成を無視してhタグを使うのはよくありません。
文字の調整はCSSを書く/BootstrapのCSSクラスを使って行いましょう。

h1~h6までのクラスは、見出しタグにも、pタグやspanタグにでも、何にでも使えます。
BootstrapのCSSでは、h*タグと、h1~h6までのクラスは全く同じ見え方になります。

文字のサイズだけを変更する

display-*クラス

「display」は、Bootstrapで用意されているCSSクラスです。
先ほどのhタグよりも、見出しを大きく目立つようにしたい場合などに使います。
「display」の後に、ハイフンと1~4までの数字を付ける形で書きます。

では、見え方を確認しましょう。

「display」クラスも、見出しタグ、pタグやspanタグにでも、使用できます。
ただし、見出しタグに使う場合はh1~h6タグが持つフォントサイズ・フォントウェイトよりも、CSSクラスの「display」のスタイル指定が優先されることだけご注意ください。

hクラスやdisplayクラスの文字サイズ

hクラスやdisplayクラスは、数字が若いほど文字のサイズが大きくなります。
れぞれ何pxになるのかは、相対的な指定になっています。

「rem」はhtml要素のフォントサイズを1として考える単位です。デフォルトのフォントサイズは16px。
PCモニターで表示する場合、h1とh1クラスは2.5remと設定されているので、16×2.5=40pxとなります。

1200px以下の幅で表示する場合は、vwを使った計算式でフォントサイズが設定されています。
このあたりは覚える必要はありません。柔軟に対応できるよう設定されている、 という認識でOKです。

文字の装飾

文字を目立たせる

まず「lead」というCSSクラスについて学んでいきましょう。

これは、pタグに適用されるクラスです。
pタグで文章を書いているとき、目立たせたい一文があったとします。
そのような時に「lead」クラスを書いたpタグで、一文を囲うのです。

では、どのような見え方になるか見てみましょう。

少し文字が大きくなっているのが分かるでしょうか?
「lead」クラスのフォントサイズ指定は、1.25remになっています。

そして、pタグで囲まれた文の一部を目立たせるときはspanタグを使い「lead」を指定しています。
段落を丸ごと目立たせる場合はpタグに「lead」を適用していますね。

強調とハイライト

Bootstrapでは、テキストの装飾の為のタグが複数用意されています。
以下はその一例です。

strongタグを使用すれば太字になり、markタグは文中などにハイライトを入れることが出来ます。

このような、装飾の為のタグ一覧はBootstrap公式サイト「Typography」の中の「Inline text elements」という項目にあります。
テキスト関係のクラスは、サイト作成時によく利用する部分でもあります。

タグなどを使い分けられるよう練習も兼ねて、Bootstrapで用意されている様々なタイポグラフィを使ってみましょう!

【実習】タイポグラフィのクラスを使う

実際にBootstrapのタイポグラフィを使ってみましょう。

前回のカルーセルの実習で使った「carousel.html」を使います。
carousel.htmlを複製(別名で保存)して、typography.htmlなどにしておくと見直ししやすいです。

下記の3つを行ってください。

1.キャプションの見出しタグの変更
2.キャプションのpタグにleadクラスを適用
3.キャプションの文字色を変更

【1.キャプションの見出しタグの変更】
カルーセルのテンプレートコードでは、キャプションの見出しが<h5>でマークアップされています。
フォントサイズなどの見た目は変えずに、h5からh2タグに変更してみましょう。
今回紹介したクラスを使います。

【2.キャプションのpタグにleadクラスを適用】
キャプションのpタグに「lead」クラスを適用して、文字を大きくします。

【3.キャプションの文字色を変更】
※これはBootstrapのユーティリティを理解するの復習です。

<div class="carousel-caption... ">に、Bootstrapのクラスを追加して文字色を変更しましょう。
何色にしても構いません。

<div class="carousel-caption d-none d-md-block text-dark">
  <h2 class="h5">FOOD1</h2>
  <p class="lead">Some representative placeholder content for the first slide.</p>
</div>

文字色を何色にしても、写真と重なって「読みやすい」とは言えない表示になっているのではないでしょうか。

文字を見やすくするための設定例は、最後の実習で紹介しています。
今はそのまま、レッスンを進めてください。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×