ページ内でリストごと異なるマークを表示する |
Internet Explorer | Netscape Navigator | iCab | Safari | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
3.0x | 4.0x | 4.5 | 5.0x | 5.5 | 6.0 | 2.0x | 3.0x | 4.0x | 4.x | 6.0 | 7.0 | 2.x | 1.x | |
Windows | × | ○ | - | ○ | ○ | ○ | × | × | ○ | ○ | ○ | ○ | - | - |
Macintosh | × | ○ | ○ | ○ | - | - | × | × | ○ | ○ | ○ | ○ | × | ○ |
UNIX | - | - | - | - | - | - | × | × | ○ | ○ | ○ | ○ | - | - |
ポイント | .クラス名 { スタイル定義 } |
---|---|
説 明 | ページ内でリストごとに異なるマークを利用する場合には、それぞれのクラスを定義しておきます。<ul>または<ol>のclass属性で定義したクラス名を指定します。 |
サンプル | <html> <head> <title>リスト別に異なるマークで表示させる</title> <style type="text/css"><!-- .listType1 { list-style-image: url("mark.gif"); } .listType2 { list-style-type: disc; } .listType3 { list-style-type: square; } --></style> </head> <body> 【リストタイプ1】 <ul class="listType1"> <li>項目1 <li>項目2 <li>項目3 </ul> <br> 【リストタイプ2】 <ul class="listType2"> <li>項目1 <li>項目2 <li>項目3 </ul> <br> 【リストタイプ3】 <ul class="listType3"> <li>項目1 <li>項目2 <li>項目3 </ul> <br> </body> </html> |
補足説明 | なし |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |