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

igawa design.

Memo

CSSが反映されない

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

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

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。