【CSS1行だけ】ulのliの点を消す方法【HTML】

<ul>の中で使う<li>の点を消すには、下記のCSSを書きます。

ul {
  list-style: none;
}

本記事ではこの点を詳しく解説します。

liの点を消すにはlist-style: none;を使う

<li>のマーカー部分のスタイルはCSSのlist-styleプロパティで設定します。

<ul>の中の<li>のマーカーとしてはブラウザのデフォルトのスタイルだと点(・)が表示されますが、これは、点を表示するlist-style: disc;が標準的に指定されているからです。

そのため、disc(点)をnone(無し)に変更すれば点を消せるということです。

ul {
  list-style: none;
}
  • 点を消したリストです
  • list-style: none;を使っています。

list-style<li>にかかるプロパティなので、CSSのセレクタを<li>要素にすることでも点を消すことができますが、その場合は<ol>の中の<li>のマーカー(デフォルトでは数字)も消えてしまいます。

それを防ぐために、<ul>要素をセレクタにしてその中の<li>にのみスタイルを継承させる方が望ましいです。

なお、点を消すことで<ul>の左側に余分な余白が空いてしまう場合は、以下のようにpadding-leftで調整することができます。

ul {
  list-style: none;
  padding-left: 1em; //1文字文の余白を設定する場合。完全に無くしたい場合は0を入れる。
}
  • 点を消した上で、左の余白サイズを調整しているリストです
  • padding-leftを使っています。

アクセシビリティ上の注意点

<ul>list-style: none;がかかった要素を含むWebページをSafariで開くと、スクリーンリーダーが<ul>をリストだと認識しなくなります。

その問題を解決するには、以下のように該当する<ul>role="list"の属性を付けます。

<ul role="list"> <!-- list-style: none;がかかったul -->
...
</ul>
ul li::before {
  content: "\200B";
}

ulの点をカスタマイズする方法

list-styleは、discnone以外の値をとれるため、点を消すだけでなく別の形を使うことも可能です。

<ul>の中で使うものとして実用性がある値を抜粋すると、以下が挙げられます。

list-style: circle; //塗り無しの点
list-style: square; //四角
list-style: url('画像のURL'); //オリジナルの画像

list-style: url('画像のURL');を使うとき、画像とリスト内の文言の距離を調整したい場合はpadding-leftで設定可能です。