リストのスタイル

list-style プロパティ

　list-style プロパティは、list-style-image、list-style-position、list-style-type を一括で指定できるプロパティです。

　上記の例では、マーカーをイメージで、リストを内側に表示しています。

　list-style-image でのイメージが読み込めないときは、list-style-type の指定で表示されます。

アイコンはICOOON MONOから利用させていただきました。

　詳しくは list-style プロパティを参照してください。

list-style-image プロパティ

　list-style-image プロパティは、リストのマーカーに画像が指定できるプロパティです。

　list-style-type プロパティを定義することで、画像が利用できない場合の代替ができます。

　詳しくは list-style-type プロパティを参照してください。

list-style-position プロパティ

　list-style-position プロパティは、リストのマーカーの位置がリストの外か中かを指定できるプロパティです。
　デフォルトでは outside 外側で、inside にするとリストともにマーカーが表示されます。

　詳しくは list-style-position プロパティを参照してください。

list-style-type プロパティ

　list-style-type プロパティは、リストマーカーの形状を設定します。

　サイトメニューに <ul> タグを使用する場合はlist-style-type: none;を使用してマーカーを非表示にします。

　詳しくは list-style-type プロパティを参照してください。

@counter-style ルール

　@counter-style ルールは、リストマーカーのカスタマイズすることができます。

　マーカーの定義は、@counter-style のディスクリプタの選択と値の指定によって行います。
　詳しくは @counter-style を参照してください。

counter() による番号付け

　以下の例では、 content プロパティに counter() ファンクションを使用することでリストごとに番号付けされた文字列が付加されています。

div.exmpl_ {
  counter-reset: example_counter;
}

ul#counter li::before {
  counter-increment: example_counter;
  content: "第" counter(example_counter) "項　";
}

　counter-reset はカウンターの値を初期化します。
　::before 疑似エレメントで counter-increment によってカウンターをリストごとに数値をインクリメントします。その値を content プロパティの中の counter() によって反映します。

　詳しくは counter() プロパティなどを参照してください。

@counter-style ルールによる番号付け

　以下は @counter-style ルールによる番号付けの例です

@counter-style example_style01{
	system: numeric;
	symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
	prefix: "第";
	suffix: "項 ";
}

ul#counter-style{
	list-style-type: example_style01;
}

　詳しくは @counter-style ルールを参照してください。

:first-child、:first-of-type

　:first-child、:first-of-type は最初のエレメントにスタイルを反映する疑似エレメントです。
　:first-child はエレメントが複数あることが条件で、:first-of-type はひとつの場合でも定義されたスタイルを反映します。

　詳しくは :first-child 擬似クラスを参照してください。

　詳しくは :first-of-type 擬似クラスを参照してください。

:last-child、:last-of-type

　:last-child、:last-of-type は最後のエレメントにスタイルを反映する疑似エレメントです。
　:last-child はエレメントが複数あることが条件で、:last-of-type はひとつの場合でも定義されたスタイルを反映します。

　詳しくは :last-child 擬似クラスを参照してください。

　詳しくは :last-of-type 擬似クラスを参照してください。

:nth-child()、:nth-of-type()

　:nth-child()、:nth-of-type() は引数に該当するエレメントにスタイルを反映する疑似エレメントです。
　:nth-child() はエレメントが複数あることが条件です。:nth-of-type() はひとつの場合でも定義されたスタイルを反映します。

　:nth-child()、:nth-of-type() は交互に背景色を指定する場合に便利な擬似クラスです。

　詳しくは :nth-child() 擬似クラスを参照してください。

　詳しくは :nth-of-type() 擬似クラスを参照してください。