スタイルシートを切り替えられるようにする |
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 | - | - | - | - | - | - | × | × | × | × | ○ | ○ | - | - |
ポイント | <link rel="stylesheet" type="text/css" href="type1.css"> <link rel="alternate stylesheet" type="text/css" href="type2.css" title="画像なし表示"> |
---|---|
説 明 | スタイルシートを切り替えられるようにするにはlinkタグのtitle属性でメニューに表示させるスタイル名を指定します。標準で指定したくない場合にはrel="alternate stylesheet"のように指定しておきます。 |
サンプル | <html> <head> <title>スタイルシートを切り替えられるようにする</title> <link rel="stylesheet" type="text/css" href="type1.css"> <link rel="alternate stylesheet" type="text/css" href="type2.css" title="画像なし表示"> </head> <body> <img src="sample.jpg" align="left"> Netscape 6以降、Mozilla、Firefox、Opera 7以降ではメニューから複数のスタイルシートを切り替えることができます。 </body> </html> |
補足説明 | Opera 7以降でも動作します。 |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |