• Top
• css
• regexp
• Tidy
• FreeBSD on ThinkPad560

スタイルシートちょっとイイ話

“こういう見栄えのために、スタイルシートをこう書く”ってだけの、志の低いサンプル集です。「スタイルシートってなんだ？」って疑問はGuide to Cascading Style Sheets(jp)やシンプル解説といった、よそ様のちゃんとしたサイトをご覧ください。

1. リストでナビゲーションを表示する
2. 一部のブラウザでスタイルシートを無効にする

リストでナビゲーションを表示する

ul#navisample { 
 margin : 0;                        /* ここは個人の趣味です。ご自由に */
 border-top : 1px solid #000000;    /* ここも個人の趣味です。ご自由に */
 border-bottom : 1px solid #000000; /* ここだって個人の趣味です。ご自由に */
 font-size : 0.75em;                /* ここすら個人の趣味です。ご自由に */
 } 
ul#navisample li {
     display : inline;              /* こればかりは必須です */
 } 

スタイルシートに以上のように書き加えて、ソースを以下のように書くと

<ul id="navisample">
<li><a href="../" title="サイトのホーム">Tips</a></li>
<li><a href="../css/" title="スタイルシートちょっとイイ話">css</a></li>
<li><a href="../regexp/" title="正規表現ちょっとイイ話">regexp</a></li>
</ul>

実例は以下のようになる。

• Tips
• css
• regexp

一部のブラウザでスタイルシートを無効にする

どんなUAでもちゃんと見えるってのが正しい、ってのは十分承知してるんだけどね。

Netscape 4.X

ネスケ4.Xは、スタイルシートのimportに対応していない。だからスタイルシートの頭にでも

@import url "foo.css";

って書いてやると、ネスケ4.Xではスタイルシートが適用されなくなる。簡単だね。

あるいはメディアタイプにも対応していなかったりするので、htmlファイルのヘッダに

<link rel="stylesheet" href="bar.css" type="text/css" media="all">

とやると、“bar.css”が読み込めなくなる。だから、

<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="stylesheet" href="bar.css" type="text/css" media="all">

なんて、ネスケ4.X以外には、fooとbarを読み込ませて、ネスケ4.Xにはfooだけを読ませるってこともできる。

iCab

Version2.81現在、iCabはスタイルシートのcharsetに対応していない。なのでスタイルシートに

@charset "Shift_JIS";

なんて書いてやると、iCabではスタイルシートが適用されなくなる。

【2003-08-23追記】と、思っていたんだが、同時にimportも指定しないと、スタイルシートを無視してくれない。なので

@charset "Shift_JIS";
@import url "foo.css";

と書いておきましょう。まあ、iCab使っている人はもう少ないんだろうけど。ウチのサイトには俺しかiCabでアクセスしてないし。