★このページでは、CSSの基本的な仕様について解説しています。

リストマークに関する設定は、IE6.0以前、Netscape6.2以前など主要なブラウザで対応が異なる場合があります。

各プロパティの対応状況については、それぞれの項目を参照して下さい。

 

初級篇★ページ作りの基礎知識2. スタイルシートを使ってみよう

VOL11. リストマークに関する設定 その1 既成のリストマークを指定する

 

list-style-type: <値>;

(IE6.0は一部に対応しているのみで、その他のブラウザやバージョンでも未対応のものがあります。)

このプロパティで呼び出せる既成のリストマークは20種類あり、従って<値>として指定できるのは、非表示指定も含めて以下の21のキーワードです。

none ... マークなし

disc ... 黒丸(デフォルト)

decimal ... 1から始まる整数連番

circle ... 白丸

lower-roman ... 小文字ローマ字

lower-alpha ... 小文字アルファベット

square ... 四角

upper-roman ... 大文字ローマ字

upper-alpha ... 大文字アルファベット

 

↓↓※IE6.0は、以下のキーワードに対応していません。↓↓

decimal-leading-zero ... 整数連番を指定する時、1〜9までの1桁の数字について頭に0を付ける(01、02、03...)

lower-greek ... 小文字ギリシア文字

lower-latin ... 小文字アルファベット

upper-latin ... 大文字アルファベット

hebrew ... ヘブライ数字

armenian ... アルメニア数字

georgian ... グルジア数字

cjk-ideographic ... 漢数字(一、二、三...)

hiragana ... あいうえお順

katakana ... アイウエオ順

hiragana-iroha ... いろは順

katakana-iroha ... イロハ順

 

※「list-style-type:」は、以下のように<ol><ul>に設定します。

(リストに関するHTMLについては、VOL1.HTMLを見てみよう ★ 基本のタグ3 を参照して下さい。)

ul { list-style-type: upper-alpha; }

ol { list-style-type: lower-alpha; }

サンプル部分のHTML記述

<ul>
<li>イチゴのショートケーキ</li>
<li>イチゴのタルト</li>
<li>イチゴのヴァシュラン</li>
</ul>

<ol>
<li>イチゴのショートケーキ</li>
<li>イチゴのタルト</li>
<li>イチゴのヴァシュラン</li>
</ol>

 

 

初級篇2.VOL10. テーブルに関する設定・その2 <<

>> 初級篇2.VOL11. リストマークに関する設定・その2

 

 

2007.2.15.+2.23.-2.24.