ブログTOP > CSS/XHTML > PC操作説明の記事などに使える、CSSスタイルのみでキーボードのキーを再現

2015年10月05日

PC操作説明の記事などに使える、CSSスタイルのみでキーボードのキーを再現

こちらの記事「スーパーリロードとは?」のように、ブログ記事で「ショートカットコマンドを使うには、キーボードのキーをこうやって入力するんですよ」みたいな説明をする時に便利なCSSスタイルです。

スクリーンショット 2015-10-05 21.59.55.png

画像を使わず、文字数の制限などもなく、クラスを割り当てるだけで使えるCSSです。
一行の中で高さもマッチしますし、使いやすくなってると思います。

CSS
.keyboard {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 4px 12px;
  margin: 0 4px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
  font: 18px/24px Helvetica, Arial, serif;
  text-align: center;
  color: #666;
}

もちろんHTMLのほうでは
<p>ここで <span class="keyboard">&#x2318;</span> + <span class="keyboard">Alt</span> + <span class="keyboard">Esc</span> と入力します・・・</p>

のようにクラス指定します。

以上です!


このスタイルは、下記の記事で紹介されていたものを使いやすく汎用性を持たせるなど改良・修正して作ったものです。

[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート | コリス

このエントリーをはてなブックマークに追加
posted by taichistereo at 22:08 | Comment(0) | CSS/XHTML
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
カテゴリクラウド
トップページへ戻る
Blog Widget by LinkWithin