CSS・はじめの一歩

文字の大きさをかえよう

大事なところは大きく、そえ書きは小さく。font-sizeで文字の大きさを変えて、ページにメリハリをつけよう。

見出しは大きく、注意書きは小さく——文字の大きさのメリハリは、読みやすいページの大きな決め手です。それをあやつるのが font-size というプロパティ。ひとつ覚えるだけで、ページの印象がぐっと引きしまります。

書いてみよう

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

「見出しは32ピクセル、段落は16ピクセルの大きさに」という意味。数字が大きいほど、文字も大きくなります。px（ピクセル）は、画面上の点の数で大きさを表す、いちばん基本の単位です。

  • 見出しを目立たせたい → 数字を大きく
  • そえ書きを控えめに → 数字を小さく

HTMLで学んだことが効いてくる

「見出しは大きさでなく意味で選ぶ」——その理由がここでつながります。まずHTMLで <h1>〜<h6> と意味を正しくつけておけば、あとからCSSで「h1 は大きく、h2 はほどほどに」と、見た目をまとめて調整できるのです。

役割分担のごほうびが、こうしてあとから効いてくる。骨組み（HTML）をていねいに作っておくと、着せ替え（CSS）がぐっとラクになります。

HTML見出しと段落を書いてみよう「見出しは意味で選ぶ」——あのとき張った伏線が、ここでつながる

このレッスンのまとめ

  1. 文字の大きさは font-size
  2. 数字には単位（px など）をつける
  3. HTMLで意味づけ → CSSで大きさ調整、という流れが気持ちいい

いまはタグ全体に指定していますが、この先クラスを覚えると「この見出しだけ」ともっと自由に大きさを選べるようになります。 :::

やってみよう：見出しと段落にメリハリをつける

しまちゃんのページの h1（名前）と p（あいさつ文）に、大きさのメリハリをつけましょう。

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

書体・配色はそのまま。ここでは大きさだけを足します。

ブラウザ表示。名前の見出しが大きく32ピクセル、あいさつの文章がふつうの16ピクセルで表示されている
同じページでも、大きさにメリハリがつくだけでぐっと読みやすくなります。