CSS・見た目をもっと自由に

文字を中央や右にそろえる

見出しを真ん中に、日付を右に。text-alignひとつで文字のそろえ方を変えて、ページのバランスを整えよう。

文章はふつう、左からはじまります。でも、見出しは真ん中に置いたほうが映えるし、日付や署名は右にそろえると収まりがよい。この文字のそろえ方をあやつるのが text-align です。

書いてみよう

h1 {
  text-align: center;
}

これで見出しが中央ぞろえになります。値を入れ替えれば、そろえる方向が変わります。

  • text-align: left; … 左にそろえる（ふつうはこれ）
  • text-align: center; … 中央にそろえる
  • text-align: right; … 右にそろえる

見出しは center、そえ書きや日付は right——といった具合に、役割で使い分けると、ページに落ち着きが出ます。

このレッスンのまとめ

  1. 文字のそろえ方は text-align
  2. left・center・right の3つから選ぶ
  3. そろうのは箱の中の文字（箱そのものではない）

:::

やってみよう：れんらくの中身を中央にそろえる

「れんらく」の<section>に、class="contact"を足しましょう（class="card contact"のように、クラスは2つ並べてつけられます）。

<section id="contact" class="card contact">
  ...
</section>
.contact {
  text-align: center;
}

.cardはそのまま、.contactを追加でつけただけ。1つの要素に複数のクラスをスペース区切りでつけられることも、ここで覚えておきましょう。

ブラウザ表示。「れんらく」のカードの中身が、見出しごと中央にそろって表示されている
れんらくの見出しと中身が、まとまって真ん中に寄りました。