【CSS】リストタグ（ul）の点を消す方法

ウェブサイトやブログでリストを使用する際、時々リストアイテムのマーカー（つまり点や番号）を非表示にしたい場合があります。この記事では、CSSを使ってリストタグのマーカーを消す方法について詳しく解説します。

list-style-typeプロパティを設定する

リストのマーカーを非表示にするために、次のようにCSSを書きます。

ul, ol {
    list-style-type: none;
    padding-left: 0;
}

このCSSは、すべての ul（unordered list）と ol（ordered list）要素のマーカーを完全に消去し、さらにデフォルトのインデントも削除します。

もし特定のリストだけにマーカーを消したい場合は、そのリストの style 属性を使用して直接スタイルを適用します。

<ul style="list-style-type: none; padding-left: 0;">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

この方法は、インラインスタイルを使用して特定のリストのマーカーを非表示にし、またデフォルトのインデントを調整します。

リストタグの点を消すだけでなく、四角にしたり、画像に変更することもできます。
詳しい方法については、以下の記事で紹介しています。

Q. CSSでulタグの黒点を非表示にするには？

A. ul { list-style: none; }を設定します。これで全てのリスト記号が非表示になります。paddingとmarginもリセットする場合はpadding: 0; margin: 0;も追加してください。

Q. 特定のliだけリスト記号を非表示にするには？

A. 対象のliにlist-style: noneを個別に設定します。または:first-child・:nth-child()などの擬似クラスで特定のアイテムのみを対象にします。

Q. ulのリストをフレックスボックスで横並びに変えるには？

A. ulにdisplay: flex; list-style: none; padding: 0; gap: 16px;を設定します。ナビゲーションメニューやタグリストによく使われるパターンです。

リストタグのマーカーを消す方法について、いくつかのシンプルなCSSの使い方を紹介しました。ウェブページやブログでデザインやスタイルをカスタマイズする際には、このテクニックを活用して、見た目をさらに魅力的にしましょう。