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

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

画像を使わず、文字数の制限などもなく、クラスを割り当てるだけで使える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風に美しく実装するスタイルシート | コリス

http://coliss.com/articles/build-websites/operation/css/css-apple-keyboard-style-by-nrjmadan.html

ツイート

「スーパーリロード」とは何か？ ブラウザ別の操作方法

通常のページリロード（再読み込み）を行っても、ブラウザに残ったキャッシュが邪魔をして、必ずしも最新の情報が表示されないことがあります。

例えば、制作会社や社内スタッフがウェブページの修正作業を完了したあと、クライアントや上長が確認しても、「どこ直したの？変更されてないように見えるけど」というようなケースが良くあります。

WordPressのアップデート後に管理画面がどうもおかしい（ボタンが動かない、表示がおかしい、など）場合も、大抵はブラウザに残った古いキャッシュが邪魔をしています。

こんな時は「スーパーリロード」を行えば問題を解決できます。

「スーパーリロード」とは、ブラウザに残っているキャッシュを無視して（上書き）、強制的にWebサーバーから最新のデータをダウンロードすること方法のことです。

”強制再読み込み”とも言ったりします。

ブラウザごとに操作は異なります↓

>> 続きを読む

ツイート