HTML/CSS：文字とフォント

font-size が20px、line-height が36px

line-height は単位なしの数値で指定する。

<style>
  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

<p>読みやすい行間の文章です。</p>

line-height: 1.8 は「文字サイズの1.8倍」。20px × 1.8 = 36px の行の高さになる。文字サイズを変えれば行間も自動で追随する。

解答 == C

詰まりすぎず、空きすぎない値。

C

1.0だと行が詰まって読みにくく、3.0だと離れすぎて視線が迷う。日本語は漢字が多く画数も多いので、英語より広めが好まれる。

text-align が center、font-weight が700

text-align: center; と font-weight: bold; を指定する。

<style>
  h1 {
    text-align: center;
    font-weight: bold;
  }
</style>

<h1>ページタイトル</h1>

中央揃えは短い見出しに向く。長い文章を中央揃えにすると各行の開始位置がずれ、読みにくくなる。

<style>
  p {
    font-size: 16px;
    ____: 2;
  }
</style>

<p>行間を広げた文章</p>

line-height が32px

「行の高さ」を意味する11文字のプロパティ（ハイフン含む）。

line-height

16px × 2 = 32px の行の高さになる。単位を付けずに書くのが、追随性の高い書き方。

解答 == B

root の em という意味。

B

rem はどこで使っても同じ大きさになる。em は親基準なので入れ子で膨らむが、rem なら予測しやすい。

text-decoration が none、色が正しい

text-decoration: none; で下線が消える。

<style>
  a {
    text-decoration: none;
    color: #0066cc;
  }
</style>

<a href="#">リンクテキスト</a>

下線を消すなら色で補う。何の手がかりも無いと、リンクだと気づかれずクリックされなくなる。

<style>
  body {
    ____: sans-serif;
  }
</style>

<p>ゴシック体の文章</p>

font-family が sans-serif

「フォントの種類」を意味する11文字のプロパティ（ハイフン含む）。

font-family

sans-serif はゴシック体の総称。具体的なフォント名が無くても、環境に応じた適切なフォントが選ばれる。

解答 == C

em は親要素の文字サイズが基準。

C

20px × 1.5 = 30px。em は親基準なので、入れ子が深くなるほど計算が複雑になる——これが rem が好まれる理由。

letter-spacing が2px

letter-spacing で文字と文字の間隔を指定する。

<style>
  h1 {
    letter-spacing: 2px;
  }
</style>

<h1>ゆったりした見出し</h1>

字間を少し広げると上品な印象になる。ただし広げすぎると読みにくくなるので、見出しで 0.05em 程度が目安。

font-family に2つ以上指定されている

font-family: "Noto Sans JP", sans-serif; のようにカンマで区切る。

<style>
  body {
    font-family: "Noto Sans JP", sans-serif;
  }
</style>

<p>本文です。</p>

左から順に探し、見つかったものが使われる。最後は必ず総称名（sans-serif など）で締めるのが安全な書き方。

body の4つの指定が正しい

body にまとめて指定すれば、中の段落にも継承される。

<style>
  body {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    font-family: sans-serif;
  }
</style>

<p>1つ目の段落です。読みやすさは行間で決まります。</p>
<p>2つ目の段落です。</p>

この4行が本文設計の基本セット。どんなサイトでもまずこれを書き、そこから調整していく。

h1が32px、h2が24px、pが16px

rem はルート基準なので、16px × 倍率 で計算できる。

<style>
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  p  { font-size: 1rem; }
</style>

<h1>大見出し</h1>
<h2>中見出し</h2>
<p>本文です。</p>

rem で書くと比率が一目で分かる。「本文の2倍」「1.5倍」という関係が数値に表れ、全体のバランスを調整しやすい。

p が30px

em は親要素基準。20 × 1.5 = ?

<style>
  div {
    font-size: 20px;
  }

  div p {
    font-size: 1.5em;
  }
</style>

<div>
  <p>親の1.5倍</p>
</div>

30pxになる。もしこの p の中にさらに 1.5em の要素があれば45pxになり、入れ子が深いほど予測が難しくなる。

h3とpのスタイルが正しい

子孫セレクタ（.card h3）で範囲を限定する。

<style>
  .card h3 {
    font-size: 1.25rem;
    font-weight: bold;
  }

  .card p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #666666;
  }
</style>

<div class="card">
  <h3>商品名</h3>
  <p>商品の説明文がここに入ります。</p>
</div>

0.875rem は14px（16 × 0.875）。補足的な文章を本文より少し小さくすると、情報の主従が視覚的に伝わる。

bodyとcodeのフォントが違う

code タグには monospace（等幅）を指定するのが慣習。

<style>
  body {
    font-family: sans-serif;
  }

  code {
    font-family: monospace;
  }
</style>

<p>変数は <code>const price = 100;</code> のように書きます。</p>

等幅フォントは全ての文字が同じ幅。コードでは桁の位置が揃うことが重要なので、専用のフォントを使う。

すべての文字設定が正しい

body にまとめて基本設定を書き、個別に上書きする。line-height: 1.8 は 16px × 1.8 = 28.8px になる。h1 の 2rem は32px。

<style>
  body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
  }

  h1 {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
  }

  h2 {
    font-size: 1.5rem;
    color: navy;
  }

  .lead {
    font-size: 1.125rem;
    color: #666666;
  }

  a {
    text-decoration: none;
    color: #0066cc;
  }

  code {
    font-family: monospace;
  }
</style>

<h1>CSSで文字を整える</h1>

<p class="lead">読みやすさは文字の設定で決まります。</p>

<h2>行間の重要性</h2>

<p>行の高さは <code>line-height: 1.8;</code> のように指定します。<a href="#">詳しく見る</a></p>

このページは、文字の設定だけで読みやすさが大きく変わる。もし line-height を指定しなければ、ブラウザの既定値（約1.2）のまま行が詰まり、日本語の本文としては窮屈な見た目になる。たった1行の指定が、ページ全体の読み心地を決めている。

line-height: 1.8 を単位なしで書いた点も重要だ。計算結果は 16px × 1.8 = 28.8px になるが、もし文字サイズを18pxに変えれば行間も自動で32.4pxに追随する。ここを 28.8px と固定値で書いていたら、文字だけ大きくなって行が詰まってしまう。

rem の使い方にも注目してほしい。h1 が 2rem、h2 が 1.5rem、導入文が 1.125rem——本文を1としたときの比率が、数値を見るだけで分かる。px で 32/24/18 と書いても同じ結果だが、「本文の何倍か」という関係は読み取れない。

次章では色と背景を扱う。文字が整ったところに配色を加えると、ページは一気に「デザインされたもの」に見えてくる。