GoogleChromeを使ってwebデザインを行っていると、何回リロードしてもcssが反映されない経験あるのではないでしょうか？
今回は、その際の対処法について記事にしたいと思います。

原因

まず、cssが反映されなくなる原因は「キャッシュ」にありまあす。
キャッシュにより過去のcssのデータが保存され上手く反映されなくなるため、別のパソコンで開いたり別の人が閲覧すると問題ないこともあります。

対処方法

開発コンソールを開いている間は、常にキャッシュを無効にする機能がついています。F12を押し、コンソール画面のnetworkを開きます。その後、Disablecashに☑を付けることでキャッシュを常に無効かできます。

例えばCSSを読み込ませる際のURL（ファイル名）は、以下のように「?」＋「更新日時」の法則で文字列を加えて記述しておきます。


<link type="text/css" rel="stylesheet" href="styles.css?20130420-1100">

このCSSを更新したときには、「?」以降の日時の部分を書き換えます。


<link type="text/css" rel="stylesheet" href="styles.css?20130420-1112">

このように、更新する度に書き換えれば、キャッシュを読まれる心配はありません。

リロードする際にShift+F5で行うとキャッシュを削除してから最新のcssで反映してくれます。

この場合は、ブラウザ右上の・が縦に3つ並んでいるところを押し、設定を開きます。
その後、設定画面の一番下の詳細設定を開き閲覧履歴の削除を選択します。
そこで、キャッシュされた画像とファイルを選択し溜まったキャッシュを消すことができます。

また、デベロッパーツールをF12で開いた状態でリロードマークを右クリックし、「キャッシュの削除とハードの再読み込み」をおすことでも最新のcssを反映させられます。