webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

      2021/03/04

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。よくある『・』『■』『算用数字』といったリストマーカーだけじゃないものを実装してみます(色つき・★マークなど)。使うのは、CSSの『擬似要素』。さっそくコードなどをみていきましょう。

cssの擬似要素(Pseudo-elements)とは?

CSSセレクターに付加するキーワードで、特定の部分にスタイル適応させたりすることができます。例えば、今回やってみる『::before』という擬似要素だと、選択した要素の前に、最初の子要素を作ってスタイル適応させます。『content: "アイコン〇〇";』というプロパティも良く使われます。

『::before』のほかにも『::after(選択した要素の後)』『::first-letter(最初の文字)』『::first-line(ブロック要素の最初の行)』などがあります。

普通に色を指定しただけだと、全体に色がついてしまう

たとえば、サイト全体のフォント色に黒が指定されていて、リストタグの『ul』に色を指定した場合はこうなります。 マーカーだけでなく、全体が赤くなってしまいました。

そのほか、『li』だけに色を指定しても、その項目だけ色がかわるので、リストマーカーだけ色付けというわけにはいきません。その場合は、ちょっと特殊なCSS要素を使うことになります。

cssのbefore擬似要素を使ってみる

before擬似要素で、リストタグマーカー色を変えてみた例

リストタグの頭のマーカー部分が星マークで、オレンジ色になりました。真っ黒の点だけのリストより華やか&場合によっては見やすくなります。なお、コードはこちらのサイトを参考にしてみました。海外のサイトにつき英語標記です。最近では、日本のサイトでも擬似要素を使ったデザインは増えています。

HTML&CSSのコードとワンポイント解説

.ul-colored1 {list-style:none;padding:0;margin:0;}
.li-colored1 { text-indent: -.7em;}
.li-colored1:before {content: "★";color: orange;}

<ul class="ul-colored1">
<li class="li-colored1">項目1</li>
<li class="li-colored1">項目2</li>
<li class="li-colored1">項目3</li>
</ul>

ポイントは、『擬似要素beforeを使って、内容(content)で★や色を指定』『list-style:none;で、マーカーをなくしておく』というところでした。また、上記の海外サイトの紹介ではul/liに対してクラスをつけてなかったんですけど、ここだけでなく他の部分のul/liに干渉しないよう、クラス指定(クラス名は適当です)を入れました。

失敗例→list-style:none;後に、別のlist-styleが適応

ちなみに、list-style:none;が効いていないと、このように通常のマーカーと擬似要素マーカーが2重に表示されて失敗します。 原因は、CSSでlist-style:none;を書いたあとに、CSSの下のほうで、 ulにlist-style:disc;(マーカーに丸)が書いてあったからです。下に書いてあるものがあとから読み込むから優先で表示されて、擬似要素は指定してないから残った、みたいな感じでしょうか。

この場合は、該当部分のlist-styleをnoneにすることで、狙った表示ができました。他の部分とかぶっていてうまく表示しないみたいな事例もあるので、押さえておくと対処しやすくなります。

あとがき・まとめ

  • cssの擬似要素は、セレクターに付加するキーワードで、特定の部分にスタイル適応(例:beforeは要素の前に)
  • 擬似要素beforeを使うと、リストのマーカーだけ色付きにしたり、アイコンや模様にできる
  • list-style:none;のあとに、親や元要素のlist-styleが適応されると、通常のマーカーと擬似要素マーカーが2重表示されて失敗

まとめるとこのような形でしょうか。特に『親・元要素のスタイルと2重適応』は、ありがちな失敗例かなと思います(管理人もやってたし)。こういう意図しない表示に気をつけて、ぜひ皆さんも、このCSSテクを使って、見やすい・おしゃれ・個性的なリストをサイトに入れてみてください。


【カテゴリ】 - CSS
【タグ】 - ,

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...