オープンソースの画像生成AIをセットアップから使い方まで解説する『Stable Diffusion AI画像生成ガイドブック』(ソシム刊)発売中(→本のサポートページ

キー表示のCSSをもっと使おう計画

【元記事:キー表示のCSSをもっと使おう計画:d:id:manpukuya:20060124:css

はてなダイアリースタイルシートを編集するたび、スタイルシート記入欄に、ずっと前に作ったキーボードのキー風の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]キーを押す」と表示される。うーん、これはいいかも。ちょっと長いけど。