記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

CSSをHTMLに読み込む方法+読み込めない場合の原因・対処法も詳しく解説! (初心者向け)

CSSをHTMLに読み込ませ反映させる事は、web制作を始める第1歩。しかし最初につまずいてしまう人も多いポイントです。そこで今回はCSSファイルを読み込ませる基礎知識、具体的な方法3点、読み込まれない場合の対処法について詳しく解説します。

カテゴリ: HTML/CSS

こんにちは!
CSSをHTMLに読み込みこませたいけれど、「方法がわからない・・」 読み込んでいるはずなのに、「上手く反映されない・・」
CSSをHTMLに読み込ませたいけど上手くいかずに困っている、そんな初心者WEB制作者の方も多いのではないでしょうか?
CSSを読み込ませる事ができなければ、WEBサイトをCSSで装飾する事ができません。
わたしも、はじめたばかりの頃は全く上手くいかずに悩んでました!

今回は、そんな初心者のかた向けに、CSSをHTMLに読み込む方法・ 読み込めない場合の原因・対処方を詳しく説明していきます。

CSSをHTMLファイルに読み込ませるには

CSSをHTMLファイルに読み込ませる方法は3点あります。

順番に解説していきますが、「1番目の方法1が最もオススメの方法」となります。
時間がない方は1番目の方法だけみて下さい。
それでは各方法に加えて、「読み込まれない場合の原因・対処法」「メリット・デメリット」も解説していきます。

方法1:外部のCSSファイルを読み込む方法

※一番オススメの方法

HTMLの外にCSSファイルを作成し、読み込みます。
この外部のCSSファイルを「stylesheet(スタイルシート)」と呼びます。

●手順1:HTMLファイルを準備

HTMLファイルについて詳しく知りたい方は下記を参考にして下さい。

http://www.htmq.com/tutorial/02_1.shtml

サンプルコード

※<head>〜</head>内に、 <link rel=”stylesheet” href=”sample.css”>を記述

※解説
ポイント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=”sample1.css”>
rel属性は読み込むHTMLファイルとの関係性を表ます。
HTMLファイルから見て、外部CSSファイルはスタイルシートと呼ぶので、rel属性には”stylesheet”を指定します。

ポイント3
<link rel=”stylesheet” href=”sample.css”>
href属性の中に、読み込む対象のCSSファイル名を記述します。
今回の例では、「sample.css」を読み込んでいます。

●手順2 CSSファイルを準備
HTMLファイルに読み込ませたいCSSファイルを準備
CSSファイルについて詳しく知りたい方は、下記を参考にして下さい。

https://web-camp.io/magazine/archives/29505

CSSサンプルコード

※解説
ポイント1
文字化けを防ぐ為のコード「@charset “UTF-8”;」を記入。
せっかくCSSが適応されても、文字化けを起こしてしまっては表示が崩れてします、必ず記載しましょう。

ポイント2
CSSを記載する。
今回はわかりやすく
h1{
color: red;
}

p{
color: blue;
}
を指定しました

ポイント3
CSSを記載し、ファイルを保存する。
保存する時ファイル名を、HTMLに記載した
〇〇のファイル名と同じにする。
今回は、sample.cssなので保存するときはsample.cssというファイル名で保存する。

●手順3:HTMLファイル・CSSファイルを同じフォルダ内に置く

手順2まででHTMLファイル・CSSファイルの作成が完了しました。
しかし、2つのファイルが同じフォルダにない場合、HTMLファイルは、
CSSファイルを見つける事ができません。
(※相対パスを変える事によって、2つのファイルが違うフォルダにあっても読み込む事ができる、のち程読み込めない場合の対策で解説)

sampleフォルダを作成し、index.html sample.cssの2つのファイルを入れます。
下記参考写真

サンプルコード表示結果

サンプルコード表示結果↓

CSSを読み込み

方法1:外部のCSSファイルを読み込む

上記の様に表示されていればCSSが適用されています。
ここまで基礎編でした。

次はCSSが読み込まれない原因、相対パスについて解説していきます。

外部のCSSファイルを読み込む方法
[CSSが読み込めない場合の主な原因]

色々なサイトを見てやってみたけど、「やぱっりCSSファイルが読み込めない・・」というかた向けに原因を解説していきいます。

○外部CSSファイルが読み込まれない原因は主に3点あります。

原因①記述場所が違う。
HTMLの<head>〜</head>内に<link rel=”stylesheet” href=”ファイル名.css”>が記載されているか、今一度確認をお願いします。
記述場所が違うと表示されません。

原因②スペルミス
ファイル名、link rel、hrefなど該当箇所にスペル場違いがないかを、今一度確認してみて下さい。スペルが1字でも違うとCSSファイルは反映されません。

