HTMLファイルへのCSS読み込み方法を徹底解説【コピペで使える】 | プログラミング入門ならWEBCAMP NAVI
【11月枠も残りわずか】転職保証コース

HTMLファイルへのCSS読み込み方法を徹底解説【コピペで使える】

「CSSをHTMLに読み込む方法がわからない」
もしくは、
「CSSを読み込んでいるはずなのに、なぜか反映されない」
といった問題を抱えている方は多いのではないでしょうか?

この記事では、実際のコードとブラウザ上での実行結果の画面を使って、CSSをHTMLに読み込んで表示するまでを丁寧に解説します。
(コードはコピペで動かせるので、手を動かして勉強してみて下さい。)

この記事で、HTML&CSSの表示を完全にマスターしましょう!

解説に入る前に

元なるHTMLのソースファイル

この記事では、共通のHTMLファイルにCSSでデザインを変更しながら解説を進めて行きます。

具体的には、<h1>見出しの「サンプルコード」の文字色をCSSで赤や青に変更する様子を確認します。

こちらが元となるHTMLのサンプルコードとブラウザ上での表示画面です。

index1.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を読み込む3つの方法

HTMLにCSSを読み込む方法は全部で3つあります。

HTMLにCSSを読み込む3つの方法
1.外部ファイルに記述したCSSをHTMLファイルに読み込む

2.HTMLファイルのstyleタグにCSSを書く

3.インライン:CSSを反映したい要素のHTMLタグの中に書く

1つ目の方法は、HTMLを書くためのファイルとCSSを書くためのファイルを別々に分ける方法です。
外部のCSSをHTMLファイルに読み込む際、つまづく人が多い気がするので、意識して記事を読んでみてください。

2つ目の方法は、HTMLファイルの<head>タグに<style>タグを設けて、<style>タグの要素としてCSSを記述する方法です。

3つ目の方法は、HTMLファイル内のCSSを反映したい要素を囲んでいるタグにstyle属性を与え、その値としてCSSを書き込む方法です。

解説に入る前に、「ある程度HTML&CSSを分かっている」方に向けて、それぞれ方法とその書き方、CSSを読み込む際に優先される順番をまとめた表を貼っておきます。

hyou.jpg

これから3つの方法を実際のコードとブラウザ上での表示結果を使いながら、ひとつずつ丁寧に解説します。
コードはコピペで動くようになっているので、内容の理解を一番に意識してみて下さい。

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

この方法では、HTMLファイルのほかにCSSを記述するためのファイルを作成します。
外部のCSSファイルをstylesheet(スタイルシート)と呼びます。

解説は、「HTMLファイルの解説」 → 「CSSファイルの解説」という手順で行います。

HTMLのコードと解説

初めに紹介したHTMLファイル(index1.html)に1行書き加えればいいだけなので非常に簡単です。
(変更点にハイライトを入れてあります。)

style1.cssというのは、私が名付けたCSSのファイル名です。
(こちらも拡張子がcssであれば、自由に命名してもかまいません。)

index1.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style2.css">
    <title>サンプル</title>
</head>
<body>
    <h1>サンプルコード</h1>
    <p>HTMLファイルにCSSを読み込んでみましょう</p>
</body>
</html>

私は、このファイルを「index2.html」と名付けています。
これから新たに追加された1行の意味を解説します。

<link rel=”stylesheet” href=”style1.css”>について

まず、外部ファイルを読み込む際は<link>タグを使うことを押さえておきましょう。
(リンクを埋め込む際に<a>タグというタグを使いますが、全くの別物なので注意しましょう。)

rel属性は、読み込む対象とHTMLファイルの関係性(relationship)を表します。
HTMLファイルから見て、外部CSSはスタイルシートと呼ぶので、rel属性の値には “stylesheet” を与えます。

href属性の中には読み込む対象のCSSファイル名を記述します。

追加したこの行のコードが表す意味を一言でまとめると、

