CSS でキーボードのキーのような装飾を


120725-0008.png

ここは Vim やらキーボードのネタが多いので <kbd> タグを多用するわけですが、ググったら丁度いいのがありました。


[CSS]キーボードのキートップのデザインを適用するスタイルシート -KEYS.css | コリス
http://coliss.com/articles/build-websites/operation/css/css-styling-key-top.html

CSS を一つ読み込みだけで <kbd> がぐっとかっこよくなります。

<kbd>あ</kbd>
<div class="light key">Option</div>
実行結果

Option

ただそのままだと、文中に置いた場合にちょっとだけずれてしまうので、調整しました。

kbd, .key {
    position: relative;
    top: -0.1em;
}

コメントを残す