【Bootstrap】テキストの配置位置やフォントサイズを設定しよう!
- Bootstrapで使用可能なテキストの調べ方
- テキストの配置位置(Text alignment)
- テキストのサイズ
- 大文字・小文字変換(Text transform)
- 太字と斜体(Font weight and italics)
- 等幅フォント(Monospace)
Bootstrapで使用可能なテキストの調べ方
Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Text」ページでテキストの配置位置(Text alignment)、大文字・小文字変換(Text transform)、太さや斜体(Font weight and italics)など確認することができます。
テキストの配置位置(Text alignment)
テキストを左揃え、中央揃え、右揃えにすることができます。
Left
Center
Right
<p class="text-left">Left</p> //左揃え
<p class="text-center">Center</p> //中央揃え
<p class="text-right">Right</p> //右揃え
テキストのサイズ
display-1を使うことでテキストのサイズを調節できます。
Hello
Hello
Hello
Hello
<p class="display-1">Hello</p>
<p class="display-2">Hello</p>
<p class="display-3">Hello</p>
<p class="display-4">Hello</p>
1~4まであり1が一番大きいです。
大文字・小文字変換(Text transform)
Lowercased text.
Uppercased text.
<p class="text-lowercase">Lowercased text.</p> //すべて小文字に変換
<p class="text-uppercase">Uppercased text.</p> //すべて大文字に変換
太字と斜体(Font weight and italics)
テキストを太字、普通、細目、イタリック体にすることができます。
Bold text.
Normal weight text.
Light weight text.
Italic text.
<p class="font-weight-bold">Bold text.</p> //太字 <p class="font-weight-normal">Normal weight text.</p> //普通 <p class="font-weight-light">Light weight text.</p> //細め <p class="font-italic">Italic text.</p> //イタリック体
font-weight-normalはh2タグの太字を普通の太さにしたい場合などに使うことができます。
等幅フォント(Monospace)
This is in monospace
<p class="text-monospace">This is in monospace</p>