ホームページに表示する内容を変えたい時には、プログラムやHTMLファイルを修正したり画像を変更します。
あなたのホームページを運営・管理してもらっている制作会社に修正してもらった内容が、時として反映されないことはありませんか？
今回は、そのような場合の原因や対応方法をご説明します。一度ちゃんとキーボードの位置などを覚えておくと、とても便利なので是非ご一読ください。
修正してもらった内容が見えない原因は？
ズバリ、実はほとんど「キャッシュ」が原因のことが多いです。
キャッシュ（cache）とは、英語で「隠し場所」「貯蔵所」という意味があります。
ITの世界では、一度読み込んだ内容・情報を一時的に保存しておくことで、次にアクセスした時に素早く読み込めるようにするための方法を意味します。
なので、キャッシュをクリア（削除）するとサーバーに置かれた最新の状態を表示できるようになります。
たとえば本棚から必要な本を出して近くに置いておけば、次にその本が必要になったときすぐに使える、というようなイメージが近いかもしれません。
キャッシュにも種類がいくつかあり、Webサイト・ホームページを確認する上では下記の2種類が代表的なものになります。
・ブラウザキャッシュ：ブラウザで一度取得したデータを保存したもの
・サーバーキャッシュ：過去に作成したファイルがサーバーに保存されたもの
修正が反映されない代表
テキスト（文字）の編集は多くの場合、「F5」キーを押して読み込み直しただけでも反映されますが、画像ファイルやCSS、JavaScriptの記述などは、多くの場合最初に読み込まれるファイルとは違うファイルに記述しているため、確実にとキャッシュを削除しないと反映されない（読み込まれない）ケースがあります。
尚、スマホやタブレットはPC以上にキャッシュ機能が強く、なかなか情報の更新ができないことがあるので、注意しましょう。
キャッシュクリア・リロードの方法
キャッシュ自体のメリット・デメリットの説明の前に、まず先にキャッシュのクリア（削除）のキーボード操作の方法をご紹介します。
スマホやタブレットなどのデバイスは、キーボード操作が出来ない代わりにブラウザの設定画面からの操作する方法があります。他には、キャッシュを管理するアプリなどもありますので是非探してみてください。
キーボードのショートカット方法 : Windowsの場合
F5キーを押す
キーボードのショートカット方法 : Macの場合
Commandキー + Rを同時に押す
スーパーリロード対応表
単にキャッシュクリアだけをしたリロードでは、Webサーバーとのタイミングもあり反映されない場合もあります。そんな時は、より強力な「スーパーリロード」を試してみてください。
Windowsでのスーパーリロード
| ブラウザ | ショートカットキー |
|---|---|
| Google Chrome | キーボードの「Shift」 + 「F5」 |
| Mozilla Firefox | キーボードの「Ctrl」 + 「F5」 |
| Microsoft Edge | キーボードの「Ctrl」 + 「F5」 |
| Safari | キーボードの「Ctrl」 + 「R」 |
Macでのスーパーリロード
| ブラウザ | ショートカットキー |
|---|---|
| Google Chrome | キーボードの「Command」 + 「Shift」 + 「R」 |
| Mozilla Firefox | キーボードの「Command」 + 「Shift」 + 「R」 |
| Safari | キーボードの「Command」 + 「R」 |
キャッシュのメリット
インターネットでWebページを閲覧した時に、一度アクセスしたページのデータ（内容）をブラウザ（Google Chrome, Mozilla Firefox, Microsoft Edgeなど）側で一時的に保管することで、2回目以降のアクセスの時には表示スピードを上げてくれます。画像が多いWebページなどではキャッシュによって表示スピードがかなり変わる場合もあるので、キャッシュの活躍を感じられます。
しかし、あまりキャッシュを溜め込みすぎると容量を圧迫してしまい動作が遅くなる場合があるので、適度にキャッシュを削除しましょう。
キャッシュのデメリット
メリットと相反しますが、一度アクセスしたページのデータを保存しているということは、以前のデータが「残っている」ということ。要するに、せっかくページ修正を行ったのに以前の状態が表示されたままの場合は、キャッシュが原因のケースが多いです。
そのようなときは「Ctrl」キーと「F5」キーを押すなどしてページを読み込み直せば大丈夫です。
ただ、１つ知っておいて頂きたいのは１度ブラウザキャッシュを消去してしまうと、ページを再訪した時にインターネットからページを再ダウンロードする時間が必要になり、以前よりもブラウザの動作が遅くなったと感じることがあります。
少しでも読み込みさせるには
CSSのクエリ文字を記述
HTMLファイルに記述しているlinkタグのhref属性に設定しているCSSファイル名の後ろに続けてクエリ文字を追記します。
<link rel=”stylesheet” href=”css/style.css?ver=1.0.1″>
上記のような記述をすることで、キャッシュの影響を受けずに読み込むことができます。この後は、更に更新した際に ver=1.0.2 のように数字を増やしていくだけなので管理がしやすくなります。
しかし、複数のページに渡る更新をする際には対象ページ全てに同じ記述をしていかなくてはいけないので作業効率が増す場合もあります。
HTMLソース内に直接スタイルを記述
別のファイルを見にいくことでキャッシュの影響がある場合は、HTMLファイルに直接スタイルを書いていくという方法もあります。
headタグ内に直接<style></style>プロパティを書く方法です。
新たにCSSファイルを読み込みに行かないため、確実に反映されます。
WordPressの場合は追加CSSに記述
WordPressの場合は「追加CSS」に記述すれば、上記と同じ効果になります。あなたのホームページがWordPressで制作されたものならば「外観」→「カスタマイズ」→「追加CSS」 の項目です。
修正更新したデザインをリアルタイムビューで確認できますし、記述したスタイルがhead内の<style>タグ内に直接記述されているので確実に読み込まれ反映されます。
