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」という項目にあります。
◆LP制作課題②
ＬＰ制作の続きを行なっていきます。ヒーローエリアまで制作しました。 今回は作成したカルーセルの下に、オレンジ色の点線で囲ったテキスト部分を作っていきます。
コーディング順序
- テキスト部分全体を「container」クラスを適応したdivで囲う。
- 「container」クラスの後に、オリジナルクラス「desc」を追加。
- 「desc」に対してcssで「text-align: center; margin-top: 80px;」と設定。
- テキストはそれぞれh2とPタグで囲う(文字はSAMPLE TEXTなどで)。
- pタグ内の一部分をmark と strong を一回ずつ使って強調表示する。
ボタンは次回作成するので今回はテキスト部分が出来ていればOKです。 テキスト関係のクラスは、サイト作成時によく利用する部分でもあります。 タグなどを使い分けられるように練習しましょう。