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

2015年10月04日

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

通常のページリロード(再読み込み)を行っても、ブラウザに残ったキャッシュが邪魔をして、必ずしも最新の情報が表示されないことがあります。
例えば、制作会社や社内スタッフがウェブページの修正作業を完了したあと、クライアントや上長が確認しても、「どこ直したの?変更されてないように見えるけど」というようなケースが良くあります。

そんな時は「スーパーリロード」を行えば問題を解決できます。
「スーパーリロード」とは、ブラウザに残っているキャッシュを無視して、強制的にWebサーバーから最新のデータをダウンロードすること方法のことです。
”強制再読み込み”とも言ったりします。

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


Windows

Internet Explorer : Ctrl + F5

Google Chrome : Ctrl + F5 または Shift + F5

Firefox : Ctrl + F5 または Ctrl + Shift + F5

Opera (11.62〜) : Ctrl + F5 または Shift + F5


Mac

Safari : + R

Google Chrome : + R

Firefox : + Shift + R


スマホなどの場合

iOSやAndroidでは、スーパーリロードが出来ません。
かわりに、今ブラウザに残っているキャッシュを消去する事ができます。

iPhone
設定 > Safari > Cookieとデータを消去 > Cookieとデータを消去

Android
設定 > アプリケーション > アプリケーションの管理 > すべて > ブラウザ > キャッシュを消去
または
ブラウザのメニュー > 設定 > プライバシーとセキュリティ > キャッシュを消去
または
ブラウザのメニュー > その他 > 設定 > キャッシュを消去




このエントリーをはてなブックマークに追加
posted by taichistereo at 19:05 | Comment(0) | CSS/XHTML
Blog Widget by LinkWithin