CSS・はじめの一歩

フォントを選ぼう

同じ文字でも、フォントが変わると印象はがらりと変わる。font-familyでフォントを指定し、ページ全体の質感を仕上げよう。

色をつけただけでも”自分のページ”らしくなってきましたが、文字そのものの書体もまた印象を大きく左右します。角ばった書体はきりっと、丸い書体はやさしく。この書体をあやつるのが font-family です。

書いてみよう

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
}

カンマで区切って、フォント名を何個も並べています。これは「まず1つ目を探して、なければ2つ目、それもなければ3つ目……」という候補リスト。パソコンやスマホによって入っているフォントはバラバラなので、こうして候補を並べておくことで、どの機器で見ても近い見た目に仕上がります。

書くもの役割
"Hiragino Sans"Macに入っている日本語フォント（第1候補）
"Helvetica Neue"見つからないときの次点（欧文フォント）
Arialそれも無ければこれ
sans-serif最後の砦。「とにかく明朝体じゃない書体」という総称

名前にスペースがあるフォントは引用符でくくる

"Hiragino Sans" のように、フォント名の途中にスペースがあるものは " " でくくります。sans-serif のように総称の名前（引用符なしで書く決まりの単語）には、引用符をつけません。

最後は必ず総称ファミリーで締める

候補リストのいちばん最後には、sans-serif（ゴシック体）や serif（明朝体）といった、引用符なしの総称ファミリーを置くのが定番です。もし指定した候補が1つも見つからなくても、この総称だけは必ずブラウザが持っているので、最低限の書体は保証されます。

行の高さも、いっしょに整える

フォントを決めるタイミングで、もう1つ。文章が2行以上になったときの行と行のすき間は line-height であやつります。

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
}

1.7 は「文字の大きさの1.7倍ぶん」というイメージの数字（単位なし）。行間が詰まっていると読みにくく、広すぎても間延びします。1.5〜1.8くらいが、読みやすい行間の目安です。

このレッスンのまとめ

  1. 書体は font-family。カンマ区切りで候補をいくつも並べる
  2. スペースを含む名前は " " でくくる
  3. 最後は必ず sans-serif などの総称ファミリーで締める
  4. 行間は line-height（1.5〜1.8くらいが目安）

これで、ページ全体の土台となる書体と配色が定まりました。 :::

やってみよう：本物のフォントと配色に決める

ここで一度、しまちゃんのページの本物のフォントと配色に決めてしまいましょう。body のルールを、まるごとこう書きかえます。

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  color: #2c2622;
  background-color: #faf6ee;
  line-height: 1.7;
}

color と background-color の値が、色名から #2c2622（濃い茶色）・#faf6ee（やわらかいクリーム色）というコードに変わっているのに気づきましたか？ 名前にない、微妙な色あいを選びたいときはコードの出番です。

ブラウザ表示。ゴシック体の文字で、濃い茶色の文字とやわらかいクリーム色の背景になっている
明朝体だったページが、すっきりしたゴシック体に。配色も、しまちゃんのページの”本物”に決まりました。