<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>に属性を付けることができない場合、以下のように<ul>内の<li>の擬似要素としてゼロ幅スペース設定することで、CSSのみで解決することも可能です。（参考：list-style – CSS: カスケーディングスタイルシート | MDN）
ul li::before {
content: "\200B";
}ulの点をカスタマイズする方法
list-styleは、discやnone以外の値をとれるため、点を消すだけでなく別の形を使うことも可能です。
<ul>の中で使うものとして実用性がある値を抜粋すると、以下が挙げられます。
list-style: circle; //塗り無しの点
list-style: square; //四角
list-style: url('画像のURL'); //オリジナルの画像list-style: url('画像のURL');を使うとき、画像とリスト内の文言の距離を調整したい場合はpadding-leftで設定可能です。