CSS講座 / 段落とリストの配置・字下げ・余白

CSS講座

CSSで段落の配置、字下げ、行高、余白を調整しても、文章やリストの意味はHTMLが担います。行の中の間隔と段落・項目の間隔を分け、長い内容が折り返された状態で読みやすさを確かめます。

行の高さと段落の間隔を分ける

.article p {

  line-height: 1.65;

  margin-block: 0 1.2em;

}

line-heightを大きくすると同じ段落内の行が広がり、margin-blockを大きくすると段落の外側に間隔が付きます。短文だけで代用すると、長い段落で行高が過大になるなどの問題を見落とします。フォントと行高と分けて設定します。

margin-block: 0 1.2emはブロックの開始側0・終了側1.2emです。この横書きでは上と下ですが、縦書きでは物理的な方向が変わります。ここでemは段落自身の文字サイズを参照します。MDNのmargin-blockで論理方向を確認できます。

ブラウザーには段落やリストの初期余白があります。また隣接する縦方向のブロック余白は加算ではなく相殺される場合があります。例では開始側を0にして終了側で間隔を管理します。相殺はボックスモデルとmarginで確認します。

文字の配置と一行目の字下げ

.article p { text-align: start; }

.article .intro { text-indent: 1.5em; }

text-alignは行の中の文字の配置です。startは文字の流れの開始側で、通常の左から右の文書では左になります。段落ボックス全体を画面中央へ移動するプロパティではありません。長い説明を中央揃えにすると行ごとの開始位置が変わるため、本文では読みやすさを優先します。

text-indent: 1.5emは最初の行の始まりだけを下げます。各行を字下げする指定ではありません。完全な例では最初の段落にintroを付けています。段落全体を内側へ寄せたい場合はpaddingなど別の設定を検討し、どの部分が動くかを比較します。

リストの記号と折り返し位置

順序が必要な手順はol、順序が意味を持たない項目はulです。CSSで番号を点にしても元のHTMLの構造は変わりません。内容の意味を決めてから表示を調整します。

list-style-typeは記号の形、list-style-positionは位置を指定します。outsideでは記号が内容ボックスの外にあり、二行目は一行目の本文の始まりに揃います。insideでは記号が一行目に入り、二行目が記号の下まで回り込む場合があります。

outsideの記号が切れないように開始側の空間を確保します。この左から右の例のpadding-inline-start: 1.6emは左の内側余白です。短い語だけでなく折り返す長文で比べてください。

記号を消す場合はアクセシビリティも確認します。Safariではnav外のlist-style:noneのリストがアクセシビリティツリーから除かれる場合があり、必要に応じてrole="list"を検討します。この例は記号を残します。MDNのlist-styleが注意点を説明しています。

項目同士の間隔を別に指定する

.article li + li { margin-block-start: 0.45em; }

li + liは、別のliの直後にあるliを選びます。最初の項目の前に余白を増やさず、二番目以降の項目間だけに間隔を作れます。

一項目の中で折り返した行は、リストから継承するline-heightで調整します。項目間だけ広げても、項目内部の複数行が詰まったままの場合があります。

同じ内容を使って実行する

次の全体をUTF-8のparagraphs.htmlとして保存します。二つのリストの文章は同じなので、内容の差に左右されず記号の位置を比較できます。最初の段落の字下げと番号付きリストも同じファイルで確認します。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Comparing paragraphs and lists</title>

  <style>

    body { margin: 24px; font-family: sans-serif; color: #333; }

    .article { max-width: 65ch; }

    .article p { line-height: 1.65; margin-block: 0 1.2em; text-align: start; }

    .article .intro { text-indent: 1.5em; }

    .article ul, .article ol { padding-inline-start: 1.6em; margin-block: 0 1.2em; line-height: 1.65; }

    .article li + li { margin-block-start: 0.45em; }

    .outside { list-style-position: outside; }

    .inside { list-style-position: inside; }

    ol { list-style-type: decimal; }

  </style>

</head>

<body>

  <main class="article">

    <h1>Small Garden visitor guide</h1>

    <p class="intro">If this is your first visit, check the signs first. This paragraph has a first-line indent. When the text wraps, the remaining lines return to the normal paragraph edge.</p>

    <p>Use line-height for spacing between lines and margin for spacing between paragraphs. Narrow the window and check readability as the text wraps onto more lines.</p>

    <h2>outside list</h2>

    <ul class="outside">

      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>

      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>

    </ul>

    <h2>inside list</h2>

    <ul class="inside">

      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>

      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>

    </ul>

    <h2>Preparation in order</h2>

    <ol><li>Read the notice.</li><li>Prepare a watering can.</li><li>Put tools back after use.</li></ol>

  </main>

</body>

</html>

一つずつ余白を変えて確かめる

窓を狭め、項目が複数行になるようにします。outsideの本文の揃いと、insideの記号の下への折り返しを比較します。
.introのtext-indentを0へ変え、一段落目の一行目だけが動くことを確認して1.5emへ戻します。
段落のmargin-blockの終了値を0にし、行高は同じで段落間だけ狭くなることを確認します。その後line-heightだけを1.2にして違いを比較し、戻します。
li + liの0.45emを0と1emで比較します。項目内の行高や一番目の前の余白が変わらないことを見ます。

記号が切れたらリストのpaddingと外側のoverflowを調べます。一部だけ余白が違うならセレクターと初期スタイルを確認します。例の65chは0の幅を基準にした最大幅で、文字数の固定指定ではありません。

CSS講座