• HOME
  • HTML/CSS
  • CSSをHTMLに埋め込む方法3選と、その特徴
  • HTML/CSS
  • css
  • html
  • programming
  • 初心者

CSSをHTMLに埋め込む方法3選と、その特徴

CSSをHTMLに埋め込む方法3選と、その特徴

CSSを適用させる際、初学者のときに特にありがちな現象として、『CSSってどこに書けばいいんだっけ』と記述場所に悩むことがありませんか？

しかも検索をかけるとパターンがたくさんでてきて、結局どれを選ぶのが正解なのかが分からなくなります。

制作の前段階からそこに時間を割くのはもったいないですよね。

そんな方向けに、今回は3つに絞って記述方法をご紹介し、結局どれがおすすめなのかまで解説したいと思います。

結局のところどこがいいのか

結論からですが、現在CSSの記述場所として最適なのは、やはり外部ファイルからの読み込みになると思います。

Web制作というのは複数人で開発する場合もあります。仮にそのときは1人で制作を行っても、何年後かにサイトをリニューアルしたいと思った際に自分ではなく他の人が携わる場合もあります。

そういった、自分以外の人が見ても分かりやすく書く、というのがCSSの必須条件です。

Sassというものを使用して、より見やすく設計するのにも外部ファイルとして読み込む必要があるのでやはりそれ一択ということになります。

とはいえ、逆に自分がサイトのリニューアルに携わるときに、前任の方が他の書き方を行っている場合を想定し、他の記述方法のパターンも頭に入れておきましょう。

外部ファイルとして読み込む方法

まず始めに、もっともおすすめする記述方法からご紹介したいと思います。

ファイル構成は下図のようにしています。

元のフォルダにindex.htmlとcssフォルダを用意し、cssフォルダの中にstyle.cssというファイルを作ります。

そして、下記のようにindex.htmlに記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>CSSを適用させてみよう！</h1>
  </body>
</html>

このコードの、<link rel=”stylesheet” href=”css/style.css”>と書かれている部分でcssを読み込んでいます。

『href=』から後ろがcssファイルの場所を示します。

記述しているHTMLファイルからみて、同じフォルダ内のcssフォルダの中にstyle.cssファイルがありますよ、という意味になります。

では、style.cssファイルにh1タグの色を変えるコードを書いてみましょう。

h1 {
  color: red;
}

上のように記述してみてください。すると、ブラウザでの表示は次のようになります。

このように、CSSがうまく適用できていれば、h1タグの色が赤色になっていることが確認できます。

headタグ内に記述する方法

次は、headタグ内に記述する方法です。

headタグというのは、index.htmlファイル内の<head></head>と書かれている部分に囲まれた中ですね。

実際に書いたものがこちら

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style type="text/css">
    h1 {
      color: blue;
    }
  </style>
  <title>Document</title>
</head>

<style type=”text/css”>h1{color:blue;}</style>と書かれている部分でCSSを適用させています。

結果は下図のように、h1タグの中身が青色になってます。

これで適用できている事が確認できました。

タグ内に直接記述する方法

次は、特定の要素だけピンポイントで適用させる方法です。書き方は下記の通り。

<h1 style="color: green">CSSを適用させてみよう！</h1>

このように、h1の開始タグ内にstyle=”color:green;”と記述することで適用できます。

ブラウザでの表示は下図の通りです。

ちゃんと緑色になっている事が確認できましたでしょうか。

【検証】3つの方法を同時に記述したらどれが適用される？

ここで、今までご紹介した3つをすべて適用させるとどれが反映されるのかについて見てみましょう。

適用させて見た結果が下図です。

緑色になってますね。つまり、タグ内に記述する方法が一番優先度が高い事になります。

ちなみに3つの関係は以下の通りです。

タグ内に記述 > head内に記述 > 外部ファイルに記述

という順番になります。

ここから分かる通り、外部ファイルに記述するのが一般的なのに優先度は一番低く、適用されにくいという性質があります。

そのため、コード量が増えれば増えるほど、書き方がバラバラだと思った通りにCSSを反映できません。

そうならないように、CSSはhtmlファイルには極力記述せず、外部ファイルから読み込むということを徹底しましょう。

まとめ

いかがでしたでしょうか。こんなにややこしくなるなら、記述場所は1か所しか適用されないように統一してくれればいいのに、、、と思われるかもしれませんね。

しかし、タグ内に記述する方法は、場合によっては使用することもあるのです。しかしそれはまだ先の話になると思います。

どうしてもタグ内に書かないといけなくなる状況は出てくると思いますので、そのときに優先度を考慮しながら整合性の取れたコードが記述できるレベルに達してればそれでよいと思います。

今はまだ『CSSは外部ファイルから読み込む』ことだけ覚えてもらえると幸いです。

こういったWeb制作業界におけるセオリーというのも多々あるので学んでいく中で徐々に身につけて行きましょう。