Macに関する操作方法やショートカットキーをブログで紹介する際に、普通にキーの文字列を入力して提示するだけでもいいのですが、もう少し視覚的にもわかりやすい方法はないかなーと思い、HTMLとCSSだけで出来る簡単な方法を考えてみました。

ただの文字列をキートップ風にカスタマイズしてみる

例1:特殊キー記号+キー名表示の場合

操作を取り消すには ⌘ command + Z を押します。

例2:特殊キー記号のみの場合

操作を取り消すには + Z を押します。

どうでしょうか?まだ慣れていない人向けには、例1のキー名称まで含めたほうがわかりやすいですが、いずれの場合も「ああ、キーボードのキーを押すんだな」というのが、より伝わりやすくなったような気がします。

では、早速HTMLとCSSを紹介といきたいところですが、その前に特殊キー記号の入力の仕方からご紹介します。

特殊キーの記号を入力するには

システム環境設定 キーボードシステム環境設定の[キーボード]を開き、[メニューバーにキーボードビューアと文字ビューアを表示]にチェックが入っていることを確認します。

文字ビューアを表示

メニューバーから、[文字ビューアを表示]を選びます。

Unicodeを追加

文字ビューアが開いたら、左上の[]をクリックし、[リストをカスタマイズ]を選びます。[カテゴリを選択:]と出るので、最下段にある[ コード表]の中から[Unicode]にチェックを入れて[完了]をクリックします。

文字ビューア

先ほど追加した[Unicode]の中に、⌘や⇧、⌥などが入っているので、文字入力が可能な場所にカーソルを置いた状態で、好みの文字や記号をダブルクリックすると入力する事ができます。よく使うものについてはお気に入り登録しておくと、次回以降使用する際にすぐに見つけだす事が出来ます。また、このあと紹介するサンプルをコピーして辞書登録しておくのもひとつの手ですね。

よく使う特殊キーの一覧については、下記のサイトに詳しく載っているので、参考にしてみて下さい。

Mac の特殊キー記号の由来 – 情報と音楽

初代Mac開発メンバーであったスーザン・ケアが、北欧の史跡などを示す交通標識に使われる ⌘ マークを記号辞典で見つけ、採用したといわれている。開発段階ではアップルマークが使われていたが、コマンドキー表示としてアップルマークが連なるメニューを見たスティーブ・ジョブズが自社ロゴを濫用していると感じ、別のマークにするよう指示した。

特殊キーを表す場合のHTMLについて

最初は単純に<span>タグで括ろうかと思っていたのですが、HTMLタグの中にはなんと、今回のテーマにぴったりな<kbd>タグというのもあったんですね。知りませんでした。<kbd>タグとは…。

<kbd> …… ユーザーが入力する内容であることを示す

<kbd>タグは、ユーザーが入力する内容であることを示す際に使用します。 主にキーボード入力ですが、音声コマンドなどの他の方法による入力を表すために使用されることもあるでしょう。

引用:<kbd>-HTML5タグリファレンス

まさに今回にピッタリのタグでしたので、これを使用します。これを踏まえて、冒頭で示したサンプルのHTMLを確認してみると…。

このようになります。要は押下するキーを<kbd>タグで括ればOKです。見た目だけをキートップ風にしたいのであれば適用したいキーを<kbd>で括るだけでいいのですが、より正確に記述したい場合は、ショートカットキーのように複数のキーを同時に押下する場合、その組み合わせ全体も<kbd>タグで括るのがいいかと思われます。

特殊キーを表す場合のCSSについて

先ほどの<kbd>タグに使用するclassセレクタは、MacBook風にキートップが黒いものをイメージして下記のように作成してみました。

このCSSを追加し、押下するキーを<kbd>タグで括り、class名としてclass=”b-kbd”のように指定するだけで冒頭のサンプルのようになります。CSSは必要最低限のものしか記述していないので、利用する環境に合わせて適宜修正していただければと思います。

また、iMac風のキートップが白いものは下記のように作成してみました。

完成したものがこちら

キートップをすべて表示してみた例

esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 eject
1 2 3 4 5 6 7 8 9 0 - ^ ¥ ⌫ delete
tab Q W E R T Y U I O P @ [ ↩ return
⌃ control A S D F G H J K L ; : ]
⇧ shift Z X C V B N M , . / _ ⇧ shift
caps ⌥ option ⌘ command 英数 space かな ⌘ command fn

複数のキーを押す場合を表示してみた例

例1:閉じたタブを開くには ⇧ shift + ⌘ command + T を押します。
例2:次のタブを選択するには ⌥ option + ⌘ command + を押します。

※全てテキストデータなので、コピーしてブログ等に貼り付けることが出来ます。
※キーとキーを連続で入力すると、連続した単語としてみなされて途中改行されないので、英文を入力する時と同様に、間にはスペースを入れて下さい。

まとめ

いかがだったでしょうか。簡単なHTMLとCSSだけで作る、Macの操作方法やショートカット紹介時などに役立つキートップ風のCSSカスタマイズ。AddQuicktag等のプラグインを利用すれば、<kbd>タグで括るのも簡単ですし、それほど手間もかからないか思います。良さそうだなと思った方は、ブログ等でぜひ使ってみてください。

Load More Related Articles
Load More By kenc0224
Load More In Web制作

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Check Also

CloudMounter:クラウドストレージを外付けディスクのように扱えるMacアプリ

クラウドストレージを外付けディスクのように扱うことができるMacアプリ、「CloudMounter」が3,600円→240円のセール中となっています! クラウドストーリッジをネット…