Bootstrap - TYPOGRAPHY

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapのタイポグラフィの素晴らしい世界に飛び込んでみましょう。あなたの近所の親切なコンピュータ教師として、私は多くの例や説明、そしてお父さんジョークを一二を交えてお手伝いします。それでは、始めましょう！

Bootstrap デフォルト / グローバル設定

Bootstrapには、デフォルトのタイポグラフィ設定が含まれており、すぐに素敵なテキストを表示することができます。まるでウェブサイトの個人的なスタイリストがいるかのようです！

以下は、Bootstrapがテキストをスタイル化する基本的な例です：

<p>これはBootstrapでスタイル化されたパラグラフです。</p>

「これは普通のテキストと同じだ！」と思っているかもしれません。でも、Bootstrapはいくつかの微妙な改善を行っています。デフォルトのフォントファミリー（通常はサンセリフフォント）、快適なフォントサイズ、そして心地よい行間が設定されています。これらの小さなことがBootstrapの強力さを生み出しています。

ヘッダー

Bootstrapのヘッダーは、あなたのお気に入りのカフェのカプチーノサイズのように、h1からh6までの6種類のフレーバーがあります。

<h1>これはヘッダー1です</h1>
<h2>これはヘッダー2です</h2>
<h3>これはヘッダー3です</h3>
<h4>これはヘッダー4です</h4>
<h5>これはヘッダー5です</h5>
<h6>これはヘッダー6です</h6>

各ヘッダーには独自のサイズと重みがあり、コンテンツに明確な階層を生み出します。クローゼットを整理するようなものです - それぞれに場所があります！

ヘッダーのカスタマイズ

でも、ヘッダータグを使わずにヘッダースタイルを使いたい場合はどうでしょうか？Bootstrapは.h1から.h6までのクラスでカバーしています。

<p class="h1">このパラグラフはヘッダー1のように見えます</p>
<span class="h3">このspanはヘッダー3のように見えます</span>

これは、ヘッダーの見た目を持つがセマンティックな意味を持たない場合に非常に便利です。フォーマルなのにあまりフォーマルでないタキシードTシャツのようなものです。

ディスプレイヘッダー

通常のヘッダーでは物足りない場合、Bootstrapは「ディスプレイ」ヘッダーを提供しています。これらは、スーパーモデルのヘッダーのように、大きく、太く、目を引くものです。

<h1 class="display-1">ディスプレイ1</h1>
<h1 class="display-2">ディスプレイ2</h1>
<h1 class="display-3">ディスプレイ3</h1>
<h1 class="display-4">ディスプレイ4</h1>

これらのディスプレイヘッダーは、大きな声明を出す必要があるときに最適です。しかし、太多りに使うとページが叫び出すようになるかもしれません！

リード

.leadクラスは、Bootstrapがパラグラフを強調する方法です。テキストにマイクを渡すようなものです。

<p class="lead">これはリードパラグラフです。通常のパラグラフから目立っています。</p>

導入文や強調したい重要な情報に使用します。

略語

Bootstrapは、略語やアクロニムに点線の下線をスタイル化します。読者に秘密のデコーダリングリングを渡すようなものです！

<p>世界保健機関(<abbr title="World Health Organization">WHO</abbr>)は1948年に設立されました。</p>

略語にホバーすると、全文が表示されます。

引用

Bootstrapの引用は、他のテキストから目立つようにスタイル化されています。パラグラフのクールな子のようなものです。

<blockquote class="blockquote">
<p>二つのものが無限大です：宇宙と人間の愚かさ；そして宇宙についても私は確信していません。</p>
</blockquote>

出典の命名

引用に出典を追加するには、<footer>タグにblockquote-footerクラスを使用します。

<blockquote class="blockquote">
<p>二つのものが無限大です：宇宙と人間の愚かさ；そして宇宙についても私は確信していません。</p>
<footer class="blockquote-footer">アインシュタイン</footer>
</blockquote>

これは、スタイルを添えて称賛するようなものです！

アラインメント

Bootstrapは、テキストを簡単にアラインメントするクラスを提供しています。テキストにダンスを教えるようなものです - 左、中央、右！

<p class="text-left">左寄せのテキスト。</p>
<p class="text-center">中央寄せのテキスト。</p>
<p class="text-right">右寄せのテキスト。</p>

インラインテキスト要素

Bootstrapは、さまざまなインラインテキスト要素にスタイルを提供しています。テキストのスイスアーミーナイフのようなものです！

以下は、よく使用されるインラインテキスト要素の表です：

要素	説明
<mark>	强調されたテキスト
<del>	削除されたテキスト
<s>	打ち消し線のテキスト
<ins>	追加されたテキスト
<u>	下線のテキスト
<small>	小さなテキスト
<strong>	太字のテキスト
<em>	斜字のテキスト

例：

<p>これらの要素を使って、<mark>強調</mark>、<del>削除</del>、<s>打ち消し線</s>

Credits: Image by storyset