タイトル・URLをコピー
記事タイトルCSSが反映されない場合の対処法(初心者向け)
記事URLhttps://digitor.jp/textbook/css-not-reflected/
記事タイトルCSSが反映されない場合の対処法(初心者向け)
記事URLhttps://digitor.jp/textbook/css-not-reflected/
POINTこの記事をざっくり言うと
CSSを、HTMLファイルに反映させる方法がわかる。
CSSが読み込めない場合の原因・対処法がわかる。
部分的にCSSが反映されない場合の原因・対処法がわかる。
こんにちは!
最近、WEB制作をはじめたばかりだけど「CSSが反映されない・・」「もう一度CSSが適用される基礎知識を知りたい・・!」「部分的にCSSが適用されない箇所がある・・」
そんな風にお困りの、初心者WEB製作者の方も多いのではないでしょうか?
CSSの適用は基礎ですが意外に多くの方がつまずいてしまう、最初の壁です。
今回はWEB制作初心者の方向けに「CSSがHTMLファイルに適用される方法3点」「CSSが反映されない場合の対処法」を中心に解説します。
CSSをHTMLファイルに適用させる方法
まずは基礎、CSSをHTMLファイルに適用させる方法から解説していきます。
適用方法がわかる方は読み飛ばして下さい。
CSSをHTMLファイルに適用させる方法は3点あります。
※3点のわかりやすいイラストレーター図
方法1:外部のCSSファイルを読み込む方法
HTMLの外にCSSファイルを作成し、読み込みます。
この外部のCSSファイルを「stylesheet(スタイルシート)」と呼びます。
手順1:HTMLファイルを準備
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> </head> <body> <h1>CSSを読み込み</h1> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> |
●<head>〜</head>内に、 <link rel=”stylesheet” href=”sample.css”>を記述
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> <link rel="stylesheet" href="sample.css"> </head> <body> <h1>CSSを読み込み</h1> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> |
●解説
ポイント1
6行目:<link rel=”stylesheet” href=”sample.css”>
この箇所がポイントです!
HTMLファイルの<head>〜</head>内に、 <link rel=”stylesheet” href=”sample.css”>
を記述する事で、外部CSSファイルを読み込みます。
今回のコードでは、外部CSSファイル「sample.css」を読み込んでいます。
ポイント2
<link rel=”stylesheet” href=”sample.css”>
rel属性は読み込むHTMLファイルとの関係性を表ます。
HTMLファイルから見て、外部CSSファイルはスタイルシートと呼ぶので、rel属性には”stylesheet”を指定します。
ポイント3
<link rel=”stylesheet” href=”sample.css”>
href属性の中に、読み込む対象のCSSファイル名を記述します。
今回の例では、「sample.css」を読み込んでいます。
手順2 CSSファイルを準備
HTMLファイルに読み込ませたいCSSファイルを準備
CSSサンプルコード
|
@charset "UTF-8"; h1{ color: red; } p { color: blue; } |
※解説
ポイント1
文字化けを防ぐ為のコード「@charset “UTF-8”;」を記入。
せっかくCSSが適応されても、文字化けを起こしてしまっては表示が崩れてします、必ず記載しましょう。
ポイント2
CSSを記載する。
今回はわかりやすく
h1{
color: red;
}
p{
color: blue;
}
を指定しました
ポイント3
CSSを記載し、ファイルを保存する。
保存する時ファイル名を、HTMLに記載した<link rel=”stylesheet” href=”〇〇.css”>
〇〇のファイル名と同じにする。
今回は、sample.cssなので保存するときはsample.cssというファイル名で保存する。
手順3:HTMLファイル・CSSファイルを同じフォルダ内に置く
手順2まででHTMLファイル・CSSファイルの作成が完了しました。
しかし、2つのファイルが同じフォルダにない場合、HTMLファイルは、
CSSファイルを見つける事ができません。
(※相対パスを変える事によって、2つのファイルが違うフォルダにあっても読み込む事ができる、のち程読み込めない場合の対策で解説)
sampleフォルダを作成し、index.html、sample.cssの2つのファイルを入れます。
これで下記のサンプルコード表示結果の様にh1が赤色、pが青色に変わっていれば、CSSファイルの適用に成功しています。
サンプルコード表示結果↓
CSSを読み込み
HTMLファイルにstyleタグを用いてCSSを記述する
方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法
HTMLの<head>タグ内に<style>タグを記述しCSSを記載していく方法です。
手順1:HTMLファイルを準備します。
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法2</title> </head> <body> <h1>CSSを読み込み</h1> <p>HTMLファイルにstyleタグを用いてCSSを記述する</p> </body> </html> |
手順2:headタグ内に<style>タグを記述する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法2</title> <style> h1{ color: red; } p { color: blue; } </style> </head> <body> <h1>CSSを読み込み</h1> <p>HTMLファイルにstyleタグを用いてCSSを記述する</p> </body> </html> |
これで下記のサンプルコード表示結果の様にh1が赤色、pが青色に変わっていれば、CSSの適用に成功しています。
サンプルコード表示結果↓
CSSを読み込み
HTMLファイルにstyleタグを用いてCSSを記述する
方法3:インラインにCSSを書く方法
インラインにCSSを直接記述します。
手順1HTMLファイルを準備
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法2</title> </head> <body> </body> </html> |
手順2インライン(HTMLタグに直接)CSSを記述する。
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法2</title> </head> <body> <h1 style="color: red;">CSSを読み込み</h1> <p style="color: blue;">HTMLファイルにstyleタグを用いてCSSを記述する</p> </body> </html> |
これで下記のサンプルコード表示結果の様にh1が赤色、pが青色に変わっていれば、CSSの適用に成功しています。
サンプルコード表示結果↓
CSSを読み込み
HTMLファイルにstyleタグを用いてCSSを記述する
CSSファイルが適用されない原因
ここまで、CSSをHTMLファイルに適用する方法3点紹介してきました。
この時点でCSSが適用されていない場合は、最初の設定が上手く行われていない為、この先続けてもCSSは適用されません。
CSSが適用されない各方法の原因を紹介します。
方法1:外部のCSSファイルを読み込む方法
[CSSが読み込めない場合の主な原因]
外部CSSファイルが読み込まれない原因は主に3点あります。
原因
①記述場所が違う。
HTMLの<head>〜</head>内に<link rel=”stylesheet” href=”ファイル名.css”>が記載されているか、今一度確認をお願いします。
記述場所が違うと表示されません。
原因
②スペルミス
ファイル名、link rel、hrefなど該当箇所にスペル場違いがないかを、今一度確認してみて下さい。スペルが1字でも違うとCSSファイルは反映されません。
原因
③相対パスが違う
これが最も多い原因です。
ここまでの解説では、同じフォルダ内にHTMLファイル、CSSファイルを置き、CSSファイルをHTMLファイルに読み込ませました。
下記写真sampleフォルダ内に、index.html sample.css
しかし同じフォルダ内にファイルがなくても相対パスという概念を知ればCSSファイルを適用させる事ができます。
●相対パスとは
相対パスとは、現在のファイル場所を基準とし、読み込むファイルがどこにあるのかを指示する方法です。
①sampleフォルダ内に、index.html、sample.cssがある
②sampleフォルダ内にCSSフォルダ、index.htmlファイルがありCSSフォルダ内に、CSSファイルがある
この2つは相対パスが違うため、<link rel=”stylesheet” href=”ファイル名.css”>の記述では、①しか表示できません。
逆にいうと相対パスの指定を②を表示するための指定に変えれば、②を表示する事ができます!
●相対パスの指定の仕方
<link rel = “stylesheet” href = “フォルダ名/ファイル名”>
と記述します。
HTMLファイルから見ると、CSSファイルは「CSSフォルダ」の1つ上の階層に保存されています。
つまり<link rel = “stylesheet” href = “CSS/style.css”>
と相対パスを記述する事で、CSSファイルが表示されます。
この階層の違いを理解していない為、正しく表示されない場合が多いです。
WEB制作を行う上では、相対パスの理解が必須となります。(写真などの表示も相対パスの理解が必要)
より相対パスについて詳しく知りたい方は下記を参考にしてみて下さい。
https://wp-p.info/tpl_rep.php?cat=html-biginner&fl=r12
方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法[CSSが読み込めない場合の主な原因]
主な原因は2つあります。
原因
①記述場所が違う。
HTMLの<head>タグ内に<style>タグを記述しているか今一度確認してみて下さい。
原因
②スペルミス
クラス名やプロパティなど該当箇所にスペルミスがないか、今一度確認してみて下さい。
方法3:インラインにCSSを書く方法で
[cssが読み込めない主な原因]
主な原因は2つあります。
原因
①記述場所が違う。
適用させたいインラインにCSSを記述しているか今一度確認してみて下さい。
原因
②スペルミス
クラス名やプロパティなど該当箇所がスペルミスしていないか、今一度確認してみて下さい。
部分的にCSSが適用されない
最初の設定は上手くできたが、途中から、部分的にCSSが適用されない原因と
CSSが効いていていない原因を調べるため、検証(デベロッパーツール)の使用方法を解説します。
デベロッパーツール
デベロッパーツールとは、無料で使用できる開発者ツールで、HTMLやCSSのコードをチェックできるツールです。
デベロッパーツールの使い方
表示画面上で右クリックを押し、検証をおす
適用を確認したい箇所をクリック
適用を確認
デベロッパーツールでの確認をする事で、CSSが適用されているかなど
原因を発見する事ができます。
反映されない原因
キャッシュが残っている
表示されている画面が最新でない可能性があります。
キャッシとは、1度開いたWEBページのデータをブラウザに保存しておき、次に同じページを開くときに、表示速度をあげてくれる仕組みの事です。
つまりキャッシュ(過去のデータ)が残り、過去の画面のまま更新されていなければ、CSSは反映されていない状態になります。
●対処法
スーパーリロードを行う。
スーパーリロードとは、キャッシュを捨て、最新のデータを読み込む様にしてくれる方法です。
ショートカットキーは、
windows:ctlキーとF5キーを同時押し
Mac: coommandキーshiftキーとRキーを同時長押しをする事で行えます。
文法のミス
そもそも文法にミスがあるとCSSは反映されません。
基本文法は5点。
5点の文法をチェックしてみて下さい
1.セレクタ
2.プロパティ
3.値
4.「;」もれ
5.}の閉じ忘れ
スペルミス
スペルミスもよくあるCSSが効かない原因の一つです。
他のスタイルより優先順位が低い
CSSの優先順位を上げるには、2つの方法があります。
①セレクタを詳しく指定する。②適用したいコードをCSSファイルの下に書く。
順番解説していきます。
①セレクタを詳しく指定する。
p {color: blue;} だけの指定よりも .example p {color: green;}の指定の方が、より詳しくセレクタが設定されるため、優先順位が上がります。
CSSが効かない場合は、より詳しくセレクタを設定する事で優先順位を上げる事ができ解決できる場合があります。
②適用したいコードをCSSファイルの下に書く。
CSSファイルは順番に上から下へと読み込まれます。
下記のコードの例では、h1には、ファイルの下にあるcolor:greenが適用されます。
まとめ
今回はWEB制作初心者の方向けに「CSSがHTMLファイルに適用される方法3点」「CSSが反映されない場合の対処方」を中心に解説してきました。
ポイントをまとめます。
●CSSをHTMLファイルに読み込む方法3点と読み込めない場合の対処法
方法1:外部のCSSファイルを読み込む方法
方法1で、CSSファイルを読み込めない主な原因は、ファイルのパスが違う
方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法
方法2で、CSSを読み込めない主な原因は、スペルミス、記述箇所
方法3:インラインにCSSを書く方法
方法2で、CSSを読み込めない主な原因は、スペルミス、記述箇所
●部分的にCSSが効いていない場合の対処法
・デベロッパーツールで確認
・キャッシュが残っていないかをチェックする
・文法・スペルミスがないか確認する
・他のスタイルより優先順位が低く、適用されていないかを確認する
いかがだったでしょうか?
WEB制作を行う上で、CSSは欠かせません。
CSSが効かないのには必ず理由があります、本記事を参考にしていただき、改善できたら幸いです。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルCSSが反映されない場合の対処法(初心者向け)
記事URLhttps://digitor.jp/textbook/css-not-reflected/
記事タイトルCSSが反映されない場合の対処法(初心者向け)
記事URLhttps://digitor.jp/textbook/css-not-reflected/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。