ウェブページの本文中に、キーボード上のキーを表現したいことがあります。
例えば、
コピーをするには Ctrl + C とします
という文を書きたいことがあります。このままでも問題ないのですが、少し工夫をすると以下のように少しキーボード上のキーのような表示にすることができます。
コピーをするにはCtrl+Cとします
方法は簡単で、HTMLで
|
1 |
<span class="key">Ctrl</span> |
と書いて、スタイルファイルに以下のような定義を入れるだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
span.key { background: -webkit-linear-gradient(#f0f0f0 0%, #fcfcfc 100%); background: linear-gradient(#f0f0f0 0%, #fcfcfc 100%); border-color: #e0e0e0; border-radius: 3px; border-style: solid; border-width: 1px 1px 2px; color: #303030; font-family: monospace; font-size: 0.9em; padding: 1px 6px; white-space: nowrap; } |
ちなみに、これはキーボードショートカット | Firefox ヘルプのページで使用されていた方法です。