リストマークの色を変える |
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 | - | - | - | - | - | - | × | × | ○ | ○ | ○ | ○ | - | - |
ポイント | li { color:red; } |
---|---|
説 明 | リストマークの色を変えるには<li>タグのスタイルのcolorプロパティにredを指定するか、クラスを指定します。しかし、このままでは項目の色も変わってしまうので<span>タグを使って文字の色を再設定します。<span>タグを使わずに<font>タグを使って指定することもできますが、これはNetscape 4以降, Mac版Internet Explorer 5のみ有効です。また、<font>タグを使った場合には、Netscape 6以降、Opera 7ではマークと項目がずれてしまいます。 |
サンプル | <html> <head> <title>リストマークの色を変える</title> <style type="text/css"><!-- .listType { list-style:disc; } .red { color:red; } .black { color:black; } --></style> </head> <body> 【リストマークの色を変える】 <ul class="listType"> <font color="red"><li></font>項目1 <li>項目2 <li class="red"><span class="black">項目3</span> </ul> <br> </body> </html> |
補足説明 | なし |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |