CSSのサーバー反映が遅い?原因切り分けはW3Cで。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

CSSのサーバー反映が遅い?原因切り分けはW3Cで。

CSSが反映されない

CSSのサーバー反映が遅い?原因切り分けはW3Cで。

CSSが反映されない。

どうもCSSが反映されない事が多い。というかサーバー上で直接編集していると、ほぼ毎日、反映されない現象が起きる。サーバーのキャッシュが原因だと思われるが、ここ数年全く改善されていない気がする。

CSSが反映されない原因としては、

ブラウザのキャッシュ
サーバーのキャッシュ
CSSの記述ミス
.htaccessの記述の問題、など。

ブラウザのキャッシュの問題であれば、スーパーリロードですぐに解決できる。Winなら「Ctrl + Shrft + R」、Macなら「Command + Shrft + R」で解決だ。「Ctrl + F5」では弱いのだ。

もし、履歴が溜まっているのであれば、ブラウザの設定から削除すれば良い。


CSSのパスや容量などの問題かどうかは、、、

例えばChromeなら「デベロッパーツール」や「ページのソース」でチェックできる。
.htaccessファイルの記述が原因であるのであれば、一時的に記述を消せばそれで済む。
容量の大きさの問題かどうかは、Pagespeed Insightsで計測するとすぐにわかる。

後日追記)

私の環境の場合、2022年くらいからは若干改善されている。2021年のような、毎回毎回スーパーリロードをしなければならないという状況ではない。(ただし、iPhoneのSarariでは2021年度と同様のまま。)

それでもまだ、反映されないのなら・・・


CSS Validation Service

原因はサーバーかブラウザか、それともコードか?

手っ取り早くかつ確実な原因切り分けには、W3Cの「CSS Validation Service」が便利だ。ブラウザのページのソースやデベロッパーツールからCSSのパスが確認ができるので、それをコピーしてCSS Validation Serviceに貼り付ければ良い。

そこで記述ミスがなく、コードが反映されているのであれば、ブラウザやコードの原因だとは考えにくいという結論が出る。そして、使用ソフトの問題でもないということになる。

https://validator.w3.org/nu

W3CのCSS文法チェックサービス


レスポンシブデザインは実機がベストだが。

CSSが反映されないと、当然、作業に支障をきたす。個人的には、レスポンシブ対応のコーディングが当たり前となってからは、それ以前のように、ローカル上で構築して、ある程度出来上がってからサーバーへアップする、という事がほとんどなくなった。スマホのチェックができないからだ。エミュレータに頼って、後で痛い目にあうのは非常にキツい。

スマホ表示を確認

W3Cのチェックツールで問題なければ、消去法的にサーバーが原因の可能性が高い。サーバーのコンパネなどでキャッシュをクリアしても変わらなければ、もうお手上げだ。時間を空けて、待つしかない。


ローカル環境も必要か。

サーバー上で作業ができれば、XAMPPやMAMPをインストールして、ローカルでPHPを走らせてWordPressを構築する、という手間も必要なくなる。なので本来であれば、とても利便性がいい。

ただ、CSSが反映されない現象はあまりにも頻繁に起きるので、補助的にローカルにも環境構築をしておいた方が無難なのかもしれない。

レンタルサーバーのスペックは高くなっているはずなのに。ちょっと不思議な感じがする。

どうしようもない


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。