原因 ③相対パスが違う
これが最も多い原因です。
ここまでの解説では、同じフォルダ内にHTMLファイル、CSSファイルを置き、CSSファイルをHTMLファイルに読み込ませました。

しかし同じフォルダ内にファイルがなくても相対パスという概念を知ればCSSファイルを適用させる事ができます。

※相対パスとは 相対パスとは、現在のファイル場所を基準とし、読み込むファイルがどこにあるのかを指示する方法です。

下記sampleフォルダ内に、index.html、cssファイルがある。

下記sampleフォルダ内に、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

外部CSSを読み込む方法[メリット]

・複数のHTMLファイルに同じCSSファイルを反映できるので、同じデザインなら、CSSファイル一つで
 同じデザインを適用・変更できる。

・1ページだけ違うデザインにしたい場合でも、書き換えずに違うCSSファイルを作成し適用できる。

・外部CSSファイルから、さらに別のCSSファイルを読み込む事ができる。

方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法

HTMLのタグ内に[style]タグを記述しCSSを記載していく方法です。
●手順1:HTMLファイルを準備します。

●手順2:headタグ内に[style]タグを記述する。

サンプルコード表示写真

サンプルコード表示結果↓

CSSを読み込み

HTMLファイルにstyleタグを用いてCSSを記述する

※解説
HTMLの<head>タグ内に<style>タグを記載し、CSSを記述する事でCSSを反映する事ができています。

HTMLファイルにstyleタグを用いてCSSを記述する方法[CSSが読み込めない場合の主な原因]

主な原因は2つあります。

原因①記述場所が違う。
HTMLの<head>タグ内に<style>タグを記述しているか今一度確認してみて下さい。

原因②スペルミス
クラス名やプロパティなど該当箇所にスペルミスがないか、今一度確認してみて下さい。

方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法   [メリット・デメリット]

メリット
・HTMLファイル内でしか適用されないので、1ページごとデザインを変えたい時には便利です。

デメリット
・HTMLファイル内で書かれたCSSは、そのファイル内でしか適用されない為、他のHTML
 ファイルからCSSを読み込む事ができない。

方法3:インラインにCSSを書く方法

インラインにCSSを直接記述します。

○手順1 HTMLを準備

○手順2 インライン(HTMLタグに直接)CSSを記述する。

サンプルコード表示結果

サンプルコード表示結果↓

CSSを読み込み

HTMLファイルにstyleタグを用いてCSSを記述する

インラインにCSSを書く方法で [CSSが読み込めない主な原因]

主な原因は2つあります。

原因①記述場所が違う。
適用させたいインラインにCSSを記述しているか今一度確認してみて下さい。

原因 ②スペルミス
クラス名やプロパティなど該当箇所がスペルミスしていないか、今一度確認してみて下さい。

インラインにCSSを書く方法 [メリット・デメリット]

メリット
・一部のデザインだけを変えたい時に便利です。

デメリット
・CSSが記述されたタグ内でしか、CSSが適用されません。
 複数タグに同じCSSを適用させたい場合、各タグにCSSを記載しなければなりません。

CSSが読み込まれる優先順位

ここまでCSSを読み込む方法を3種類紹介してきました。
CSSは書き方によって適用される優先順位があります。

優先順位が高い順に並べると

①インラインにCSSを書く(方法3)

②HTMLファイルにstyleタグを用いてCSSを記述する(方法2)

③外部のCSSファイルを読み込む(方法1)

この順番でCSSが適用されます、HTMLタグに近いCSSから読み込まれると覚えておきましょう!
方法は3点ありますが、方法1で紹介した「外部のCSSファイルを読み込む方法」がもっともオススメの方法です。
理由は
①複数のHTMLに同じCSSファイルを反映できるので、同じデザインなら、
 CSSファイル一つでデザインを適用・変更できる。

②1ページだけ違うデザインにしたい場合でも、書き換えずに違うCSSファイルを作 成し適用できる。

③外部CSSファイルから、さらに別のCSSファイルを読み込む事ができる。
 などメリットが多く、一番多く使用されている為です。

まとめ

CSSをHTMLに読み込む方法3点・各方法でCSSが読み込めない場合の原因を紹介してきました。
最後にポイントをまとめます。

CSSをHTMLに読み込む方法3点
方法1:外部のCSSファイルを読み込む方法

方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法

方法3:インラインにCSSを書く方法

CSSをHTMLに読み込目ない主な原因
原因1:CSSを読み込むタグの記述場所が違う
原因2:スペルミス
原因3:相対パスが違う

いかがだったでしょうか?
今回は、CSSをHTMLに読み込む方法と、読み込めない場合の主な原因を解説してきました。もし読み込めない場合は、各方法の読み込めない原因を確認してみると読み込むことができるでしょう。
ぜひ活用してみて下さい!

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。