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の変更を確認することができた．
参照
以上