リスト項目の行頭を変更する．
リスト項目の行頭記号を変更する．
| 適用できる要素 | リスト項目の要素 dlは不可能 |
|---|---|
| 継承 | する |
| テンプレート |
list-style-type: 値; |
|---|
| 指定できる値 | 値の効果 |
|---|---|
| none | 印を表示しない．blogのサイドバーのリンクリストなどに使用される． |
| disc | 黒い丸 |
| circle | 白い丸 |
| square | 黒い四角 |
| decimal | 数字 |
| decimal-leading-zero | 頭に0を付けた数字 |
| lower-roman | 小文字のローマ数字 |
| upper-roman | 大文字のローマ数字 |
| lower-alpha | 小文字のアルファベット |
| upper-alpha | 大文字のアルファベット |
| lower-latin | 小文字のアルファベット |
| upper-latin | 大文字のアルファベット |
| lower-greek | 小文字のギリシャ文字 |
| hebrew | ヘブライ文字の数字削除予定文字 |
| georgian | グルジア文字の数字 |
| armenian | アルメニア文字の数字 |
| cjk-ideographic | 漢数字削除予定文字 |
| hiragana | ひらがな削除予定文字 |
| katakana | カタカナ削除予定文字 |
| hiragana-iroha | ひらがなのいろは削除予定文字 |
| katakana-iroha | カタカナのいろは削除予定文字 |
| CSSの例文 |
ul.list-style-type{
list-style-type: upper-roman;
}
|
|---|---|
| XHTMLの例文 |
<ul class="list-style-type"> <li>タイトル1</li> <li>タイトル2</li> </ul> |
| 出力結果 |
|
リストの行頭記号を好きな画像に変更できる．
| 適用できる要素 | リスト項目 |
|---|---|
| 継承 | する |
| テンプレート |
list-style-image: 値; |
|---|
| 指定できる値 | 値の効果 |
|---|---|
| none | 画像の表示をしない． |
| url(URL) | 画像ファイルのurlをいれたものを指定する． |
| CSSの例文 |
ol.list-style-image{
list-style-image: url(../../gif/bluestar.gif);
}
|
|---|---|
| XHTMLの例文 |
<ol class="list-style-image"> <li>タイトル1</li> <li>タイトル2</li> </ol> |
| 出力結果 |
|
リストの行頭記号や行頭画像の位置を変更できる．
| 適用できる要素 | リスト項目 |
|---|---|
| 継承 | する |
| テンプレート |
list-style-position: 値; |
|---|
| 指定できる値 | 値の効果 |
|---|---|
| inside | 行頭記号はリスト項目の文章の先頭に埋め込まれるように表示される． |
| outside | 通常どおり行頭がリスト項目の外側に表示される． |
| CSSの例文 |
ul.list-style-position{
list-style-position: inside;
}
|
|---|---|
| XHTMLの例文 |
<ul class="list-style-type"> <li>タイトル1</li> <li>タイトル2</li> </ul> |
| 出力結果 |
|
リストのプロパティをまとめて指定できる．
| 適用できる要素 | リスト項目 |
|---|---|
| 継承 | する |
| テンプレート |
list-style: 値; |
|---|
| 指定できる値 | 値の効果 |
|---|---|
| list-style-typeの値 list-style-imageの値 list-style-positionの値 | 3つの値をそれぞれ指定することで，上で記述したそれぞれの効果が表れる．並べる順番に決まりはなく，必要のないプロパティの値は省略してもよい． |
| CSSの例文 |
ul.list-style{
list-style: georgian inside;
}
|
|---|---|
| XHTMLの例文 |
<ul class="list-style"> <li>タイトル1</li> <li>タイトル2</li> </ul> |
| 出力結果 |
|