CSSについて(リストの装飾)
CSSのリストの装飾について。
リストの概要については、以前の記事を参照願いたい。
リストは、よく箇条書きで用いられるけど、さまざまな形で装飾できる。
1 リストマーカの種類の変更
リスト項目の先頭に表示されるマークをリストマーカと呼ぶ。
・リスト1
・リスト2
上記で言うと、「・(黒丸)」の部分。これを変更するにはlist-styleプロパティを使用する。
list-style:circle; /*セレクタは省略*/
⚪︎リスト1
⚪︎リスト2
このほかにも、主に以下の種類がある。
・ none ⇨ 表示なし
・ disc(初期値) ⇨ 黒丸「・」
・ square ⇨ 黒四角「◾️」
2 リストマーカを画像に変更
リストマーカに画像を指定するには、ist-style-imageプロパティを使用する。
list-style-image:url(・・・・);
/*セレクタは省略。()内に画像のパスを入力する。*/
こうすることで、画像がリストマーカに設定される。
この記事が気に入ったらサポートをしてみませんか?