CSSが効かない20210525

２０２１年　５月２５日

1.概要

Webページは趣味の一環で独学して、CMS^（※１）無しの「タグ打ち」のみで作成・公開しています。htmlファイルに対しCSSファイルの比率は1：1のみではなく、デザイン的に似たページはまとめて（標準化して）いるため、一つのCSSファイルを幾つかのページで共有（使い回し）しているものも多くあります。
　その為、外部CSSファイルの不具合時には、多くのページへ影響してくる（弊害？）ことが有ります。

^（※１）

CMSとは、ホームページ更新（修正、変更、訂正、Webサイト管理）をWebから行うためにWebサーバにインストールしておくソフトウェア（アプリ、アプリケーション）の総称です。
出典：すぐ使えるCMS…Sugutsukaeru

今回体験した不具合は、「indexページ」でありCSSファイルはオンリーワンの組み合わせであるものに起こり、対策しようとしましたがCSSは全く効かなくなっていました。
　共有ページと異なり一番回復させ易い状態であると思われるのに、簡単には新規CSSを読み込んでくれそうも無く最悪の状態でした。

Webページは通常htmlファイル本体を主体に、写真や画像、装飾、効果等の付加価値を付ける目的でCSSファイル、JSファイル、動画ファイル等を組み合わせて構成しています。

上記の構成ファイルは、ブラウザー（Webページを閲覧する）アプリを通し閲覧されますが、ブラウザーの機能には初回に読み込んだファイル情報等のデータを、「キャッシュ」機能で「一時保存」をしているため、2回目以降に訪問したサイトの読み込み・表示等は格段に速くなる仕組みになっているそうです。
　しかし、逆にキャッシュされているとWebページを構成しているCSS,JS,画像等のファイル情報のデータは、毎回読み込まなくなってしまう「弊害」も発生します。

Webページの開発現場ではこの機能等が妨害して、変更等の新データが読み込まれない現象が起こり、ひどい時には作業をストップせざるを得ない状態になってしまいます。
　余りにもこの状態が続くとモチベーションの低下になり、制作意欲が無くなりかねません。

CSSファイルデータが反映されない原因には、HTMLやCSSの誤り（通常は指定そのものの誤り、スペルミス、スペースが不適当、拡張子が大・小文字混じり、：、；、<、>、｛、｝等記号の誤り等）が考えられます。
　これらのチェックは当然事前に行いますが、その他通常は思い付く全ての解決方法を駆使します。

いつも変更したい時、CSSで指定すると直ぐWebページへ反映され、希望通りのページに出来上がっていました。

今回CSSが全然効かない現象は、過去にも数回有りこの時は修復せず、全てを作り直していました。今回久し振りに再び同じ現象に遭遇した機会に、対処方法を調べ直してみました。

原因の一番疑わしいのは、ブラウザーの「キャッシュ」機能の仕業であると思われますが、解決には時間がかかりました。

2.使用環境

◆PC

• 富士通製ノートPC：詳細　system（ワーク用PC）記載のPC② FMVA77YRを使用。
• Win10： ・バージョン20H2　・OSビルド19042.985
• ブラウザー：Google Chromeバージョン: 90.0.4430.212（Official Build）（64 ビット）
• ブラウザーの予備：Mozilla Firefox:88.0.1（64ビット）

3.やった事や機能の調査結果

◆サムネール図が複数以上使用されている場合は、図のクリックで拡大したり、連続表示（手動）も可能です。

問題の対処方法は、今回実施済みのものや、未実施であり今後の検討課題にしたい項目が含まれます。

【3-1.機能の指定方法や記載等の誤りをチェック】

HTMLファイルやCSSファイルの記載方法は、W3C（Webページの作成基準等を策定している国際機関）に準拠しています。
　先ず誤りについては（通常指定そのものの誤り、スペルミス、スペースが不適当（半角・全角）、拡張子が大・小文字混じり、：、；、<、>、｛、｝等記号の抜けや誤記等が考えられます。

これらの「ミス」は致命的であり、html自体の読み込みが行われずストップすることも有ります。

一部の簡単なチェックは「エディター」が自動的に行いますので、主にエディターから警告された内容の確認と対応になります。

