リストのマーカー位置を整える：折り返す本文と丸印の場所を分ける

箇条書きが二行になると、二行目だけ丸印の下へ戻って読みにくい。リストのマーカー位置を整えるには、文章の開始位置と、丸印を置く位置を分けて考えます。短い一行の項目だけで調整せず、折り返す文章を最初から使いましょう。

ここでは架空の植物交換会の持ち物案内を作ります。HTMLのulとli、CSSのクラス指定が少し分かる人向けです。横書きの通常の箇条書きに絞り、番号付き手順や画像のマーカーは扱いません。完成条件は、文章が複数行になっても読み始めの位置がそろい、丸印も枠内に残ることです。

丸印を文章の外側へ置くか、行の中へ入れるか

箇条書きの丸印などをマーカーと呼びます。list-style-positionは、項目の本文に対してマーカーをどこへ置くかを決めるCSSです。outsideなら本文の箱の外側、insideなら本文の行の中へ置きます。

今回のように各項目が長くなる案内では、まずoutsideで本文の左端をそろえる案を試します。丸印の分だけ一行目の文章が押し出されないので、二行目も本文の開始位置から読めます。insideは丸印も行の中を使うため、折り返し後の文字は一行目の文字より左から始まる形になります。

MDNのlist-style-positionの説明では、二つの値と、親のulに指定して子のliへ引き継げることを確認できます。ここでは丸印の種類を変えず、位置だけを比べます。一度に色、文字サイズ、余白まで変えると、何が読み始めの位置を変えたのか判断しにくくなります。

枠の内側に、マーカーのための場所を用意する

次のHTMLはbody内に置く断片です。新しい練習用HTMLに文字コードとviewportを用意し、CSSはhead内のstyle要素へ入れてください。単独で完成したHTML文書ではありません。

<main class="practice">
  <h1>植物交換会の持ち物（架空の練習例）</h1>
  <div class="notice">
    <ul class="packing-list">
      <li>持ち帰る苗が倒れないよう、底が平らで汚れてもよい袋を用意してください。</li>
      <li>植物の名前と育てた場所を記した短いメモを添えてください。</li>
      <li>筆記用具</li>
    </ul>
  </div>
</main>

body { margin: 1rem; font-family: sans-serif; line-height: 1.7; }
.practice { max-width: 34rem; margin-inline: auto; }
.notice { border: 2px solid #333; padding: 1rem; }
.packing-list {
  margin: 0;
  padding-inline-start: 1.5em;
  list-style-type: disc;
  list-style-position: outside;
}
.packing-list > li + li { margin-block-start: 0.75em; }

ulの開始側のpaddingは、外側へ置いたマーカーの場所を確保するために残しています。noticeのpaddingは枠と一覧の間、li同士のmarginは項目間の空きです。三つは担当する場所が違います。画面上で「枠、丸印、本文」の順に指してみてください。

padding-inline-startは、今回の左から右へ読む横書きでは左側の内側余白です。1.5emはこの練習用の候補値で、どのマーカーにも十分な幅を保証する値ではありません。まず丸印で確かめ、番号や文字サイズを変えたときは必要な場所を見直します。

幅を390px程度にすると、最初の項目は複数行になります。二行目が一行目の「持」の位置から始まり、丸印はその左にある状態を確認します。枠の外へ丸印が消えていないことも、本文の整列とは別に見てください。

二行目が戻る問題は、字下げの継ぎ足しで直さない

比較のためlist-style-positionだけをinsideに替えます。一行目は丸印の後ろから始まる一方、二行目は行の開始側へ戻ります。これは折り返しに合わせて丸印の幅を自動で空け続ける指定ではないためです。

この状態に全角スペースを足して字下げすると、画面幅が変わった際に別の位置で折り返し、再びずれます。今回の修正はoutsideへ戻すことです。再確認では広い幅だけでなく、最初の項目が二行以上になる幅で、文字の開始位置がそろうかを比べます。

長文が読みづらい原因をすべてマーカーへ帰さないことも必要です。一項目に複数の指示が詰まっているなら、原稿を分ける判断があります。ただし検証中に文を短くして一行へ戻すと、折り返しの問題を確認できません。位置の修正と原稿の編集は別々に行います。

丸印が枠へ近付いたら、一覧の開始側余白を戻す

二つ目の失敗は、余白をそろえるためにulのpaddingを0へすることです。outsideのままでは、マーカー用の場所が減り、枠へ近付いたり外へはみ出したりする場合があります。本文の左端だけを見て「ぴったり合った」と判断しないでください。

修正ではulへpadding-inline-startを戻します。必要なら候補値を少し増やしますが、先にnoticeの外周余白を大きくして全体をずらすのではなく、マーカーの場所を担当する指定から調べます。再確認は、枠と丸印が重ならず、本文の幅も必要以上に狭くならないことです。

一覧を横並びのタグにするgapの例では、マーカーを消して項目同士の間隔を扱っています。そのCSSを持ち物リストへ丸ごと流用すると、今回必要な丸印や本文の並びまで変わります。同じulでも、読む箇条書きと横並びの分類を分けましょう。

使う位置は、原稿の長さと一覧の役割で選ぶ

insideが常に誤りというわけではありません。マーカーを行内へ含めたい短い項目なら、表示を比べたうえで選べます。ただし今は一行でも、更新で説明が長くなる案内には、複数行の状態を含む判断が必要です。

順序に意味がある手順は、丸印ではなく番号付きリストを検討します。その場合は二桁以上の番号にも場所が必要です。また、項目の中に段落や別の一覧を入れる構成は、今回の「li内に直接文章だけを置く」例と条件が異なります。構造を増やしたら、その状態で折り返しを確かめます。

外周や項目間の距離そのものを決める考え方は余白をそろえる記事を参照できます。今回はその前に、丸印の位置を原因として切り分けられることを目標にします。

二行目の開始位置と、丸印の欠けを点検する

最初の項目をさらに一文長くします。幅390pxと1280pxで表示し、次の三条件を記録してください。折り返す行数は書体や設定で変わるため、行数そのものは合否にしません。

• 長い項目の二行目以降が、一行目の本文の開始位置にそろう。
• 三つの丸印が欠けず、案内の枠と重ならずに見える。
• 最後の短い「筆記用具」も、他の項目の本文と同じ位置から始まる。

次に文字を拡大し、同じ三条件を再確認します。ずれたらinsideへ変わっていないか、開始側paddingを上書きしていないかを調べます。レスポンシブCSSの無料レッスンへ進む際も、短い仮文だけでなく、今回の長い持ち物説明を確認用に残しておきましょう。