記号が消えるのはリセットCSSが原因のことが多い
中黒や番号が表示されない場合、リセットCSSやnormalizeがlist-style:none;を当てている、またはdisplayを変更していることがよくあります。ナビゲーション用にリストの記号を消す設定が、本文のリストにも波及しているケースが典型です。
記事本文のリストには改めてlist-style-type:disc;やdecimal;を指定し直すと記号が戻ります。リセットの影響範囲を把握し、本文用のスタイルを上書きするのが基本です。
テキストとずれるのはpaddingとmarginの初期化
リスト全体が左に寄りすぎたり記号が見切れたりするのは、ul・olのpadding-leftやmargin-leftがリセットでゼロになっているためです。記号はこの内側の余白の領域に描画されるため、ゼロにすると行頭が枠外に押し出されます。
padding-leftに適切な値を戻すと、記号とテキストの位置が整います。インデントの深さはデザインに合わせて調整してください。
症状別チェック表
箇条書きの行頭記号や番号がずれる・消えるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
list-style-positionによる折り返しのずれ
list-style-positionの値で記号の位置が変わります。outsideは記号がテキストブロックの外側に出て、複数行になったとき2行目以降が記号の右で揃います。insideは記号が文章の流れの中に入り、折り返すと記号の下までテキストが回り込みます。
長文の項目で2行目の頭が記号の真下に来てしまう場合は、outsideを指定すると体裁が整います。意図しない揃い方になっているときはこの値を見直してください。
ずれ・消えを直す手順
リセットの影響から順に確認していくと原因をつかみやすいです。
- リセットCSSでlist-styleが消されていないか確認する
- 本文リストにlist-style-typeを指定し直す
- ul・olのpadding-leftを適切な値に戻す
- 折り返しの揃え方をlist-style-positionで調整する
- 番号リストはol開始位置やstart属性も確認する
リストの見え方を共有して確認する
リストの記号やインデントは細かい違いが目立つ部分で、文章で説明しても伝わりにくいものです。実際の表示を関係者と一緒に見ながら直すと、認識のズレなく合意できます。
ギガサイト便なら、検証用のHTMLをドロップするだけで〇〇.giga-site.comの共有URLが発行でき、同じURLのまま記号やインデントを差し替えながら見せられます。QRコードで配布すればスマホでもすぐ開けます。レビューを社外に見せたくない場合は会社ドメイン認証などを併用してください。
よくある質問
中黒や番号が表示されません
リセットCSSがlist-style:none;を当てていることが多いです。本文のリストにlist-style-type:disc;やdecimal;を指定し直すと記号が戻ります。
リストが左に寄りすぎて記号が見えません
ul・olのpadding-leftがリセットでゼロになっているためです。記号は内側の余白領域に描かれるので、padding-leftに適切な値を戻してください。
2行目以降の頭が記号の下に来てしまいます
list-style-positionがinsideだと折り返し時にテキストが記号の下まで回り込みます。outsideにすると2行目以降がテキストの先頭で揃います。
番号リストの開始番号を変えられますか
ol要素のstart属性で開始番号を指定できます。番号が想定とずれるときは、start属性やリストのネスト構造も確認してください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。