【3-2.リロード（再読み込み）と更新を、「F5キー」や「更新マーク」で実施】

この機能はWindowsやブラウザーの機能であると思われます。
　再読み込み（リロード）は「F5キー」や、画面上の「更新マーク」を押すと、画面の再読み込みが行われ、「画面は入れ替わり」通常はこれだけで解決するはず？。

この作業は開発時にも必要ですが、ユーザー側にもご依頼したい内容（異常と思われた時のみ）になります。

【3-3.強力なスーパーリロードを実施】

リロードでも効果がでない時は、更に強力な「スーパーリロード」と呼ばれる処理（ブラウザーによる再読み込みを止めて、ハード的に再読み込みさせる「強制再読み込み」機能）を行います。
ブラウザーにより方法に多少の差が有ります。

・（google Chrome用）キーボードの「Shift + F5キー」を押します
・予備用（Mozilla Firefox用）キーボードの「Ctrl」+「F5キー」を押します。

「キャッシュ」の程度によっては、こちらをしないと反映されない事があります。
スーパーリロードはキャッシュ自体をクリアするものではありません。

この作業は開発時にも必要ですが、ユーザー側にもご依頼したい内容（異常と思われた時のみ）になります。

【3-4.キャッシュのクリアー処理】

全てのブラウザはキャッシュという過去データを記憶して、表示速度を上げるという機能を持っています。

この情報が災いして、他の更新情報等が全く読み取られなくなってしまいます。各ブラウザーごとにクリアー処理方法は異なります。
ここではGoogle Chromeのキャッシュのクリアー機能を使用した例です。

特にWebページ開発時にブラウザーのキャッシュを削除する機能を使いますが、過去には使い方を誤り、設定情報等が消えたりして、PWの設定をやり直したり、Twitter等の「リスト画面表示」等が変更されたりで出せなくなってしまい、大失敗したことも有りました。

正しい設定方法は、Google Chromeを開いた状態で右上の ボタンからも行えますが、奥深い場所にあり時間がかかり過ぎたり、誤り易い為、以下のキーボードショートカットで開く方法を推奨します。

キーボードショートカット：［Shift］＋［Ctrl］＋［Delete］キーで「閲覧履歴データの削除」画面が開き、8項目の中から「キャッシュされた画像データ」を選択チェック を入れ、「データを削除」ボタンを押します。

更新が反映されない現象が起きるリソースは、CSSやJSファイル・画像ファイルの部分に多い為です。

この作業は開発時にも必要ですが、ユーザー側にもご依頼したい内容（異常と思われた時のみ）になります。

図1. ［Shift］＋［Ctrl］＋［Delete］キーで「閲覧履歴データの削除」画面を開き→「キャッシュされた画像データ」を選択し→「データを削除」ボタンをクリックします。

【3-5.CSSの指定方法を改善「クエリ文字列」を追記する】

htmlのhead内cssの記述方法を変える。URLの末尾に「？」クエスチョンマークとパラメータ値を付けて、Webサーバーに情報を伝えるための記述をします。

クエリ文字列とは、WebブラウザなどがWebサーバに送信するデータを、送信先を指定するURLの末尾に特定の形式で表記したもの。
出典：IT用語辞典…e-Words

【記載例】
<link rel="stylesheet" href="css/style.css?ver=1.0.0">
<link type="text/css" rel="stylesheet" href="css/style.css?20210525">
<img src="/images/sample.jpg?set0001" alt="Sample">
<script src="/js/script.js?1781036548"></script>

記載例の様にWEBサイトでcssファイルを更新した都度、そのページのCSSファイル指定の記述部分に「?ver=1.0.0」のような情報を追記します。この時「style.css」と「style.css?ver=1.0.0」は別指定として扱われます。

旧のcssファイルを更新した時、クエリ文字列として「?20210525」を付与していれば、ブラウザはキャッシュしたことがないファイルと認識して、style.cssを再キャッシュします。
　こうすれば、スーパーリロードをしなくても、自動で最新のファイルによりWebページを表示させることができます。

ブラウザキャッシュを利用せずに毎回読み込みを発生させる事は、WEBサイトの表示速度の遅延に繋がります。
　表示速度の低下は様々な
弊害（Googleの 「モバイル フレンドリー テスト」で不合格になる恐れがあります）をもたらします。

