見出しの文字サイズ
今回の章では、タイポグラフィ（文字の体裁）を学んでいきます。
Bootstrapで用意されているCSS/CSSクラスに関しては、公式ドキュメントのContentグループ > Typography で確認できます。
URL：https://getbootstrap.jp/docs/5.3/content/typography/
Bootstrapの見出しとスタイル
まず、見出しを作る際にはHTMLの<h1>～<h6>というタグを使います。
このhタグ自体に、BootstrapではそれぞれCSSが適用されています。
では、Bootstrapのｈタグを使うと文字はどのような見え方になるかを見てみましょう。
一番下は、本文等用のpタグです。 pタグに比べ、hタグは文字が太めになっています。 hの数字が若いほど、サイズが大きいことも分かりますね。
h1~h6クラスでも設定可能
見出しタグ（h1~6）のスタイルは、CSSクラスを使って表現することもできます。
例えば、文字サイズ・太さは<h2>が丁度良いけれど、文脈的にはもっと下位の見出しである。
見出しではなくテキストだけど、デザイン的に文字を大きくしたい…なんてときに便利ですね。
スタイリングのために、ページ全体や文章の構成を無視してhタグを使うのはよくありません。 見栄えのための調整は自分でCSSを書くか、BootstrapのCSSクラスを使って行うと良いです。
BootstrapのCSSでは、h*タグと、h1～h6までのクラスは全く同じ見え方になります。
h1～h6クラスは、見出しタグにも、pタグやspanタグにでも、何にでも設定可能です。
文字のサイズ・スタイル
特大サイズにするdisplay-*クラス
「display」は、Bootstrapで用意されているCSSクラスです。
h1タグ・h1クラスよりも、見出しを大きく目立つようにしたい場合などに使います。 「display」の後に、ハイフンと1～6までの数字を付ける形で書きます。
では、見え方を確認しましょう。
display-クラスも、hタグやpタグなど要素を選ばず使用できます。 ただし、見出しタグに使う場合はhタグのスタイルよりも、display-クラスのスタイル指定が優先される点は注意しましょう。
hクラスやdisplayクラスの文字サイズに関して
hクラスやdisplayクラスは、数字が若いほど文字のサイズが大きくなります。
れぞれ何pxになるのかは、相対的な指定になっています。
「rem」はhtml要素のフォントサイズを１として考える単位です。デフォルトのフォントサイズは16px。
PCモニターで表示する場合、h1とh1クラスは2.5remと設定されているので、16×2.5＝40pxとなります。
1200px以下の幅で表示する場合は、vwを使った計算式でフォントサイズが設定されています。
このあたりは覚える必要はありません。柔軟に対応できるよう設定されている、
という認識でOKです。
文字を目立たせるleadクラス
まず「lead」というCSSクラスについて学んでいきましょう。
これは、ｐタグに適用されるクラスです。 ｐタグで文章を書いているとき、目立たせたい一文があったとします。 そのような時に「lead」クラスを書いたｐタグで、一文を囲うのです。
では、どのような見え方になるか見てみましょう。
少し文字が大きくなっているのが分かるでしょうか？ 「lead」クラスのフォントサイズ指定は、1.25remになっています。
そして、ｐタグで囲まれた文の一部を目立たせるときはspanタグを使い「lead」を指定しています。 段落を丸ごと目立たせる場合はｐタグに「lead」を適用していますね。
強調やハイライト
Bootstrapでは、テキストの装飾の為のタグが複数用意されています。 以下はその一例です。
strongタグを使用すれば太字になり、markタグは文中などにハイライトを入れることが出来ます。
markとsmallはCSSクラス名として指定しても、タグと同じスタイリングができます。 HTMLタグは基本的に意味があるものですので、沿わない場合はspanタグにクラスを指定すると良いでしょう。
また、要素名（タグ名）と同じではありませんが、<srtong>タグを使うとなる太字表現はfw-boldクラス。
削除済みを示す<del>タグで表現される、文字の打消し線はtext-decoration-line-througクラス。
……など、テキスト系のユーティリティクラス名を使って表現可能です。
このようなテキストの装飾の為のタグ一覧は、Typographyページ内の“インラインテキスト”項目に書かれています。
日常的にはあまり使わないHTMLタグも解説されているので、目を通してみましょう。
URL：https://getbootstrap.jp/docs/5.3/content/typography/
これら、すべてを覚える必要はありません。 ただし、必要に応じてHTMLタグ、またはTextやTypographyのページに掲載されているCSSクラスを使って、最適なマークアップが出来る必要があります。どこを見れば調べられるか、大まかに把握しておくと良いでしょう。
練習も兼ねて、Bootstrapで用意されている様々なタイポグラフィを使ってみましょう！
【実習】タイポグラフィのクラスを使う
実際にBootstrapのタイポグラフィを使ってみましょう。
前回のカルーセルの実習で使った「carousel.html」を使います。 carousel.htmlを複製（別名で保存）してから作業すると見直しがしやすいです。
下記の4つの変更を行ってください。
- カルーセルの上に、h1タグで「タイポグラフィ実習」と入力
- 「タイポグラフィ」の文字サイズを、h1そのままよりも大きくする
- キャプションの見出しを、見た目は変えずに h5 から h2 に変更
- キャプションのpタグに、leadクラスを適用
- キャプション全体の文字色を変更
実習作成例
ポイント
1) h1タグの追加
<body>タグの直下に、h1タグで囲って「タイポグラフィ実習」という文字を打ちます。
そのままだと画面左上ピッタリの位置に来ますので、containerクラスや余白のクラスを指定すると良いでしょう。
文字サイズはdisplay-*クラスで大きくします。 h1そのままよりも大きければ、文字のサイズ・太さは問いません。
2) カルーセル内テキスト
<div class="carousel-caption ...>の中にあるh5タグを、h2に変更。
タグを変えると文字が大きくなるので、Bootstrapのクラスを使って最初と同じ大きさに保ちます。
見出し下の<p>タグには、leadクラスを適用して、文字を大きくします。
最後の文字色変更は、Bootstrapのユーティリティを理解するの復習です。 文字色は、BootstrapのCSSクラスで変えられるものなら何でも構いません。
ご用意している画像を使っている場合、文字を何色にしても、読みにくさは残ります。 文字を見やすくするための設定例は、最後の実習で紹介しています。 今はそのまま、レッスンを進めてください。