【6日でできるHTML入門】文字書式のCSS②

　Webページの本文を読みやすく、美しく見せるためには、文字周りのスペースや並び、装飾をCSSで細かく調整する必要があります。「文字書式のCSS②」では、行間の調整、複数書式の一括指定、文字の揃え、さらに文字間・単語間隔の指定といった「文字書式」に関するCSSプロパティを学び、実際のHTMLサンプルを交えて効果を確認します。

１．行間の調整

1.1. `line-height` プロパティ

単位なし数値：文字高さに対する倍率（例：2.0 → 2倍）
単位付き数値：具体的な長さ（例：18px）

ファイル名： lesson11-1.html

<!-- ファイル名: lesson11-1.html 📖 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>読書ガイド📖</title>
  <style>
    p.default { line-height: normal; }
    p.spacious { line-height:2.0; }
  </style>
</head>
<body>
  <h1>本の紹介</h1>
  <p class="default">
    ここでは、最新の小説をピックアップしてご紹介します。短い文章ですが、行間が狭いため少し読みづらく感じるかもしれません。
  </p>
  <p class="spacious">
    こちらは同じ内容を行間2.0で表示しています。ゆったりとした行間により、読みやすさが格段に向上します。
  </p>
</body>
</html>

ブラウザの出力例

1つ目はブラウザ標準の行間、2つ目は文字高さの2倍の行間で表示されます。

1.2. 単位付きでの指定例

<p style="line-height:24px;">
  行間を24ピクセルで固定指定するときはこちら。文字サイズやフォントに依存せず、常に一定の間隔が保たれます。
</p>

２．文字書式の一括指定

2.1. `font` プロパティの概要

　文字サイズや行間、太さ、斜体、フォントを一度にまとめて指定できるショートカット。指定順序は以下の通りです。

font-style（斜体など）※省略可
font-weight（太さ）※省略可
font-size/line-height
font-family

ファイル名： lesson11-2.html

<!-- ファイル名: lesson11-2.html 🆕 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ショートハンド紹介🆕</title>
  <style>
    .fancy {
      font: italic bold 16px/1.8 "Yu Gothic", sans-serif;
    }
  </style>
</head>
<body>
  <h1>ショートハンドで一括指定</h1>
  <p class="fancy">
    斜体＋太字＋16pxの文字サイズ＋行間1.8倍＋ゴシック系フォントを一度に指定しています。
  </p>
</body>
</html>

ブラウザの出力例

指定したすべての書式が1要素内で適用されます。

2.2. 通常の複数プロパティ指定との違い

/* 個別指定 */
// p {
//   font-style:italic;
//   font-weight:bold;
//   font-size:16px;
//   line-height:1.8;
//   font-family:sans-serif;
// }

上記を1行で書けるのがfontショートハンドの利点です。

３．行揃え（テキストアライン）

3.1. `text-align` プロパティ

値	説明
left	左揃え
center	中央揃え
right	右揃え

ファイル名： lesson11-3.html

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

css-char-format2 ダウンロード

<!-- ファイル名: lesson11-3.html 🔲 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ギャラリー🔲</title>
  <style>
    .center { text-align:center; }
    .right  { text-align:right; }
  </style>
</head>
<body>
  <h1 class="center">フォトギャラリー</h1>
  <p class="center">
    中央揃えのキャプション<br>
    <img src="beach.png" alt="海辺の風景">
  </p>
  <p class="right">右揃えのキャプション</p>
</body>
</html>

ブラウザの出力例

見出しと最初の段落は中央、最後の段落は右揃えになります。

3.2. 両端揃えの注意

　text-align:justify; による両端揃えは一部ブラウザで非対応のため、利用時は表示確認が必要です。

４．文字・単語間隔の指定

4.1. `letter-spacing`（文字間隔）

<p style="letter-spacing:2px;">
  文字間を2ピクセル広げています。
</p>

4.2. `word-spacing`（単語間隔）

<p style="word-spacing:8px;">
  単語間を8ピクセル広げています。
</p>

両方を同時に指定することも可能です。

<p style="letter-spacing:1px; word-spacing:4px;">
  少し余白を追加したテキスト例。
</p>

まとめ

ここで登場したCSSプロパティを以下にまとめます。

プロパティ	用途
line-height	行間を倍率または固定長で指定
font	文字書式を一括指定
text-align	行揃え（左・中央・右・両端）
letter-spacing	文字間隔を指定
word-spacing	単語間隔を指定

　これらを組み合わせることで、テキストの可読性やデザイン性を大きく向上させることができます。用途に応じて適切なプロパティを選び、洗練されたレイアウトを実現しましょう。

【6日でできるHTML入門】文字書式のCSS②