はてなダイアリーのスタイルシートを編集するたび、スタイルシート記入欄に、ずっと前に作ったキーボードのキー風のCSS（「Enter」とか、こんな感じの）が残ったままなのが気になってはいた。「面白いCSS」（d:id:Imamura:20030318:p1）という記事で作ったものだが、そのあとぜんぜん使っていない。にもかかわらず、この日記のどの日を表示させても、スタイルシートとして常に読み込まれるから、そこがなんとなくもったいない…というか申し訳ない。
上の記事で作ったCSSは、以下の通り。
/* ■キーボードのキー風のスタイル */ span.key { color: #000; /*文字の色を黒く*/ background-color: #eee; /*背景色を薄い灰色に*/ font-weight: normal; /*太字にしない*/ font-style:normal; /*斜体にもしない*/ font-size: 90%; /*文字を少し小さく*/ border-top:solid 1px #ccc;/*範囲の上に実線を1ピクセル、明るい灰色で*/ border-right:solid 2px #888;/*右側に実線を2ピクセル、少し暗い灰色で*/ border-bottom:solid 4px #444;/*下に実線を4ピクセル、暗めの灰色で*/ border-left:solid 2px #aaa;/*左側に実線を2ピクセル、少し明るい灰色で*/ margin:0 2px; /*枠線（border）の左右を2ピクセル空ける*/ padding: 0 2px; /*文字の左右と枠線の間を2ピクセル空ける*/ vertical-align: top; /*文字を天地の中央に*/ white-space: nowrap; /*範囲を現在の行におさめ、改行しない*/ }
なぜこれを使わないのかというと、個人的にキーの表記は「［Alt］キーを押す」などと、角括弧で挟んで書きたいから。
もし上記記事で作った「span.key」セレクタを使うと、HTMLはたとえば「<span class="key">Alt</span>キーを押す」となる。表示結果は「Altキーを押す」となって、スタイルシートを解釈するブラウザではいい感じに表示される。しかし、スタイルシートを解釈しないブラウザや、スタイルシートの適用をオフにしている環境では、単に「Altキーを押す」と表示されてしまう。これはちょっと避けたい。スタイルシートを使わないときは、やっぱり「［Alt］キーを押す」と表示したいのだった。
そして夕べ、風呂に入っていて突然気がついた。CSSがオフの人にだけ見えるクラスを併用すればいいんだ。
上記の「key」クラスのほか、「forcss」クラスを以下のように指定した。
span.forcss{display:none;/*CSSを解釈したとき非表示にする*/}
つまり、「<span class="forcss">〜</span>」で囲まれた部分は、CSSがオンの時には見えない。言い換えれば、CSSがオフの時だけ見える、ということになる。
たとえばHTMLはこう書く（長いので3行に分けていますが、はてなダイアリーなどでは1行にまとめてください）。
<span class="forcss">［</span> <span class="key">Alt</span> <span class="forcss">］</span>キーを押す
これで、CSSをオンにしていれば「Altキーを押す」と表示され、CSSがオフなら「［Alt］キーを押す」と表示される。うーん、これはいいかも。ちょっと長いけど。
