CSSでulリストの箇条書き（・）を削除する方法をわかりやすく解説

Webページ上の順序なしリスト（<ul>）は、デフォルトで丸い黒点（ディスク）の箇条書きが表示されます。しかし、ナビゲーションメニューやタブなどのUIコンポーネントを作成する際には、この箇条書きを非表示にしたいケースがよくあります。

ナビゲーションメニューの典型的なHTML構造

以下は、Webサイトのナビゲーション／メニューコンポーネントとして一般的に使われるHTMLの構造です。

<nav>
  <ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

list-style-typeをnoneに変更して箇条書きを削除する

メニュー項目から箇条書きを削除するには、ブラウザがデフォルトで適用するCSSルール list-style-type: disc; を上書きし、値を none に置き換えます。

nav ul {
  list-style-type: none;
}

なお、ショートハンドプロパティの list-style: none; を使っても同じ結果が得られます。

セレクターの組み合わせによる影響範囲の制御

ここでのポイントは、タイプセレクターである ul と nav を組み合わせている点です。このように記述することで、「この特定のナビゲーションコンポーネント内のリスト」だけを対象に箇条書きを削除できます。

もし ul { list-style-type: none; } のように ul 単体で指定してしまうと、サイト全体のすべての順序なしリストから箇条書きが消えてしまいます。意図しない場所のデザインが崩れる原因になるため、影響範囲を限定したセレクター指定を心がけましょう。

補足：余白も一緒に調整するとより自然な見た目に

箇条書きを削除しただけでは、リストに残った左右のパディングにより、メニューが画面端に寄らない場合があります。ナビゲーションとして使う場合は、次のように padding や margin もあわせてリセットしておくと、よりきれいに仕上がります。

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}