テキストを飾る

導入

文字そのものの見た目 ―― 大きさ・太さ・配置 ―― も CSS で整えられます。

説明

• font-size … 文字の大きさ
• font-weight … 太さ（bold で太字、normal でふつう）
• text-align … 行の揃え方（center で中央、right で右）

<h2 class="headline">見出し</h2>

<style>
  .headline {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
  }
</style>

text-align: center はテキストを中央に寄せます。見出しやボタンの文字によく使います。

やってみよう

上の例を打ち込み、見出しが大きく・太く・中央に表示されることを確かめましょう。text-align を right に変えると右寄せになります。

演習

class="center" の要素の文字を中央揃えにする CSS を書いてください。