CSS: <li> リスト関連のスタイルシート適用例
<li> タグには、以下の専用スタイルシートがある。ここでは、これらの適用例をメモっておく。
list-style
書式
list-style: リストタイプ 位置 イメージ;
後述する list-style-type、list-style-position、list-style-image を一度に指定する。
使用例
後述の list-style-type、list-style-position、list-style-image の使用例で示す。
list-style-type
書式
list-style-type: リストタイプ;
「リストタイプ」には、以下のいずれかを指定する。
| disc | 規定値：黒丸 | circle | 白丸 |
|---|---|---|---|
| square | 四角 | decimal | 1, 2, 3... |
| lower-roman | i, ii, iii... | upper-roman | I, II, III... |
| lower-alpha | a, b, c... | upper-alpha | A, B, C... |
| decimal-leading-zero | 01, 02, 03... | lower-greek | α、β、γ... |
| upper-greek | Α、Β、Γ... | lower-latin | 小文字ラテン文字 |
| upper-latin | 大文字ラテン文字 | hebrew | ヘブライ数字 |
| armenian | アルメニア数字 | georgian | グルジア数字 |
| cjk-ideographic | 一、二、三... | hiragana | あ、い、う... |
| katakana | ア、イ、ウ... | hiragana-iroha | い、ろ、は... |
| katakana-iroha | イ、ロ、ハ... | none | なし |
| inherit | 継承 | ||
使用例
コードは以下の通り。
<ul> <li style="list-style-type:disc;">disc</li> <li style="list-style-type:circle;">circle</li> <li style="list-style-type:square;">square</li> </ul>
使用例は以下の通り。
- disc
- circle
- square
list-style-position
書式
list-style-position: 位置;
「位置」には、outside（規定値：外側）、inside（内側）、inherit（継承）のいずれかを指定する。
使用例
コードは以下の通り。
<ul> <li style="list-style-position:位置;"> outside(or inside)を指定すると改行した文字は<br /> ここに表示される。 </li> </ul>
使用例は以下の通り。
list-style-position:outside;
|
list-style-position:inside;
|
list-style-image
書式
list-style-image: イメージ;
「イメージ」には、マーカに使用するイメージデータ(URL)を指定する。
使用例
コードは以下の通り。
<ul> <li style="list-style-image:url(img/liststyleimg.gif);"> 指定したイメージがマーカとして表示される。 </li> </ul>
トラックバック(0)
このブログ記事に対するトラックバックURL: http://itsmemo.com/mt/mt-tb.cgi/32
※スパム防止のため、管理人がトラックバック内容確認後、公開されます。
コメントする