CSSにHTMLを読み込む方法とは？コードを用いて解説！
「CSSをHTMLに読み込む方法がわからない」
もしくは、
「CSSを読み込んでいるはずなのに、なぜか反映されない」
といった問題を抱えている方は多いのではないでしょうか？
この記事では、実際のコードとブラウザ上での実行結果の画面を使って、CSSをHTMLに読み込んで表示するまでを丁寧に解説します。
（コードはコピペで動かせるので、手を動かして勉強してみて下さい。）
この記事で、HTML&CSSの表示を完全にマスターしましょう！
エンジニアメンター
解説に入る前に
元なるHTMLのソースファイル
この記事では、共通のHTMLファイルにCSSでデザインを変更しながら解説を進めて行きます。
具体的には、<h1>見出しの「サンプルコード」の文字色をCSSで赤や青に変更する様子を確認します。
こちらが元となるHTMLのサンプルコードとブラウザ上での表示画面です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>サンプルコード</h1>
<p>HTMLファイルにCSSを読み込んでみましょう</p>
</body>
</html>
私はこのファイルの名前を「index1.html」としていますが、拡張子がhtmlであればファイル名は何でも構いません。
（「○○.html」というファイル名であればOKという意味です。）
現段階ではHTMLを読み込んでいるだけなので、文字の色は黒色です。
上に貼ってあるHTMLファイルindex1.htmlを実行したものです。
HTML・CSSの開発環境を整えよう【初心者にわかりやすく解説】
「独学でのプログラミング学習に苦戦していませんか？」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
HTMLにCSSを読み込む3つの方法
HTMLにCSSを読み込む方法は全部で３つあります。
- 外部ファイルに記述したCSSをHTMLファイルに読み込む
- インラインでCSSを反映したい要素のHTMLタグの中に書く
- HTMLファイルのstyleタグにCSSを書く
1つ目の方法は、HTMLを書くためのファイルとCSSを書くためのファイルを別々に分けるオーソドックスな方法です。
初心者の方でも、まずは一般的なこの方法で行いましょう。
外部のCSSをHTMLファイルに読み込む際、つまづく人が多いので、意識して記事を読んでみてください。
2つ目の方法は、HTMLファイル内のCSSを反映したい要素を囲んでいるタグにstyle属性を与え、その値としてCSSを書き込む方法です。
3つ目の方法は、HTMLファイルの<head>タグに<style>タグを設けて、<style>タグの要素としてCSSを記述する方法です。(headタグとは？)
解説に入る前に、「ある程度HTMLとCSSを分かっている」方に向けて、それぞれ方法とその書き方、CSSを読み込む際に優先される順番をまとめた表を貼っておきます。
これから３つの方法を実際のコードとブラウザ上での表示結果を使いながら、ひとつずつ丁寧に解説します。
コードはコピペで動くようになっているので、内容の理解を一番に意識してみて下さい。
方法1：外部のCSSファイルを読み込む
3つの方法の中で最も一般的な方法がこちらです。
HTMLファイルの他に外部にCSSファイルを作成しそれを読み込むという手順で行います。
この外部のCSSファイルを「stylesheet(スタイルシート)」と呼びます。
解説は、「HTMLファイルの解説」 → 「CSSファイルの解説」という順番でわかりやすく説明して行なっていきます。
HTMLのコードと解説
まず初めに、HTMLファイルの準備をしましょう。
テキストエディタを起動して、以下のコードをコピペしましょう。
初めに紹介したHTMLファイル（index1.html）の<head>部分に1行書き加えればいいだけなので非常に簡単です。
（変更点にハイライトを入れてあります。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>サンプルコード</h1>
<p>HTMLファイルにCSSを読み込んでみましょう</p>
</body>
</html>
<link rel=”stylesheet” href=”style1.css”>について
<head>部分に書き込んだこのコードは、外部ファイルを読み込むことを意味しています。
外部ファイルを読み込む際は<link>タグを使うことを押さえておきましょう。
（リンクを埋め込む際に<a>タグというタグを使いますが、全くの別物なので注意しましょう。）
rel属性は、読み込む対象とHTMLファイルの関係性（relationship）を表します。
HTMLファイルから見て、外部CSSはスタイルシートと呼ぶので、rel属性の値には “stylesheet” を与えます。
href属性の中には読み込む対象のCSSファイル名を記述します。
この場合、CSSファイル名は「style1.css」で私が名付けたCSSのファイル名です。
（こちらも拡張子がcssであれば、自由に命名してもかまいません。）
追加したこの行のコードが表す意味を一言でまとめると、
<「HTMLファイルにスタイルシート（外部のCSSファイルの総称）である、style1.cssを読み込みます」>
という解釈をすることが出来ます。
上記のコードを書き込むことができたら、「index1.html」という名前でHTMLファイルを一旦保存しましょう。
保存方法は[command+s]で保存画面が現れます。
(windowsの場合[control+s]です。)
(こちらも拡張子がhtmlであれば、自由に命名してもかまいません。)
CSSのソースファイルと解説
次に、HTMLファイルに読み込むCSSファイルを準備します。
テキストエディタを起動した状態で[command+N]を押します。
すると新しいシートが開くので、そこに以下の<h1>見出し「サンプルコード」の文字色を赤色に変えるコードをコピペします。
h1{
color: red;
}
このシートも、HTMLファイルと同じように保存をしましょう。
ファイル名は「style1.css」としています。
この時のCSSのファイル名は、HTMLの<link>タグ内に書かれている href=”style1.css”と同じ名前にしてください。(hrefとは？)
これで、HTMLファイルにCSSファイルを読み込むことができました！
HTMLファイルを開くと、<h1>の文字が赤くなっていることが確認できます。(見出しについて)
ブラウザ上での表示画面
HTMLファイル（index2.html）をブラウザ上で実行した結果がこちらになります。
うまく実行されない場合は・・・
HTMLファイル（index2.html）とCSSファイル（style1.css）は同じフォルダにおいてありますか？
2つのファイルが同じフォルダにない場合、HTMLファイルはCSSファイルを見つけることが出来ないので読み込むことができません。
2つのファイルが違うフォルダにある場合でも、HTMLファイルにCSSを読み込むことはできます。
興味がある方は、この記事の後半の「パスとは – 相対パスによるファイルの指定」を参考にして下さい。
より詳しくこの方法①を知りたい方は、以下の記事のSTEP4も参考にしてください。
【初心者向け】CSS（スタイルシート）基本の書き方を５ステップで解説
外部CSSを読み込むことのメリット
- 他の方法に比べてHTMLのコード量を減らすことができスッキリするので見やすい
- 複数のHTMLファイルに同じCSSを反映したいときに役立つ
外部CSSを読み込むことは、<link>タグ内で外部CSSのファイルを指定するだけなので1行で済みとても読みやすいコードになります。
また、複数のページから構成されるWebサイトを開発するときでも、同じCSSを反映させることができるので、一つ一つのページにデザインを施す必要がなくなり非常に便利です。
上記のメリットからか、外部CSSを読み込む方法は最も多く利用されます。
複数の方法を利用するときでも、まずは外部CSSファイルが一般的です。
方法2：HTMLのstyleタグにCSSを記述する
<style>タグ内でのCSSの書き方
この方法では、HTMLの<head>内に<style>タグを用意して、その中にCSSを書き込みます。
外部CSSを作る必要はなく、HTMLファイルに直接書き込みます。
HTMLのソースファイルとブラウザ上での表示画面
外部CSSに記述するCSSコードを<style>タグで囲むだけです。
最初のHTMLファイル（index1.html）との変更点にハイライトを入れてあります。
ファイル名を「tag.html」としていますが、拡張子がhtmlであればファイル名は何でも構いません。
（「〇〇.html」という風になればOKです。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
h1{color:purple;}
</style>
</head>
<body>
<h1>サンプルコード</h1>
<p>HTMLファイルにCSSを読み込んでみましょう</p>
</body>
</html>
styleタグにCSSを記述するメリット
1ページごとのデザインが可能
外部CSSを読み込む方法では複数のサイトに一括で同じデザインを反映できるというメリットがありました。
それに対し、<style>タグを用いる方法では、1ページごとにデザインを調整できる点が便利です。
方法3：インラインにCSSを記述する
インラインにCSSを記述する方法
この方法では、HTML内の装飾したい要素を囲むタグにstyle属性を与え、その値にCSSを書き込みます。
コードを基本構文は<タグ名 style = “プロパティ: 値”>です。
HTMLのソースファイルとブラウザ上での表示画面
インラインにCSSを記述している行にはハイライトをつけています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<h1 style="color:orange">サンプルコード</h1>
<p>HTMLファイルにCSSを読み込んでみましょう</p>
</body>
</html>
インラインでCSSを記述するメリット
要素ごとの細かいデザインの調整が可能
<style>タグは1ページごとにデザインを調整することが可能でした。
インラインに書く方法では、CSSを反映したいタグにピンポイントでデザインを施せるので、さらに細かい微調整が可能です。
「プログラミング学習に苦戦しているあなたへ」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料をGETしましょう！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
パスとは – 相対パスによるファイルの指定
HTMLファイルに別のフォルダにある外部CSSを読み込むためには相対パスの指定方法を理解する必要があります。
相対パスとは
相対パスとは、現在いるフォルダからの経路を表します。
具体的に言うと、HTMLファイルから見て読み込み対象のCSSファイルがどこにあるのかを示しています。
相対パスを指定することで、HTMLファイルは別のフォルダにあるCSSファイルを認識し、読み込むことができます。
相対パスの指定方法
相対パス指定の基本構文は、<link rel = “stylesheet” href = “フォルダ名/ ファイル名” >です。
外部CSSファイルは<link>タグで読み込むという点に変更はありません。
HTMLとCSSのソースファイルとブラウザ上での表示画面
私は先ほどまで、HTMLファイル（index2.html）とCSSファイル（style1.css）を同じフォルダに置いていました。
今、このフォルダ内にstylesheet_folderというフォルダを新たに作成し、その中にCSSファイル「style2.css」というファイルを作成します。
これが現在の、フォルダとファイルの関係を表した図です。
以下がHTMLファイル（index2.html）とCSSファイル（style2.css）のコード、そしてindex2.htmlをブラウザで表示した画像です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet_folder/style2.css">
<title>サンプル</title>
</head>
<body>
<h1>サンプルコード</h1>
<p>HTMLファイルにCSSを読み込んでみましょう</p>
</body>
</html>
h1{
color: blue;
}
【重要】CSSが読み込まれる際の優先順位
本記事で紹介した3つの方法を組み合わせて使う際に注意する点があります。
それぞれの方法で書いたCSSは読み込まれる際に優先順位が存在するということです。
優先順位が高い順番に並べると
- インラインに書かれたCSS
- HTMLのstyleタグ内に書かれたCSS
- 外部ファイルに書かれたCSS
となります。
たとえば、HTML内の同じ要素に外部CSSとインラインでそれぞれ別のCSSを記述した場合、インラインの方のCSSが優先されてブラウザ上に表示されます。
優先順位に関しては、細かいデザインを調整できるものほど高いと覚えておけばよいでしょう。
まとめ：結局どれを使えば良いか
これまで紹介した3つの方法の書き方と大まかな用途、先ほど紹介した優先順位をまとめた表がこちらになります。
最後に、3つの方法でどれを使えば良いかを解説します。
①外部CSSを作成する
まずは、外部のCSSを作成しましょう。
CSSの読み込みの優先順位が最も低く、複数のHTMLファイルにCSSを反映できるこの方法はデザインの大枠を決めることに適しています。
また、このことからか外部のCSSファイルを作成することは最も一般的な方法でもあります。
HTML＆CSSを勉強し始めたばかりの初心者の方は、当分外部CSSに記述する方法を知っているだけで充分です。
②<style>タグ、インラインに書きこむ方法
複数のページを含んだサイトを開発するようなときには、他の方法を使う必要があります。
外部CSSで大枠をデザインし、CSSを読み込む優先順位が高い<style>タグやインラインによる記法で上書きして細かいデザインを調整するわけです。
