【HTML&CSS】リストの点を消す方法をご紹介！

どうも皆さんこんにちは！kwです！

今回は、リスト（<li>タグ）の点を消す方法をご紹介します。

「リストとして文字列を並べたいのに点が邪魔」な場合よくありますよね。

そういった問題を解決するには、とある一行をCSSに書き足すだけで点を削除することができます。

ということで、早速やっていきましょう！

リストの点を消すには、CSSのlist-styleというプロパティを使います。

今回は、リストの点を消したいので、list-styleにnoneと指定してあげます。

このように記述します↓

list-style:none;

簡単ですね。

では実際に使ってみましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

はい。うまくいってますね。

このように、list-styleプロパティを使うことでリストの点を消すことができます。

では、 list-styleプロパティを覚えたところで、他の使い方も紹介しておこうと思います。

list-styleプロパティは、リストの点を消す以外にも使えます。

今回は二つほど他の使い方も紹介していきます。

See the Pen Untitled by kw (@kw-webd) on CodePen.

See the Pen Untitled by kw (@kw-webd) on CodePen.

このように、list-styleプロパティを使うことで点を消すだけでなく、点をさまざまな形に指定することができます。

いかがでしたでしょうか？

今回は、リストの点を消す方法をご紹介しました。

list-styleはさまざまな使い方があって少々難しいかもしれませんが、覚えればデザインの幅が大きく広がるため、ぜひこの機会にさまざまな使い方を覚えちゃってください！

ということで今回も、最後まで見てくれた方、ありがとうございました。

ぜひ、お手隙の際に他の記事もご覧ください！

また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。