CSS | 問題解決 | CSSファイルの編集結果が反映されない

CSSは,スタイルシートを書くための言語であり,HTMLやXMLなどのmarkup languageで書かれたドキュメントを描写するためにデザインされており,レイアウトやカラー,フォントを含めた内容は分離されている.

CSS3とは,2024年3月現在のCSSの最新版となる.

今回,PHPやHTML,CSSで開発したWebページにおいて,CSSを編集しブラウザ(Google Chrome)で変更を確認をしたが反映されていないという問題が発生した.

今回当該問題の解決方法をこちらの記事にて記す.

実施環境

各バージョンの確認方法はこちら

OS: Windows11
Chrome version: 123.0.6312.86 (Official Build) (64-bit)
PHP: 5.3.3
MySQL: 5.1.73

問題の詳細

今回,ログアウトページを表現している"logout.php"の背景(background-color)の色を白からピンクに変更したく,"common.css"の6行目を追記した.テスト環境にアップロードした後に,変更をブラウザで確認したが,背景の色は変わっていなかった.

“logout.php"のhtml箇所が以下になる.5行目に"<link />"を挿入し,"logout.php"のスタイルを"common.css"で操作している.

<html>
  <head>
  <meta charset="UTF-8">
  <title>Web System Logout</title>
  <link rel="stylesheet" type="text/css" href="css/common.css" media="all" />

  <meta name="robots" content="noindex" />
  </head>
  <body>

“common.css"の一部のコードが以下になる."logout.php"の背景(background-color)の色を白からピンクに変更したく,"common.css"の6行目を追記した.

body {
font-family: "Arial";
color:#555555;
margin: 0;  
padding: 66px 0 150px 0;
background-color: #FA8BDA;
}

問題の解決方法

File Path (ファイルパス)

“logout.php"の5行目の「href="css/common.css"」が正しいかどうかを確認する.

“logout.php"の5行目は以下のように記載しており,"common.css"のファイルパスにフォルダが反映されていなかった.そのため,"common.css"を変更しても,"logout.php"が反映されなかった.

<link rel="stylesheet" type="text/css" href="common.css" media="all" />

Cache (キャッシュ)

“common.css"の6行目を追記し,FileZillaを用いてテスト環境にアップロードした後に,変更をブラウザで確認したが,背景の色は変わっていなかった.

そのため,ブラウザのキャッシュを削除し,更新すると変更をブラウザで確認することができた.

同じようなやり方であるが,ブラウザをGoogle ChromeからFirefoxに変更しても,同様にCSSの変更を確認することができた.

参照

W3C | CSS Snapshot2023 | CSS

Wikipedia | CSS

以上

CSSエラー解消

Posted by クマガイ