<>

番号なしリスト – ul 要素 -の CSSカスタマイズ注意点

投稿記事で使用するリストや 目次やグローバルナビなどのリストのカスタマイズにはul という要素を使用します。

Webサイト内では リストを使用するコンテンツが多く
それぞれにCSSカスタマイズを指定した時に 同じコードを使用してしまっていると
画像が崩れてしまったり カスタマイズがうまくいかないケースがあります。

カスタマイズコードの “セレクター"(場所を指定する)コードをうまく使い分けてCSSを指定していきます。

リスト表示の要素

投稿ページでは番号ありのリストと 番号なしのリストがあります。

番号あり リストの要素は " ol "  " ul " の部分と置き換えてカスタマイズに使用できます。

番号なしリスト – ul –

サイト全体で表示されるリストのほとんどが ul を使用していて
リストのカスタマイズを " ul " だけで指定したコードでは他のコンテンツにまで影響が出てしまいます。


リストに背景を付けただけのイメージですが、
他のリストとは 別の色で表示させるなど追加でCSSを指定します。

今回は背景色だけのカスタマイズコードですが参考にしてみてください。

番号なしのリストでは ほかに文字に関する指定はできますが
inline-block の指定をするとまた 目次の画面が崩れてしまいますのでご注意ください。

リストマークのカスタマイズ

番号なしのリストでは リストマークをカスタマイズすることもできます。

カスタマイズに関してはこちらの記事が参考になります。
箇条書きリストの使い分けと 番号なしのリストマークをカスタマイズ|ルクセリタス