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

Bootstrap

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

2019年01月25日 8:00 

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

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

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

▼前回までの記事

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

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



 

Bootstrap4の「見出し」

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

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

表示

h1

h2

h3

h4

h5

h6

 

設定

 



Bootstrap4の「見出し」応用

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

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

表示

見出し見出しの補助文

 

設定

 

Bootstrap4の「表示見出し」

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

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

表示

表示用見出し1

表示用見出し2

表示用見出し3

表示用見出し4

 

設定

 



Bootstrap4の「リード文」

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

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

 

表示

これが→リード文←です

 

設定

 

Bootstrap4の「引用」

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

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

表示

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

 

設定

 



Bootstrap4の「引用元の表示」

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

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

表示

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

この引用文の引用元

 

設定

 

Bootstrap4の「引用の配置」

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

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

表示

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

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

 

設定

 



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

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

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

表示

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

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

 

設定

 

Bootstrap4の「横並びリスト」

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

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

表示

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

 

設定

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!