list-style プロパティ
list-style プロパティを理解する
- list-style プロパティはリスト先頭に表示するマーカーを指定する
- list-style-type プロパティ
- list-style-type 使用例
- 途中の番号から開始する
- 任意の番号や重複番号を振る
- 逆順の番号を振る
- list-style-image プロパティ
- list-style-image プロパティの使用例
- list-style-position プロパティ
- list-style-position プロパティの使用例
- list-style プロパティ
list-style プロパティはリスト先頭に表示するマーカーを指定する
list-style プロパティは、リストの先頭に表示するマーカーに関する指定をまとめて行う際に使用します。
マーカー指定には list-style-image プロパティ、list-style-position プロパティ、list-style-type プロパティの３つの指定がありますが、list-style プロパティはこれらプロパティの値をまとめて指定する一括指定プロパティです。
まずこれら３つのプロパティ個々について説明し、そのあとこれらをまとめて一括指定する list-style プロパティについて紹介します。
list-style-type プロパティ
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 使用例
list-style-type の各種のスタイル記述とブラウザでの見え方を紹介します。
- XHTMLソース：
- <strong>マーカーなし</strong>
- <ul style="list-style-type: none;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ul>
- ブラウザ表示：
- マーカーなし
- 一番目
- 二番目
- 三番目
- マーカーなし
- XHTMLソース：
- <strong>黒丸</strong>
- <ul style="list-style-type: disc;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ul>
- ブラウザ表示：
- 黒丸
- 一番目
- 二番目
- 三番目
- 黒丸
- XHTMLソース：
- <strong>白丸</strong>
- <ul style="list-style-type: circle;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ul>
- ブラウザ表示：
- 白丸
- 一番目
- 二番目
- 三番目
- 白丸
- XHTMLソース：
- <strong>黒四角</strong>
- <ul style="list-style-type: square;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ul>
- ブラウザ表示：
- 黒四角
- 一番目
- 二番目
- 三番目
- 黒四角
- XHTMLソース：
- <strong>小文字のローマ数字</strong>
- <ol style="list-style-type: lower-roman;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 小文字のローマ数字
- 一番目
- 二番目
- 三番目
- 小文字のローマ数字
- XHTMLソース：
- <strong>大文字のローマ数字</strong>
- <ol style="list-style-type: upper-roman;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 大文字のローマ数字
- 一番目
- 二番目
- 三番目
- 大文字のローマ数字
- XHTMLソース：
- <strong>小文字のギリシャ数字</strong>
- <ol style="list-style-type: lower-greek;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 小文字のギリシャ数字
- 一番目
- 二番目
- 三番目
- 小文字のギリシャ数字
- XHTMLソース：
- <strong>算用数字</strong>
- <ol style="list-style-type: decimal;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 算用数字
- 一番目
- 二番目
- 三番目
- 算用数字
- XHTMLソース：
- <strong>先頭に０をつけた算用数字</strong>
- <ol style="list-style-type: decimal-leading-zero;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 先頭に０をつけた算用数字
- 一番目
- 二番目
- 三番目
- 先頭に０をつけた算用数字
- XHTMLソース：
- <strong>ラテン文字</strong>
- <ol style="list-style-type: lower-latin;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- ラテン文字
- 一番目
- 二番目
- 三番目
- ラテン文字
- XHTMLソース：
- <strong>大文字のラテン文字</strong>
- <ol style="list-style-type: upper-latin;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 大文字のラテン文字
- 一番目
- 二番目
- 三番目
- 大文字のラテン文字
- XHTMLソース：
- <strong>小文字のアルファベット</strong>
- <ol style="list-style-type: lower-alpha;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 小文字のアルファベット
- 一番目
- 二番目
- 三番目
- 小文字のアルファベット
- XHTMLソース：
- <strong>大文字のアルファベット</strong>
- <ol style="list-style-type: upper-alpha;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 大文字のアルファベット
- 一番目
- 二番目
- 三番目
- 大文字のアルファベット
- XHTMLソース：
- <strong>漢数字</strong>
- <ol style="list-style-type: cjk-ideographic;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 漢数字
- 一番目
- 二番目
- 三番目
- 漢数字
- XHTMLソース：
- <strong>ひらがなのあいうえお順</strong>
- <ol style="list-style-type: hiragana;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- ひらがなのあいうえお順
- 一番目
- 二番目
- 三番目
- ひらがなのあいうえお順
- XHTMLソース：
- <strong>カタカナのアイウエオ順</strong>
- <ol style="list-style-type: katakana;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- カタカナのアイウエオ順
- 一番目
- 二番目
- 三番目
- カタカナのアイウエオ順
- XHTMLソース：
- <strong>ひらがなのいろは順</strong>
- <ol style="list-style-type: hiragana-iroha;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- ひらがなのいろは順
- 一番目
- 二番目
- 三番目
- ひらがなのいろは順
- XHTMLソース：
- <strong>カタカナのイロハ順</strong>
- <ol style="list-style-type: katakana-iroha;">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- カタカナのイロハ順
- 一番目
- 二番目
- 三番目
- カタカナのイロハ順
途中の番号から開始する
開始番号を指定するには、ol 要素に対して start 属性を加えます。
※ start 属性は、HTML4 や XHTML1 で非推奨属性とされていましたが、HTML5 では使えます。
- XHTMLソース：
- <strong>算用数字</strong>
- <ol style="list-style-type: decimal;" start="4">
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- </ol>
- ブラウザ表示：
- 算用数字
- 一番目
- 二番目
- 三番目
- 算用数字
任意の番号や重複番号を振る
成績順位を表示する際などでは 「同点1位」 のように、同じ番号を複数個記述したい場合があります。 このような場合は、li 要素に対して value 属性を使って直接番号を指定することで対応できます。
- XHTMLソース：
- <strong>成績順位</strong>
- <ol style="list-style-type: decimal;">
- <li>鈴木</li>
- <li value="1">齋藤</li>
- <li value="3">佐藤</li>
- <li>熊谷</li>
- <li>安部</li>
- <li value="5">田中</li>
- </ol>
- ブラウザ表示：
- 成績順位
- 鈴木
- 齋藤
- 佐藤
- 熊谷
- 安部
- 田中
- 成績順位
value 属性を使って数値を指定すると、その項目（li 要素）は指定した数値で表示されます。 それ以降の項目は、指定した数値に 1 を加えた値からカウントが再開されます。 ですから上記のように、同点の項目とカウントを再開する項目にだけ value 属性を加えれば、あとは自動で番号が割り振られます。
なお、A・B・C…… や i・ii・iii…… のように、算用数字以外の文字を使って連番を表示している場合でも、value 属性の値には算用数字で番号を指定しなければなりません。
逆順の番号を振る
HTML5では、逆順で番号を振るための reversed 属性が新しく追加されました。
ol 要素に対して reversed 属性を加えるだけで、その連番リストは番号が逆順に割り振られるようになります。
reversed 属性は、指定できる属性値が属性名と同じ reversed 1種類しかない論理属性です。そのため、（HTML5では）以下の2通りの記述方法のうち、どちらを使っても構わないとなっています。
- XHTMLソース：
- <ol reversed="reversed">
- XHTML ソース：
- <ol reversed>
属性名 reversed は未定義
ホームページ・ビルダー１５では、reversed は未定義であるとして、HTML構文エラーになります。
例えば以下のような記述と表示になります。（注：ブラウザとページが HTML5 対応になっていないと表示されません。）
- XHTMLソース：
- <strong>逆順表示</strong>
- <ol reversed>
- <li>一番目</li>
- <li>二番目</li>
- <li>三番目</li>
- <li>四番目</li>
- <li>五番目</li>
- </ol>
- ブラウザ表示：
- 逆順表示
- 一番目
- 二番目
- 三番目
- 四番目
- 五番目
- 逆順表示
list-style-image プロパティ
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 プロパティで指定する値：
- リストマークとして画像ファイル （例：
）を使用できます。 url(../images/img_o145.gif) ;
また、inherit や none も指定することができます。none はリストマークの画像なしを、inherit は親要素の値を継承を意味します。
- CSSソース：
- ul {
- list-style-image : url(../images/img_o145.gif) ;
- list-style-type : circle ;
- }
- XHTMLソース：
- <ul>
- <li>ワイン</li>
- <li>ビール</li>
- <li>焼酎</li>
- </ul>
- ブラウザでの見え方 ⇒ css16_sample01.html
list-style-image でリストマークを画像とした場合、画像と文字列がずれることがあります
リストマークを画像にしたとき、どうしても文字列と画像との配置がずれることがあります。解決策としては、CSSで list-style-image プロパティを使わず、繰り返しなしの背景画像に設定するとよいでしょう。
list-style-position プロパティ
list-style-position プロパティはリスト項目マーカを表示する位置をコンテンツの内側か外側かを指定します。
内側 (inside) を指定した場合、折り返されたリストの文章はリストマークの下から表示されます。外側 (outside) を指定した場合、折り返されたリストの文章はリストマークの右に表示されます。
list-style-position プロパティの値は、省略した場合は、list-style-position: outside; が適用されます。
list-style-position プロパティの使用例
- CSSソース：
- ul.inside {
- list-style-position : inside ;
- }
- ul.ouside {
- list-style-position : outside ;
- }
- XHTMLソース：
- <p>list-style-position: inside; の例</p>
- <ul class="inside">
- <li>ワイン</li>
- <li>ビール</li>
- <li>焼酎</li>
- <li>長～い文</li>
- </ul>
- <p>list-style-position: outside; の例</p>
- <ul class="outside">
- <li>ワイン</li>
- <li>ビール</li>
- <li>焼酎</li>
- <li>長～い文</li>
- </ul>
- ブラウザでの見え方 ⇒ css16_sample02.html
list-style プロパティ
list-style プロパティは、リストの先頭に表示するマーカーに関する指定を一括で指定する際に使用します。
マーカー指定には上で説明した、 list-style-image プロパティ、list-style-position プロパティ、list-style-type プロパティの３つの指定がありますが、list-style プロパティはこれらプロパティの値を一括で指定するプロパティです。
値の指定方法は、各プロパティの値を半角スペースで区切って並べます。記述する際に各プロパティの値を並べる順序は特に決まっておらず、また必要のない指定は省略することができます。たとえば、マーカー（行頭記号）を表示しないようにするだけの場合は、"list-style : none ;" とだけ簡略記述することができます。ただし、値を省略すると、省略された部分の各プロパティの初期値が適用されることになります。
記述例です。左側の記述は、右側の個別指定を一括で指定しています。
- list-style 記述例：
- ul li {
- list-style : url(../images/img_o145.gif) disc inside ;
- }
- list-style 個別記述例：
- ul li {
- list-style-image : url(../images/img_o145.gif) ;
- list-style-type : disc ;
- list-style-position : inside ;
- }