listの表示をスタイルシートで設定する
HTMLでlistについて紹介していますが、このlistについてもスタイルシート(CSS)で表示方法を変更させることが出来ます。
- リストのマークや番号の表示形式を変更する
list-style-type:種類指定 - リストマークを画像で表示する① list-style-image:（画像URL)
- リストマークを画像で表示する② （画像の位置を微調整する）
リストのマークや番号の表示形式を変更する
「ul li」タグを使用してリストを作ると、先頭に●マークが、「ol li」タグを使用すると先頭に「1. 2. 3.・・・」といったリストマークがつくと思います。
この表示形式をCSSで設定してみましょう。
<リストマークの設定>
list-style-type:種類指定
リストマークの種類指定については、下の表にまとめたので参考にしてみてくださいね。
～リストマーク種類一覧～
| 記述例 | 説 明 |
|---|---|
| none | 表示無し |
| disc | 黒丸で表示(ul初期設定) |
| circle | 白丸で表示 |
| square | ■マークで表示 |
| lower-roman | ローマ数字(小文字) |
| upper-roman | ローマ数字(大文字) |
| lower-greek | ギリシャ文字(小文字) |
| decimal | 算用数字で表示(ol初期設定) |
| decimal-leeding-zero | 算用数字の頭に"0"を付けて表示 |
| lower-alpha | アルファベット(小文字) |
| upper-alpha | アルファベット(大文字) |
| cjk-ideographic | 漢数字で表示 |
| hiragana | ひらがなで表示(あいうえお順) |
| hiragana-iroha | ひらがなで表示(いろは順) |
| katakana | カタカナで表示(あいうえお順) |
| katakana-iroha | カタカナで表示(イロハ順) |
実際に表示してみましょう。（サンプル一覧）
これを「種類指定」と書いてある部分に記述すればOKです。下のような感じですね。
＜記述例①＞
【CSS記述】
.sample1{
list-style-type:lower-roman
}
【HTML記述】
<ul class="sample1">
<li>サンプル1-1</li>
<li>サンプル1-2</li>
<li>サンプル1-3</li>
</ul>
表示サンプルはこちら
＜記述例②＞
【CSS記述】
.sample2{
list-style-type:circle
}
【HTML記述】
<ul class="sample2">
<li>サンプル2-1</li>
<li>サンプル2-2</li>
<li>サンプル2-3</li>
</ul>
表示サンプルはこちら
 |
 |
 |
|---|
