HOME技術ウェブChromeでCSSを更新したときに再読み込みで反映させる

ChromeでCSSを更新したときに再読み込みで反映させる

Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。
これはキャッシュがChrome内に残っているために起こっている問題です。

キャッシュを削除して更新する

Chormeでキャッシュを削除する簡単な方法は、以下のとおりです。

まず、ブラウザを表示している状態で「F12」キーを押します。
すると、ブラウザが分割されて、デベロッパーツールが立ち上がります。ソースコードなどが表示されます。

733-01

この状態で、更新ボタンの上で右クリック→「キャッシュの削除とハード再読み込み」をクリックします。

733-02

再度「F12」キーでデベロッパーツールを閉じます。
以上でキャッシュが削除され、最新の情報が反映されます。

関連記事

JavaScriptでmailtoを偽装してメールアドレスを表示する

ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む

CSS3で複数条件のセレクターを指定する

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「~かつ、~」というセレ…続きを読む

Microsoft Edgeのキャッシュを削除する

Microsoft Edgeのキャッシュを削除する方法を調べました。 Edgeの右上の設定アイコンから「設定」をクリックします。 「Cookieとサイトのアクセス許可」から、「Cookieとサイトデー…続きを読む

GoogleMapのURLを短縮URLで取得する

GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します(ここで…続きを読む

Zoomの有料契約を解約する

Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む

CSSで徐々に変化させるアニメーション効果をつける

CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。 CSS3で実現 例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きま…続きを読む

CSSで内容が少ない場合でもフッターを画面最下部に表示するその2

CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む

CSSで二段組のリストをつくる

ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む

CSSで画像の縦横比を保ったまま大きさを変えて表示する

縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む

ウェブフォントを埋め込み任意のフォントを表示させる

ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む