CSSでウェブページにキーを綺麗に表示する

ウェブページの本文中に、キーボード上のキーを表現したいことがあります。
例えば、

コピーをするには Ctrl + C とします

という文を書きたいことがあります。このままでも問題ないのですが、少し工夫をすると以下のように少しキーボード上のキーのような表示にすることができます。

コピーをするにはCtrl+Cとします

方法は簡単で、HTMLで

と書いて、スタイルファイルに以下のような定義を入れるだけです。

ちなみに、これはキーボードショートカット | Firefox ヘルプのページで使用されていた方法です。

スタイルファイルで印刷範囲を指定する

htmlのページをブラウザから印刷する時に、必要な部分だけ取り出した形式で印刷させたい場合があります。そのような場合、スタイルファイルで印刷範囲を指定することができます。

各エリアが以下の例のようなid名を持つとします。

htmlEx

例として、このページの #contents に書かれた内容だけを印刷させるには、スタイルファイルに以下のように指定します。

クラス属性でも同様の指定が可能です。

media の前の「@」をお忘れなく。

URLをリダイレクトする

URLの変更があった場合に、指定されたURLにリダイレクトする方法です。

リンクにマウスを合わせた時にだけ下線を表示する

リンクにマウスを合わせた時にだけ下線を表示する方法です。
下線を必要な時にだけ表示させるようにしたほうが、画面がすっきり見える場合もありますね。

スクロールバーを常時表示する

ロゴや画面上に表示するメニューなど、画面を遷移させても位置が固定されているように見せたいものがあります。
スクロールバーをautoで表示させていると、微妙にずれてしまい固定されているように見えません。

そんな時には、スクロールバーを常時表示するようスタイルファイルで定義します。

  • 縦・横を表示

  • 縦のみ表示

システムの機能には関係なく、ユーザの皆様も気づかないかもしれない細かい部分ですが、自分が気になる点はなるべく対応していこうと思っています。