list-style プロパティは、リストの先頭に表示するマーカーに関する指定をまとめて行う際に使用します。
マーカー指定には list-style-image プロパティ、list-style-position プロパティ、list-style-type プロパティの3つの指定がありますが、list-style プロパティはこれらプロパティの値をまとめて指定する一括指定プロパティです。
まずこれら3つのプロパティ個々について説明し、そのあとこれらをまとめて一括指定する list-style プロパティについて紹介します。
list-style-type プロパティは、リストの先頭に表示するマーカー文字の種類を指定する際に使用します。 ブラウザによっては表示できない種類もあります。(その際は、算用数字が表示に使われます。)
尚、list-style-type と、list-style-image の値を同時に指定した場合には、 list-style-image の値が優先されます。何らかの理由で画像が表示できない場合に備えて list-style-type も指定しておくとよいでしょう。
list-style-type の値の、省略した場合は"黒丸" ( list-style-type: disc; ) が適用されます。
list-style-type の各種のスタイル記述とブラウザでの見え方を紹介します。
開始番号を指定するには、ol 要素に対して start 属性を加えます。
※ start 属性は、HTML4 や XHTML1 で非推奨属性とされていましたが、HTML5 では使えます。
成績順位を表示する際などでは 「同点1位」 のように、同じ番号を複数個記述したい場合があります。 このような場合は、li 要素に対して value 属性を使って直接番号を指定することで対応できます。
value 属性を使って数値を指定すると、その項目(li 要素)は指定した数値で表示されます。 それ以降の項目は、指定した数値に 1 を加えた値からカウントが再開されます。 ですから上記のように、同点の項目とカウントを再開する項目にだけ value 属性を加えれば、あとは自動で番号が割り振られます。
なお、A・B・C…… や i・ii・iii…… のように、算用数字以外の文字を使って連番を表示している場合でも、value 属性の値には算用数字で番号を指定しなければなりません。
HTML5では、逆順で番号を振るための reversed 属性が新しく追加されました。
ol 要素に対して reversed 属性を加えるだけで、その連番リストは番号が逆順に割り振られるようになります。
reversed 属性は、指定できる属性値が属性名と同じ reversed 1種類しかない論理属性です。そのため、(HTML5では)以下の2通りの記述方法のうち、どちらを使っても構わないとなっています。
属性名 reversed は未定義
ホームページ・ビルダー15では、reversed は未定義であるとして、HTML構文エラーになります。
例えば以下のような記述と表示になります。(注:ブラウザとページが HTML5 対応になっていないと表示されません。)
list-style-image プロパティはリスト項目先頭のマーカーを画像で表示するものです。
list-style-type プロパティを追加で指定するようにしましょう。画像が何らかの事情で表示できない場合に、list-style-type プロパティで指定したもので置き換えられます。
list-style-image の値は、省略している場合は、list-style-image: none; が適用されます。
list-style-image は継承されます。子要素に継承しない場合は、、list-style-image: none; を明示する必要があります。
list-style-image プロパティで指定する値:
list-style-image でリストマークを画像とした場合、画像と文字列がずれることがあります
リストマークを画像にしたとき、どうしても文字列と画像との配置がずれることがあります。解決策としては、CSSで list-style-image プロパティを使わず、繰り返しなしの背景画像に設定するとよいでしょう。
list-style-position プロパティはリスト項目マーカを表示する位置をコンテンツの内側か外側かを指定します。
内側 (inside) を指定した場合、折り返されたリストの文章はリストマークの下から表示されます。外側 (outside) を指定した場合、折り返されたリストの文章はリストマークの右に表示されます。
list-style-position プロパティの値は、省略した場合は、list-style-position: outside; が適用されます。
list-style プロパティは、リストの先頭に表示するマーカーに関する指定を一括で指定する際に使用します。
マーカー指定には上で説明した、 list-style-image プロパティ、list-style-position プロパティ、list-style-type プロパティの3つの指定がありますが、list-style プロパティはこれらプロパティの値を一括で指定するプロパティです。
値の指定方法は、各プロパティの値を半角スペースで区切って並べます。記述する際に各プロパティの値を並べる順序は特に決まっておらず、また必要のない指定は省略することができます。たとえば、マーカー(行頭記号)を表示しないようにするだけの場合は、"list-style : none ;" とだけ簡略記述することができます。ただし、値を省略すると、省略された部分の各プロパティの初期値が適用されることになります。
記述例です。左側の記述は、右側の個別指定を一括で指定しています。