読み込み中...

CSS変更が反映されない！初心者でもわかる使い方と対処法完全解説

CSS変更が反映されない！初心者でもわかる使い方と対処法完全解説 CSS
2024.01.23
この記事は約9分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSを使ってWebサイトをデザインする際、CSSファイルを変更しても反映されないという経験をしたことがある人もいるかもしれません。

これは初心者に限らず、経験者でも発生する問題です。

本記事では、CSSの使い方から変更が反映されない原因や対処法まで、初心者でもわかるように詳しく解説します。

●CSSとは？

CSS（Cascading Style Sheets）は、HTML文書に対してスタイルを適用するためのスタイルシート言語です。

CSSを使用することで、HTML文書のスタイルを一括して変更できます。

●CSSの使い方

CSSを使うには、HTML文書内に<style>タグを使ってCSSコードを記述するか、外部のCSSファイルを読み込む必要があります。

例えば、次のように<style>タグを使用して、HTML文書内にCSSコードを記述することができます。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Sample</title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

この例では、<style>タグ内にh1要素に赤色を適用するCSSコードを記述しています。

このコードを実行すると、<h1>Hello, world!</h1>のテキストが赤色に変化します。

外部のCSSファイルを読み込む場合は、次のように<link>タグを使用してHTML文書にリンクを張ります。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

この例では、style.cssファイルにCSSコードを記述し、HTML文書で読み込んでいます。

●CSS変更が反映されない場合の原因と対処法

CSSファイルを変更したにも関わらず、Webサイトのデザインが変わらない場合は、次の原因が考えられます。

ファイルのキャッシュ

ブラウザは、Webサイトを表示する際にファイルをキャッシュすることがあります。

これは、同じWebサイトを再度訪問した場合に、ブラウザがファイルを再度ダウンロードする必要がなくなるため、ページの読み込みが速くなるためです。

しかし、キャッシュされたファイルが古い場合、最新のファイルに更新されません。

そのため、ブラウザのキャッシュをクリアする必要があります。

ファイルのパス

CSSファイルを読み込む際に、ファイルのパスが正しくない場合も変更が反映されません。

CSSファイルがHTMLファイルと同じディレクトリにある場合は、次のようにファイル名のみを指定することができます。

<link rel="stylesheet" href="style.css">

しかし、CSSファイルがHTMLファイルと異なるディレクトリにある場合は、相対パスまたは絶対パスを使用する必要があります。

相対パスは、現在のファイルの位置から見たファイルの位置を指定する方法です。

絶対パスは、Webサイトのルートから見たファイルの位置を指定する方法です。

スタイルの優先順位

CSSには、スタイルの優先順位があります。

スタイルの優先順位は、下記の順序で決定されます。

  • !importantを使用したスタイル
  • インラインスタイル
  • IDセレクタ
  • クラスセレクタ、属性セレクタ、擬似クラスセレクタ
  • タグセレクタ、擬似要素セレクタ

したがって、スタイルの優先順位が高いスタイルが存在する場合、変更が反映されないことがあります。

CSSの文法エラー

CSSには、正しい文法に従わない場合にエラーが発生する場合があります。

エラーがある場合、CSSファイル全体が無視されることがあります。

そのため、CSSファイルにエラーがないかを確認する必要があります。

●CSS変更が反映されない場合の対処法

ブラウザのキャッシュをクリアする

ブラウザのキャッシュをクリアするには、次の手順を実行します。

Google Chromeの場合：

  1. 右上の「…」をクリックして、[その他のツール] > [履歴]を選択します。
  2. [閲覧履歴を消去]をクリックします。
  3. [期間]を選択して、[キャッシュされた画像とファイル]にチェックを入れます。
  4. [データを消去]をクリックします。

Firefoxの場合：

  1. 右上の「≡」をクリックして、[オプション]を選択します。
  2. [プライバシーとセキュリティ]タブを選択します。
  3. [キャッシュ]セクションで、[今すぐクリア]をクリックします。

Safariの場合：

  1. [Safari] > [履歴を消去]を選択します。
  2. [全ての履歴]を選択します。
  3. [履歴を消去]をクリックします。
  4. ファイルのパスを確認する CSSファイルのパスが正しいかどうかを確認するには、以下の手順を実行します。
  • HTMLファイル内で、<link>タグのhref属性に指定されているCSSファイルのパスを確認します。
  • CSSファイルがHTMLファイルと同じディレクトリにある場合、ファイル名のみを指定していることを確認します。
  • CSSファイルがHTMLファイルと異なるディレクトリにある場合、相対パスまたは絶対パスが正しいかどうかを確認します。

スタイルの優先順位を確認する

スタイルの優先順位を確認するには、次の手順を実行します。

  • HTMLファイルとCSSファイルを開いて、該当するスタイルがあるかどうかを確認します。
  • スタイルの優先順位が高いスタイルが存在する場合、そのスタイルを変更する必要があります。

CSSの文法エラーを確認する

CSSの文法エラーを確認するには、次の手順を実行します。

  • CSSファイルを開き、エラーがあるかどうかを確認します。
  • エラーがある場合、正しい文法に修正します。

●応用例とサンプルコード

CSSの応用例とサンプルコードです。

ボタンのスタイルを変更する

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Button Style Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="my-button">Click Me!</button>
</body>
</html>

CSS

.my-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

ナビゲーションバーのスタイルを変更する

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Navigation Bar Style Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

CSS

nav {
  background-color: #333;
  overflow: hidden;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111;
}

背景色を変更する

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Background Color Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a sample page.</p>
</body>
</html>

CSS

body {
  background-color: #f2f2f2;
}

h1 {
  color: #333;
}

p {
  color: #555;
}

以上のように、CSSを使うことでWebサイトのデザインをカスタマイズすることができます。

ただし、変更が反映されない場合は、上記の対処法を試してみることをおすすめします。

また、CSSの応用例とサンプルコードを参考に、自分なりのデザインを作ってみましょう。