ここでは、ホームページ上のリストを装飾する方法を紹介していきます。
list-style-type[リスト左の数字・マークを変える]
リスト左の数字・マークは何も指定しないとulの場合は黒丸●、olの場合は数字が表示されるのですが、そのマーク・数字を別のマークや順序のある文字・数字に変えることが出来ます。
CSSでリスト左の数字・マークを変えるにはlist-style-typeを指定します。
指定可能値[マーク]
| CSS記述 | 表示内容 | 表示例 | 補足 |
|---|---|---|---|
| disc | 黒丸 | ● | ul標準 |
| circle | 白丸 | ○ | |
| square | 四角 | ■ |
指定可能値[順序あり]
| CSS記述 | 表示内容 | 表示例 | 補足 |
|---|---|---|---|
| decimal | 数字 | 1, 2, 3, … | ol標準 |
| decimal-leading-zero | ゼロ付数字 | 01, 02, 03, … | |
| lower-roman | 小文字ローマ数字 | i, ii, iii, … | |
| upper-roman | 大文字ローマ数字 | I, II, III, … | |
| lower-alpha | 小文字アルファベット | a, b, c, … | |
| upper-alpha | 大文字アルファベット | A, B, C, … | |
| lower-greek | 小文字ギリシャ文字 | α, β, γ, … | |
| upper-greek | 大文字ギリシャ文字 | Α, Β, Γ, … | |
| cjk-ideographic | 漢数字 | 一, 二, 三, … | |
| hiragana | ひらがな | あ, い, う, … | |
| katakana | カタカナ | ア, イ, ウ, … | |
| hiragana-iroh | ひらがないろは順 | い, ろ, は, … | |
| katakana-iroha | カタカナイロハ順 | イ, ロ, ハ, … | |
| lower-latin | 小文字ラテン文字 | ||
| upper-latin | 大文字ラテン文字 | ||
| hebrew | ヘブライ数字 | ||
| armenian | アルメニア数字 | ||
| georgian | グルジア数字 |
指定可能値[その他]
| CSS記述 | 表示内容 | 表示例 | 補足 |
|---|---|---|---|
| none | マーク・数字なし | ||
| inherit | 親要素指定を継承 |
[例1]ulタグ内の各リスト要素の左に白丸マークを表示する
ul li {list-style-type:circle;}
[例2]olタグ内の各リスト要素の左に大文字ローマ数字を表示する
ol li {list-style-type:upper-roman;}
ol li {list-style-type:upper-roman;}
[例3]ulタグ内の各リスト要素の左に何も表示しない
ul li {list-style-type:none;}
ul li {list-style-type:none;}
list-style-position[リストマーク分字下げをする/しない]
通常はリスト要素が2行以上ある時、リスト左の数字・マーク分文章が字下げされます。
ですが、リストマーク分字下げする/しないは選択することが出来ます。
CSSでリスト左の数字・マークを変えるにはlist-style-positionを指定します。
| 指定可能値 | outside(標準, 字下げをする), inside(字下げしない), inherit(親要素指定を継承) |
|---|
[例1]2行以上になった際、ulタグ内の各リストマーク分字下げしない
ul {list-style-position:inside;}
[参考]outsideとinsideの見た目の違い具体例
*** outside ***
*** inside ***
list-style-image[リストマークを画像にする]
リストの左側にあるマーク部分に自分が用意した画像を表示することが出来ます。
CSSでリストマークを画像にするにはlist-style-imageを指定します。
| 指定可能値 | 画像へのパス(URL) |
|---|
[例1]今書いているHTMLと同じフォルダ内にある「tri.gif」という画像をリスト左にマークとして表示
ul {list-style-image:url(tri.gif);}