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

吉田先生

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

 

見出し

今回の章では、タイポグラフィ（文字の体裁）から学んでいきます。 タイポグラフィは今までのcomponentsグループではなく、content内に記載されています。 https://getbootstrap.jp/docs/4.3/content/typography/

 

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

 

一番上は、本文等用のｐタグです。 ｐタグに比べ、ｈタグは太さがあり、サイズも大きいことが分かります。

図の一番右の項目は、それぞれの文字サイズ指定のCSSです。 これは、Bootstrapで用意されているCSSです。

フォントサイズの値に使われている「rem」というのは単位の一つです。 これは、デフォルトのフォントサイズを「1」として考えます。Bootstrapではデフォルトのフォントサイズは16pxです。なので、例を挙げると「2rem」は「32px」という事です。

 

・display

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

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

このように、spanタグなどを使って書きます。 もちろんｈタグでも良いですが、ｈ１～ｈ６タグが持つフォントサイズよりも、CSSクラスの「display」のフォントサイズが優先されることだけご注意ください。

 

 

文字の装飾

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

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

少し文字が大きくなっているのが分かるでしょうか？ 「lead」クラスのフォントサイズ指定は、１.２５remになっています。そして、ｐタグで囲まれた文の一部を目立たせるときはspanタグを使い「lead」を指定しています。段落を丸ごと目立たせる場合はｐタグに「lead」を適用していますね。

 

・装飾

Bootstrapでは、テキストの装飾の為のタグが複数用意されています。以下はその一例です。 strongタグを使用すれば太字になり、markタグは文中などにハイライトを入れることが出来ます。このような、装飾の為のタグ一覧はBootstrap公式サイト「Typography」の中の「Inline text elements」という項目にあります。

テキスト関係のクラスは、サイト作成時によく利用する部分でもあります。 タグなどを使い分けられるように練習しましょう。

 

 

◆実習：色々なテキストを表示しよう

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

typography.htmlをいうファイルを作り、Typography-Bootstrapを見ながらｈタグやBootstrapのクラスを使用して下図のような文字組みを作ってください。

見出しに入れている「h1 .display-1」などの記述は、 <h1>タグ+display-1クラスを追加、という意味です。

テキストは下記からコピーペーストしても、変更しても構いません。

h1 .display-1
ここは全体に「lead」クラスで表示します。

h2
It's known as "Lorem Ipsum" and is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

h2 .h3
This line of text is meant to be treated as deleted text.
This line rendered as italicized text.

h3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

レッスン