---
title: "箇条書きの行頭記号や番号がずれる・消えるときの対処"
description: "箇条書きの中黒や番号が消えたりテキストとずれたりしてドキュメントが読みにくくなっていると困っている方向け。CSSリセットやlist-styleの設定が原因の典型パターンを整理して解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/list-bullet-number-misaligned"
markdown: "https://giga-site.com/articles/list-bullet-number-misaligned/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 箇条書きの行頭記号や番号がずれる・消えるときの対処

箇条書きの中黒や番号が消えたり、テキストとずれて見えたりするのは、CSSリセットやlist-style関連の設定が原因です。リストの見た目は記事やドキュメントの読みやすさに直結します。本記事では記号が消える・位置がずれる・折り返しが乱れるといったパターン別に、原因と対処をまとめます。

> Source HTML: https://giga-site.com/articles/list-bullet-number-misaligned
> Article index: https://giga-site.com/articles/index.md

## 記号が消えるのはリセット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を指定すると体裁が整います。意図しない揃い方になっているときはこの値を見直してください。

## ずれ・消えを直す手順

リセットの影響から順に確認していくと原因をつかみやすいです。

1. リセットCSSでlist-styleが消されていないか確認する
2. 本文リストにlist-style-typeを指定し直す
3. ul・olのpadding-leftを適切な値に戻す
4. 折り返しの揃え方をlist-style-positionで調整する
5. 番号リストは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属性やリストのネスト構造も確認してください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "箇条書きの行頭記号や番号がずれる・消えるときの対処",
  "description": "箇条書きの中黒や番号が消えたりテキストとずれたりしてドキュメントが読みにくくなっていると困っている方向け。CSSリセットやlist-styleの設定が原因の典型パターンを整理して解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/list-bullet-number-misaligned",
  "url": "https://giga-site.com/articles/list-bullet-number-misaligned",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "中黒や番号が表示されません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "リセットCSSがlist-style:none;を当てていることが多いです。本文のリストにlist-style-type:disc;やdecimal;を指定し直すと記号が戻ります。"
      }
    },
    {
      "@type": "Question",
      "name": "リストが左に寄りすぎて記号が見えません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ul・olのpadding-leftがリセットでゼロになっているためです。記号は内側の余白領域に描かれるので、padding-leftに適切な値を戻してください。"
      }
    },
    {
      "@type": "Question",
      "name": "2行目以降の頭が記号の下に来てしまいます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "list-style-positionがinsideだと折り返し時にテキストが記号の下まで回り込みます。outsideにすると2行目以降がテキストの先頭で揃います。"
      }
    },
    {
      "@type": "Question",
      "name": "番号リストの開始番号を変えられますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ol要素のstart属性で開始番号を指定できます。番号が想定とずれるときは、start属性やリストのネスト構造も確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```