<「HTMLファイルにスタイルシート(外部のCSSファイルの総称)である、style1.cssを読み込みます」

という解釈をすることが出来ます。

CSSのソースファイルと解説

HTMLファイルに読み込むためのCSSファイルがこちらになります。
<h1>見出し「サンプルコード」の文字色を赤色に変えるコードです。
ファイル名は「style1.css」としています。

style1.css
h1{
    color: red; 
}

ブラウザ上での表示画面

HTMLファイル(index2.html)をブラウザ上で実行した結果がこちらになります。

うまく実行されない場合は・・・

HTMLファイル(index2.html)とCSSファイル(style1.css)は同じフォルダにおいてありますか?
2つのファイルが同じフォルダにない場合、HTMLファイルはCSSファイルを見つけることが出来ないので読み込むことができません。

2つのファイルが違うフォルダにある場合でも、HTMLファイルにCSSを読み込むことはできます。
興味がある方は、この記事の後半の「パスとは – 相対パスによるファイルの指定」を参考にして下さい。

外部CSSを読み込むことのメリット

最後に、外部CSSを読み込むことのメリットを紹介します。

他の方法に比べてHTMLのコード量を減らすことができスッキリするので見やすい

<link>タグ内で外部CSSのファイルを指定するだけなので、1行で済みます。

複数のHTMLファイルに同じCSSを反映したいときに役立つ

例えば、複数のページから構成されるWebサイトを開発するときに便利です。
通常Webサイトは同じデザインのページを含みます。
この時、外部CSSファイルを一つ作っておけば、読み込みは1行で済むのでラクです。
一つ一つのページにデザインを施すのは非効率極まりないです。

まずは外部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です。)

tag.html
<!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を記述している行にはハイライトをつけています。

inline.html
<!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を反映したいタグにピンポイントでデザインを施せるので、さらに細かい微調整が可能です

パスとは – 相対パスによるファイルの指定

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」というファイルを作成します。

folder.jpg

これが現在の、フォルダとファイルの関係を表した図です。

以下がHTMLファイル(index2.html)とCSSファイル(style2.css)のコード、そしてindex2.htmlをブラウザで表示した画像です。

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>
style2.css
h1{
  color: blue;
}

【重要】CSSが読み込まれる際の優先順位

本記事で紹介した3つの方法を組み合わせて使う際に注意する点があります。
それぞれの方法で書いたCSSは読み込まれる際に優先順位が存在するということです。

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

  1. インラインに書かれたCSS
  2. HTMLのstyleタグ内に書かれたCSS
  3. 外部ファイルに書かれたCSS

となります。

たとえば、HTML内の同じ要素に外部CSSとインラインでそれぞれ別のCSSを記述した場合、インラインの方のCSSが優先されてブラウザ上に表示されます。
優先順位に関しては、細かいデザインを調整できるものほど高いと覚えておけばよいでしょう。

まとめ:結局どれを使えば良いか

これまで紹介した3つの方法の書き方と大まかな用途、先ほど紹介した優先順位をまとめた表がこちらになります。

hyou.jpg

最後に、3つの方法でどれを使えば良いかを解説します。

①外部CSSを作成する

まずは、外部のCSSを作成しましょう。
CSSの読み込みの優先順位が最も低く、複数のHTMLファイルにCSSを反映できるこの方法はデザインの大枠を決めることに適しています。
また、このことからか外部のCSSファイルを作成することは最も一般的な方法でもあります。

HTML&CSSを勉強し始めたばかりの初心者の方は、当分外部CSSに記述する方法を知っているだけで充分です。

②<style>タグ、インラインに書きこむ方法

複数のページを含んだサイトを開発するようなときには、他の方法を使う必要があります。
外部CSSで大枠をデザインし、CSSを読み込む優先順位が高い<style>タグやインラインによる記法で上書きして細かいデザインを調整するわけです。

11月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%