テキスト周りの調整に便利なクラスを使おう

この講座の動画を見る(メンバー限定)

例えば、画面内のテキストを画面の中央揃えにしたい場合、通常は CSSでtext-align: centerなどと記述して中央に揃えます。

しかし Bootstrapには、テキストの装飾や調整を行うためのクラスが複数準備されていて、これを使って CSSを記述することなく調整することができます。

例えば、次のようにクラスを記述してみましょう。

<div class="text-center">
  <h1>ともすた</h1>
  <p>YouTubeもよろしくお願いします</p>
</div>

これで、要素内のテキストが中央揃えになります。

さらに、次のような左寄せや右寄せのクラスも準備されています。

<div class="text-start">
<div class="text-end">

この他にも、次のようなクラスが準備されています。

ブレイクポイントの設定

text-centerなどのクラスを利用するメリットの一つは、レスポンシブ・ウェブデザインに簡単に対応できることです。例えば、画面幅が広い時と狭い時でテキストの配置を変えたい時などに、コンテナのところでも紹介したブレイクポイントキーワードが利用できます。

<div class="text-md-center">

こうすると 760pxよりも小さな画面サイズになると、テキストは左寄せになります。

組み合わせも可能です。

<div class="text-md-center text-sm-end">

この場合、Smallの画面幅では右寄せになります。

そのほかのテキスト装飾クラス

テキストの折り返し

幅を指定した要素の中に長い文字列を入れると、通常は折り返して表示されます。

これは、text-wrapというクラスが適用されている状態です。もし折り返したくない場合があれば、text-nowrapクラスを使って要素からはみ出させることができます。

<div class="text-nowrap" style="width: 6rem;">

テキストの強制改行

今度は逆に、英文で半角空白などがない場合に、折り返せる場所が分からずにはみ出てしまうという現象があります。これはよく、ウェブサイトのアドレス(URL)などを記載すると画面からはみ出るということがよくあります。そこで、これを防ぐためにtext-breakクラスを指定しておくと良いでしょう。強制的に折り返されます。

<p class="text-break;">mmmm</p>

英文テキストの大文字・小文字

英文テキストの場合、実際には先頭だけが大文字なのに対して表示の時は、全て大文字にしたいとか小文字にしたいといったケースがあります。このような時に利用できるのが、次のようなクラス群です。

text-capitalizeクラスは、単語の先頭を強制的に大文字にするクラスです。

<p class="text-lowercase">Lowercase</p>
<p class="text-uppercase">Uppercase</p>
<p class="text-capitalize">CapitaliZe text</p>

文字サイズの変更

文字サイズも簡単に変えることができます。fs-1からfs-6まで準備されていて、自由な文字サイズに変更できます。「fs」は「Font Size」の略称です。

<p class="fs-1">text</p>
<p class="fs-2">text</p>
<p class="fs-3">text</p>
<p class="fs-4">text</p>
<p class="fs-5">text</p>
<p class="fs-6">text</p>

文字の装飾

文字の太さや斜体の指定など、CSSのfont-weightプロパティや、font-styleプロパティで設定できる値にもそれぞれ独自のクラスが定義されています。

<p class="fw-bold">Bold</p>
<p class="fw-bolder">Bolder</p>
<p class="fw-normal">Normal</p>
<p class="fw-light">Light</p>
<p class="fw-lighter">Lighter</p>
<p class="fat-italic">Italic</p>
<p class="fat-normal">Normal</p>

行間の調整

文章の行間を調整する、line-heightプロパティの設定もクラスで指定できます。なお、lh-1という数字を利用したクラスですが 1以外の数字は指定できません。

<p class="lh-1">1行目<br>2行目</p>
<p class="lh-sm">1行目<br>2行目</p>
<p class="lh-base">1行目<br>2行目</p>
<p class="lh-lg">1行目<br>2行目</p>

等幅

通常本文は、「プロポーショナルフォント」と呼ばれるも時間を調整して読みやすくしたフォントが使われます。しかし、ソースコードを掲載する時などは逆にこれがみにくくなってしまうため、「等幅フォント」という文字間が一定のフォントを採用したほうが見やすくなります。

Bootstrapでは等幅フォントを利用したい場合はfont-monospaceクラスを使います。

<p class="font-monospace">This is in monospace</p>

色のリセット

Bootstrapでは、リンク色などが標準で設定されています。

しかし、これがデザイン的に適さない場合などはtext-resetクラスで利用しないように指定できます。

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">こちら</a>.
</p>

文字の装飾

打ち消し線や下線など、CSSのtext-decorationプロパティにも独自のクラスが定義されています。

<p class="text-decoration-underline">段落です</p>
<p class="text-decoration-line-through">段落です</p>
<a href="#" class="text-decoration-none">段落です</a>

これらのクラスを利用すれば、ほとんど CSSを記述することなくページ内容を作り上げることができます。無理に利用する必要はなく、CSSで調整することもできますが、部分的に変えたいとかある部分だけを素早く変えたい時などに便利です。

ともすたチャンネルに
チャンネル登録する