CSS『list-style: none;』を使ってHTMLで作成したリストの点を消す方法

HTMLでリストを作成したときにデフォルトで振られているリストの左の点(・)がデザインの妨げになってしまうことはありませんか。今回はそれを消して、更なるデザインの向上に繋げる方法を解説していきます。

結論：リストの数字、点を消すときはCSSで『list-style: none;』を使う

リストの点は CSSで『list-style: none;』を指定することで、消すことができます。これだけであなたの思い通りのデザインへとカスタマイズできるのでその方法を詳しく解説していきます。

準備：元となるリストを作る

まずはリストを作らなければ始まりません。今回は『ulタグ』、『liタグ』を使用してリストを作っていきます。

<ul>
    <li>list-item1</li>
    <li>list-item2</li>
    <li>list-item3</li>
</ul>

『ulタグ』、『liタグ』で作ったリストにはまだ点があることが分かります。このままのデザインを使用してサイトなどを作成していくことも可能ですが、デザインによってはこの点を消さなくてはいけない時があります。この後から、この点を消す方法を解説していきます。

1：『ulタグ』、もしくは『liタグ』に 『list-style: none;』 を指定する

『ulタグ』、もしくは『liタグ』のどちらかに『list-style: none;』を指定することにより、リストから点を消すことができます。

ul {
    list-style: none;
}

HTMLに新しい記述をする必要はありません。CSSに『list-style: none;』を追記することにより、リストから点が消えていることが確認できると思います。今回は『ulタグ』に『list-style: none;』を指定しましたが、前述したように 『liタグ』に『list-style: none;』を追記したとしても同じ結果を得られます。

今回はリストから点を消しただけですが、これをした後に横並びなどをすることによってメニューバーを作ることも可能となります。それについては

こちらの記事を参考にしてみてください。

今回、解説させていただいたリストから点を消す方法は特別難しいことではありませんが、身につけておきたい知識の一つです。これをマスターして次のステップへと進んでみてください。