Webサイトでキーボードのボタンの表現はの表現てどうにかならんのかえ?
と調べていましたら、CSSを見つけましたのでご紹介。

サンプルCSSコード

/* keyboard
--------------------------------------------------- */
.keyboard {
  height: 41px;
  min-width: 24px;
  padding: 0 10px;
  margin: 5px 10px;
  background: #EFF0F2;
  border-radius: 4px;
  border-top: 1px solid #F5F5F5;
  box-shadow: 0 0 25px #E8E8E8 inset, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333333;
  color: #AAAAAA;
  text-shadow: 0 1px 0 #F5F5F5;
  font: bold 14px arial;
  text-align: center;
  line-height: 41px;
  display: inline-block;
}
.keyboard-dark {
  height: 41px;
  min-width: 24px;
  padding: 0 10px;
  margin: 5px 10px;
  background: #222222;
  border-radius: 4px;
  border-top: 1px solid #222222;
  box-shadow: 0 0 25px #333333 inset, 0 1px 0 #000000, 0 2px 0 #222222, 0 2px 3px #333333;
  color: #AAAAAA;
  text-shadow: 0 -1px 0 #000000;
  font: bold 14px arial;
  text-align: center;
  line-height: 41px;
  display: inline-block;
}

【参考】Apple Keyboard made via css3.

白と黒のどちらがお好み?

サンプルCSSのDEMOはhttp://m.designbits.jp/さんでご紹介されていました。文中に使えたりとかなり使い勝手が良さそうです。

実際の見た目はこんな感じ
A B Sample

A B Sample

「コピーする」ショートカットを表現しますと
Ctrl + C
こんな感じです。

その他・まとめ

今回はMacでした。理由として、私がMacユーザーだからです。すいません・・・
Webサイトの取扱説明書なるページでも活躍してくれそうなCSSですよね。

コメントを残す

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