【3-6.CSSの優先順序】

CSSの大原則は、最後に指定した事項が最優先され、コードの始めの方で先にスタイルを指定していたとしても、重複したタグへの指定場合は、一番最後に書かれたスタイルが適応されます。
　ブラウザはHTMLやスタイルシートのデータを、上から順に一行ずつ読み込んでいくので、下にいけばいくほど、読み込む情報が「最新」になるからです。

通常、CSSのルールでは全称セレクタやタイプセレクタなどよりも、「id」や「class」を参照した「具体性の高いセレクタ」が優先的に適用されます。

idセレクター＞classセレクター＞通常のタイプセレクターの順になるのも、優先順位を上げることができる宣言になります。

しかし、これよりも優先順位を上げることができる宣言として、「!important」を追記する方法があります。
すると通常の優先順序に関係なく（記載場所に関係なく）、最優先に適用される「天下の宝刀」の様なものが有ります。

CSSのルールでは、・・・idセレクタはclassセレクタより優先されます。
ところが、このようにあらかじめ決められたCSSスタイル適用の優先順位を後から変更する方法があります。
それが、「!important」宣言です。
出典：CSSで!importantを使った優先順位の変更…TechAcademyマガジン

【記載例】
display: inline !important;

こうすればCSSファイルを新たに読みにいかないので、WEBページのロード時にCSSスタイルが必ず反映されます。

スポットでの改変の際は大変便利ですが、沢山使われだすと、全体の構造が分かりにくくなってしまうため、あまり使わない方が良いとも言われています。

出典：CSSセレクタ詳細度の理解を深める…Qiita

【3-7.CSSの「詳細度」を上げて優先度を高くする】

現在主流のhtml5規格から、htmlでは主に「構造」を指定し、CSSでは「デザイン」を指定するようになりました。

優先度の高いCSSファイル（記述）の設置場所は、通常

1. CSSが一番優先されるのはhtmlの<body>～</body>間の「要素内」にstyle="color: red;"の例の様に、インラインで直接記述する。
   
2. 二番目はhtmlの<head>～</head>間に<style>～</style>で記述する。
3. 最後に、外部CSSファイル内で指定する。

外部CSSファイルは、他のhtmlファイルに共有され、使用上の利便性は一番良いですが、優先度は一番良くない為!impotant等で対策されるようです。

今回CSSが全く反映されないトラブルが、解決したのは2と3の折衷方法の時であり、3の中でCSSが効かなかった部分の指定をそっくり2へ移動させたもので、完全に対策できました。このまましばらく使ってみて、安定したところで元の3へ戻す予定です。
　1を使わなかったのは、インラインで全部を指定してしまうと、後からhtmlが分かり難くなってしまう恐れもあったりで、たまたま分けて試験してみたら成功した為です。

【3-8.効果を確認するツール】

Googleの「デベロッパーツール」活用でミスを発見する方法。

これは無料で使える開発者用ツールであり、WEBサイトの色々な状態を確認（CSSが機能しているかの確認）したり、検証をしたりすることができる。
　詳細に紹介した記事が沢山目に付きましたが、これらをマスターするのが今後の課題にしたいと思います。

4.参考になったWebページ

1. ホームページの更新情報が反映されない時の対処法…Lpeg
2. CSSが反映されない時にチェックすべき5つのポイントと解決方法…侍エンジニアブログ
3. CSSの指定が効かない！？ 考えられる原因6つ…MakeShop
4. セレクタの記述方法による優先度…ホームページ作成ノート
5. 初心者向け！Chromeの検証機能（デベロッパーツール）の使い方…サルワカ
6. 知っておきたいCSS セレクタの優先順位・詳細度・継承…WEBST8

5.最新の自作ページの紹介

1. PCゴミ箱の設定20210515
2. PCからSPへ送信20210429
3. Renameする20210408
4. zip-fileを使う20210314
5. twitter20210304
6. スマホのアップデート20210216
7. スマホ同期アプリを確認20210115
8. スマホの使いこなし20210110
9. スマホとPCの連携20201212
10. スマホ内部のフォルダ20201129
11. スマホを機種変更20201031