Webサイト構築の基本「HTML」と「CSS」の関係性と、HTMLでCSSを読み込む方法を簡潔に解説します。
HTMLはページの情報を構造化するのに対して、CSSはHTMLで構成されたページのデザインを変更する役割を持っていますが、両者は別々の言語です。
このページでは、HTMLとCSSの２つを関連づける方法を解説します。適宜必要となる前提知識や詳細ページへのリンクもすべてこのページから参照できます。
- HTMLとCSSの関係性について―詳細ページへのリンクあり！
- ①HTMLの属性「style」にCSSを直接埋め込む方法
- ②styleタグを使ってCSSを埋め込む方法
- 【最もポピュラー】③外部のstyleシートを読み込む方法
フロントエンドのエンジニアを目指す方や、少しでもHTML/CSSに関わる方であれば知らないと恥ずかしい超・基礎知識ばかりですので是非最後までご覧ください。
【前提】HTMLとCSSの役割・関係性
HTML
- 文字や画像をマークアップ（意味付け）する
- ページ全体の情報を構造化して整理する役割
CSS
- HTMLで構成されたページのデザインの変更
Webページは、HTML（文章構造）とCSS（ページのデザイン）で成り立ちます。
HTMLだけで書かれたページに、CSSを適用することで鮮やかなページが出来上がります。サンプルコード付きでHTMLだけで構成されたページとCSSが適用された後のページを見比べたい方は、こちらの記事をご覧ください。
HTMLにCSSを読み込ませる方法
HTMLにCSSを読み込ませる方法は全部で３つあります。
- HTMLのstyle属性にCSSを直接記述する
- styleタグを利用してHTMLにCSSを直接記述する
- linkタグを利用して外部のCSSファイルを読み込ませる
それぞれサンプルコードつきで詳しく解説します。HTMLのタグやタグの属性など、聞きなれない言葉も適宜リンクを載せますのでご安心ください。
style属性にCSSを埋め込む（インラインCSS）
まず１つ目はタグのstyle属性に直接CSSを記述する方法です。この方法は「インラインCSS」と呼ばれます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSの読み込み①</title>
</head>
<body>
<p style="color:blue;">ビズドットオンライン</p>
<p>ビズドットオンライン</p>
</body>
</html>ブラウザの表示結果
インラインCSSは、ご覧のようにタグのstyle属性に埋め込む形をとるため局所的なデザインの変更に向いています。
デメリットとしては、逆に「局所的なデザインの変更しかできない」ということになります。
試しに、どんな感じにデザインが変更されるのか？を知りたいときに使いやすいのですが、それ以外の部分で利用しているシーンをあまり見かけません。
HTMLの属性という言葉にピンとこない方はこちらのページをご覧ください。
styleタグの中にCSSを埋め込む
２つ目の方法は、styleタグの中にCSSを埋め込む方法です。
HTMLファイルのheadタグの中の「styleタグ」の中に、CSSを埋め込みます。
インラインCSSとは異なり、セレクタを利用することができるため適用範囲が広がります。ただし、まだこれでも局所的です。なぜなら、埋め込んだHTML内にしかCSSが適用されないためです。
もし、サイト全体（複数のHTMLファイルから構成）にCSSを適用させたい場合には、次に紹介する「外部CSSファイルを読み込む」方法を利用する必要があります。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSの読み込み②</title>
<style>
.test{color:red;}
</style>
</head>
<body>
<p class="test">ビズドットオンライン</p>
<p>ビズドットオンライン</p>
</body>
</html>ブラウザ表示結果
linkタグを用いて外部CSSファイルとリンクさせる
３つ目が最もポピュラーな方法です。
これは、headタグ内にlinkタグを埋め込み、読み込みたいCSSファイルを指定する方法です。
HTMLがブラウザに表示されるタイミングで、紐づけられたCSSファイルも同時に読み込まれるようになります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSの読み込み③</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="test">ビズドットオンライン</p>
<p>ビズドットオンライン</p>
</body>
</html>CSS
.test{
color:red;
}ブラウザの表示結果
実際に、実務で利用する場合は、この「外部のCSSファイルを読み込む」方法をとることが圧倒的に多いです。
理由は、CSSの記述が１か所で済むためです。方法１、２の場合はデザインを変更したい部分の数に応じてCSSを記述する必要があるのに対して、方法３をとればCSSの読み込みだけすればOKなので、都度CSSを記述する必要がなくなるのです。
もし「ページ全体のデザインを変更したい！」というときに、CSSを１か所にまとめていれば変更箇所も１か所で済むため非常に効率的です。
インラインCSS/styleタグ/外部CSSの優先順位と使い分け
さて、最後に３つの方法の使い分けについて補足しておきたいと思います。
優先順位
例えば、同じpタグに①インラインCSSでは「青」が、styleタグの中では「赤」が、そして外部CSSに「黄色」が指定されていたとします。
この場合、実際にブラウザに表示されるのは何色になるでしょうか？
答えは「青」になります。
１位：インラインCSS
２位：styleタグの中に埋め込まれたCSS
３位：外部CSSに記述されたCSS
CSSは、局所的であればあるほど優先される仕様です。
「CSSを適用したのに、なぜかデザインが変わらない・・・。」そんなときは、この優先順位が影響している可能性があります。もし、デザインが適用されない事象が起きたら、まずはそのCSSがどこに記述されているか？を確認してみるようにしましょう！
使い分け
したがって、CSSを読み込ませる３つの方法は以下のように使い分けることが一般的であると言えます。
①Webサイト全体のデザインを変更したい場合
⇒外部CSSファイルの読み込み【方法３】
②１つのページのデザインだけを変更したい場合
⇒headタグ内のstyleタグ内にCSSを記述する【方法２】
③特定の１か所だけを変更したい場合
⇒style属性に直接記述する【方法３】
以上を意識した使い分けができるようになると、メンテナビリティが高いWebサイトの構築が可能になります。
HTML/CSSを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
