JP

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

指定しなくても、最初から大きさは違う

<h1>から<h6>は、CSSで何も指定しなくても、ブラウザの初期設定で少しずつ大きさが違います（h1がいちばん大きく、番号が増えるほど小さく）。font-sizeは、その初期値を自分の好みに上書きする指定というわけです。指定を忘れたとしても、意味どおりの大小関係だけは保たれる——そう思うと、少し気が楽になりますね。

このレッスンのまとめ

  1. 文字の大きさは font-size
  2. 数字には単位（px など）をつける
  3. HTMLで意味づけ → CSSで大きさ調整、という流れが気持ちいい
  4. h1〜h6はもともと大きさが違う。font-sizeはその初期値の上書き

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

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

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

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

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

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

よくある質問

font-size: 16;のように単位を書かないとどうなる？
指定が無効になり、大きさが変わりません。数字のうしろに必ずpxなどの単位をつけましょう。
remとpxはどう違うの？
pxは常に同じ大きさのピクセル指定、remは基準（html要素の文字サイズ）に対する倍率の指定です。remを使うと、基準サイズを1か所変えるだけで、ページ全体の文字の大きさをまとめて調整できます。
見出しの大きさは、h1からh6まで自分で決めていいの？
決めて構いません。ブラウザの初期値は目安にすぎないので、font-sizeで好きな大きさに上書きできます。ただしh1がいちばん大きく、番号が増えるほど小さくなる順序は保っておくと、見た目と意味がずれません。