Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【文字の装飾編】

おはようございます！社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第4回目になりました！

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第4回目の今回は「文字の装飾編」！見出しや本文・リストなど文字の装飾に関して解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか？

Bootstrap4の「見出し」

Bootstrapでは、<h1>〜<h6>の要素以外で見出しを使いたいときにもクラス付与だけで見出しを作ることができます。

要素に、「.h1」〜「.h6」のクラスを付与すると、<h1>〜<h6>と同等の見出しを実現できます。

表示

h1

h2

h3

h4

h5

h6

設定

<p class="h1">h1</p>
<p class="h2">h2</p>
<p class="h3">h3</p>
<p class="h4">h4</p>
<p class="h5">h5</p>
<p class="h6">h6</p>

Bootstrap4の「見出し」応用

Bootstrapでは、見出しに補助文を入れることができます。

補助文を作成するには、<h1>〜<h6>の要素もしくは「.h1」〜「.h6」のクラスを付与した要素の中に、「small.text-muted」もしくは「span.small.text-muted」を入れることで作成可能です。

表示

見出し見出しの補助文

設定

<p class="h2">
見出し
<small class="text-muted">見出しの補助文</small>
</p>

Bootstrap4の「表示見出し」

見出しよりも大きい文字サイズで表示できるのが「表示見出し」です。

インパクトを出したいときに使用します。要素に、「.display-1」〜「.display-4」のクラスを付与することで実装できます。

表示

表示用見出し1

表示用見出し2

表示用見出し3

表示用見出し4

設定

<p class="display-1">表示用見出し1</p>
<p class="display-2">表示用見出し2</p>
<p class="display-3">表示用見出し3</p>
<p class="display-4">表示用見出し4</p>

Bootstrap4の「リード文」

冒頭の挨拶や強調したい文章などにリード文を使用します。

要素に「.lead」クラスを付与することで実装できます。

表示

これが→リード文←です

設定

<p>これが→<span class="lead">リード文</span>←です</p>

Bootstrap4の「引用」

文章内に別のソースからのコンテンツ・ブロックを引用する場合に使用します。

文章を<blockquote class=”blockquote”>で囲むことで実装できます。

表示

引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。

設定

<blockquote class="blockquote">
  引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。
</blockquote>

Bootstrap4の「引用元の表示」

引用文を使用するときは、引用元を表示します。

<footer class=”blockquote-footer”>で囲み、<cite>で引用元の名前を囲むことで実装できます。

表示

引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。

設定

<blockquote class="blockquote">
  引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。
  <footer class="blockquote-footer">この引用文の<cite title="引用元の名前">引用元</cite></footer>
</blockquote>

Bootstrap4の「引用の配置」

引用文の配置を変更することもできます。

blockquote要素に対して「.text-center」もしくは「.text-right」クラスを付与することで実装できます。

表示

引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。

引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。

設定

<blockquote class="blockquote text-center">
  引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。
</blockquote>

<blockquote class="blockquote text-right">
  引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。
</blockquote>

Bootstrap4の「マークなしリスト」

Bootstrap4の「マークなしリスト」では、リストアイテムのデフォルトの list-style と左マージンを削除します。

ulもしくはol要素に「.list-unstyled」クラスを付与することで実装できます。

表示

• リスト1
• リスト2
• リスト3

※上記は独自のスタイルを適用しているため、ご覧の表示になります。

設定

<ul class="list-unstyled">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

Bootstrap4の「横並びリスト」

リストの箇条書きを削除し、横並びリストを作成できます。

親要素に「.list-inline」子要素に「.list-inline-item」クラスを付与することで実装できます。

表示

• リスト1
• リスト2
• リスト3

設定

<ul class="list-inline">
  <li class="list-inline-item">リスト1</li>
  <li class="list-inline-item">リスト2</li>
  <li class="list-inline-item">リスト3</li>
</ul>