【CSS】ショートカットキーの表示を本物のキーボードのようにする

今までは、ショートカットコマンドを紹介したりする際に普通のテキストに「」をつけたりして表示していました。もう少しかっこいいデザインないかなぁと探していたところMacのキーボードのようなかっこいいデザインのスタイルシートを見つけました。

keyboard

自分のサイトを変更ついでに紹介します。

Mac風のおしゃれなキーボード

こちらのサイトのデザインをお借りし、実装してみました。
CSS3でMacのキーボードっぽく見えるスタイルを設定してみた

以下の「Shift」のように5文字以上の場合ははみだしてしまいます。

AShiftab

Shift


探してみると他にもありました。
[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート

こちらは5文字以上でも問題なく表示されます。
白色キーボードのデザイン

AShifttab

黒色キーボードのデザイン

AShifttab

長いスペースキーも再現可能

     

要素

今回は以下のようにクラスを使用しましたが

<span class="keyboard-dark">A</span> 

HTMLにkey要素があるのでそちらに適用してもいいかもしれません。

<kbd>A</kbd> 

さいごに

どちらもシンプルで一見してキーコマンドを表していることがわかりますね。
個人的には現在つかっているMacBook Airに似ているkeyboard-darkが一番しっくりくるので、黒キーボードを使っていこうと思います。

ショートカットキーなどを紹介する際は是非。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD