IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

ウェブ

【キャッシュクリア】CSSの設定が反映されない時の対応!

投稿日:

【キャッシュクリア】CSSの設定が反映されない時にやるべき事!

ウェブサイトは様々な要素から構成されている。

構成要素の1つに「CSSファイル」というデザイン設計に欠かせない重要なファイルがある。

この「CSSファイル」を修正するもウェブサイトの画面が変わらない。

そんな時のトラブル対応策をここでは書いてみよう。

ウェブサイトの構造とCSSファイル

ウェブサイトは複数の構成要素から成り立っている。

その要素の1つが「CSSファイル」になる。

「CSSファイル」はウェブサイトの裏方の帳尻合わせ担当者の位置付けだろう。

表の舞台に出てくるのが「HTMLファイル」といったところ。

phpやJavascriptなどは「HTMLファイル」に動きをつける役割をする。

今回の主役は裏方の「CSSファイル」だ。

ウェブサイトの構図をイメージしてもらう

ウェブサイトの構図は簡単にイメージするとこんな感じになる。

「CSSファイル」は表で見える「HTMLファイル」やスクリプト言語に比べて目立たない役目なのだ。

だがイメージで「黒子」にしている様に非常に重要なポストを担っているのだ。

今回伝えたいことは「CSSファイルを修正したが何故かウェブサイトの表示が変わらない」と言う場合に役立つ解決策になる。

CSSが正しく反映されないのはキャッシュが原因

今回の「CSSファイル」の修正内容が正しく反映されない原因はブラウザの「キャッシュ」だ。

ブラウザが優秀過ぎて一度訪問したウェブサイトの情報をキャッシュする仕組みを採用している場合に発生する。

つまりキャッシュをクリアーしてあげれば良い。

まずはしっかり設定が反映されているかどうか確認する。

シークレットウィンドウで確認する

まずはウェブブラウザで最もシェアが高い「Google Chrome」にて確認する。

確認方法は簡単で「シークレットウィンドウ」で確認すれば良い。

右上の三点マークを選択し、そこからシークレットウィンドウを起動する。

そして修正したウェブサイトのURLもしくは検索でウェブサイトを表示させる。

シークレットウィンドウはキャッシュされないので都度最新状態の情報が確認できる。

他のブラウザにおいてもシークレットウィンドウで表示させれば良い。

「FireFox」も三点マークを選択し「新規プライベートウィンドウ」を表示させ同じくURLを入力すれば良い。

「Internet Explore」もしくは「Microsoft Edge」も三点マークを選択し「新しいInPrivate」を開いて手順は同じである。

普段使わない他のブラウザで表示確認する

普段からブラウザを使い分けている人であれば使用できない手順だが、普段使わないブラウザからURLを表示する方法でも良い。

普段から使用するブラウザではキャッシュ情報が蓄積されてしまうが、未使用のブラウザであればシークレットモードでなくてもキャッシュがないので表示が可能である。

ブラウザからキャッシュをクリアする手順

では「CSSファイル」の修正がしっかり適用できていることを確認できたら次はキャッシュのクリアをする。

最も王道なやり方は右上の三点マークを選択し、「設定」から「詳細設定」→「閲覧履歴データを削除する」である。

だが、このやり方を行うと必要な情報も全てクリアされる。

具体的にいえばブラウザに保存しているユーザIDやパスワードである。

セキュリティ面から保存していない人であれば問題ないのだが。

このやり方は一般的であるが、その他にもブラウザのキャッシュをクリアする方法はある。

まずはブラウザを開発モードにする。

やり方は簡単だ。

Macbookユーザーであればウェブブラウザのどこでも良いので右クリックをしてメニューから「検証」を選択する。

Windowsユーザーも同じくウェブブラウザ上で右クリックもしくは「F12」で「検証」メニューが表示される。

ブラウザの下に検証モードが表示されるのでこの状態になったら次に、ブラウザのURLバーのすぐ左に「更新マーク」に注目する。

ブラウザの「更新マーク」を長押しする。

すると普段は表示されないメニューが表示される。

ブラウザからキャッシュをクリアする

表示されたメニュー一番下の「キャッシュの削除と再読み込み」をクリックするとキャッシュがクリアされる。

これでCSSファイルの修正が適用される。

CSSファイルの修正が適用されないだと。

「兄上もキャッシュをクリアしてないようで」

「ふん、冗談はよせ」

「キャッシュなどカスであると」

ギレンさん、キャッシュはウェブサイト高速化に大切な機能や。

そんなことはウェブ屋として言えません。

今日も良い1日を。

      

-ウェブ

執筆者:

関連記事

googleadsenseの配置は適切ですか

【Google AdSense注意点】アドセンス広告の適切な方法!

割と真面目な質問で「Google AdSense」広告の貼り付け方を聞かれたので答えてみた。 確かにサイト運営において広告の配置は非常に重要なポイントだ。 なぜなら広告はサイト閲覧者からすれば邪魔な存 …

AnalyticsとSearchConsoleの合わせ技

【SEO】自分のサイトの検索キーワードを調べる方法!

自分のサイトが何という「キーワード」で検索されているのか調べる方法を書いてみよう。 「キーワード」とは検索窓に入力する単語のこと。 この「キーワード」が自分の意図したものと一致しているかどうかがウェブ …

【SEO】ウェブサイトを始めるならインデックス登録は必須!

【SEO】ウェブサイトを検索エンジンにインデックス登録する理由!

ウェブサイトを作成した後に、行う作業はたくさんある。 その一つに「インデックス登録」がある。 この「インデックス登録」とはウェブサイトを検索エンジン内で「クローリング」してくれる仕組みに組み込む作業だ …

【モバイルファーストインデックス】モバイル対応してる?

【モバイルファーストインデックス】モバイル対応してる?

先日Googleよりモバイルファーストインデックスに関するメールが送られてきた。 どうやらこのメールは「Search Console」を利用したウェブサイト運営者に一斉送信されたものだ。 わたしのサイ …

GoogleChromeのリダイレクト問題解決策

【Google Chrome】勝手にページがリダイレクトされる時の対処方法!

先日より使っているGoogle Chromeが時折変な動きをする。 それは決まってこのサイトへリダイレクトされてしまうという現象だ。 (このサイトにアクセスしないでください、ウイルス感染しても責任はと …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール