CSSはどこに書く？外部CSSファイルの読み込み方＆インラインでの書き方

方法１：外部ファイルから読み込む

1つめの方法は、外部ファイルのCSSから読み込む方法です。つまり、CSSファイルを別に作り、HTMLファイルから読み込むということです。この作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれます。ウェブサイトを作る時にはこれが最も一般的な方法です。

ブラウザがウェブページを読み込む＝HTMLファイルを読み込むことです。この方法では、HTMLファイル内に「このCSSファイルを読み込んで！」という指示を書いておき、ブラウザがCSSを読みに行けるようにします。

1-1.外部CSSファイルの読み込み手順

例として使うテキストエディターはSublime Textですが、他のエディターでも手順は変わりません。

1

テキストエディターを開く

まずCSSファイルを新しく作ります。テキストエディターを開きしょう。

2

文字化け回避のためのコードを書く

CSSファイルの頭には<@charset "UTF-8";>と書きます。これはコードの文字化けを防ぐためのものです。 これより前にCSSコードを書くのはNGです。

3

CSSを書く

CSSを書きましょう。

4

保存

ctrl+Sで保存ウィンドウが開きます。 Macの場合、ctrlの代わりに⌘です。ファイル名は英数字で、拡張子（末尾）を.cssにします。保存場所は、ひとまずHTMLファイルのある場所と同じフォルダ（ディレクトリ）にしましょう。

5

HTMLファイルを開く

次にCSSを読み込みたいHTMLファイルを開きます。

6

外部CSSの読み込みコードを書く

外部スタイルシートの読み込みには<link rel="stylesheet" href="ファイル名.css">というコードを使います。このコードをheadタグの中に書きましょう。

href=””の書き方

HTMLファイルと外部CSSファイルが同じ階層（＝同じフォルダorディレクトリ）にある場合はhref=”ファイル名”と書きます。ファイル名のかわりに”ファイルのURL（絶対パス）”を書いてもOKです。詳しくは絶対パス・相対パスの説明あたりが参考になりそうです。

7

CSSが読み込まれる

これで外部CSSが読み込まれ反映されました。

やってみれば簡単ですね。このように外部CSSは簡単に読み込むことができます。

1-2.外部CSSを読み込むメリット

CSSを外部ファイルとして作っておくことには大きなメリットがあります。

それは、1つのCSSファイルを複数のHTMLで読み込むことができることです。言い換えると、複数のHTMLファイルに対して共通のCSSを適用できるということです。

1記事＝1HTMLファイルです。

また、複数のページに同じデザインを適用していれば、デザインをまとめて変えることもできます。

ページ数（記事数）がどんどん増えていくブログやウェブメディアなどでは、外部CSSを作らず、HTMLファイル内に全CSSを書いていたら大変です。なぜなら1記事＝1HTMLファイルであり、記事を書くたびに毎回イチからCSSを書く必要が出てくるからです（コピペするにしても面倒ですね）。

1-3.もし1ページだけ特別なデザインにしたいときは…

複数のページ(HTMLファイル)が共通してファイル読み込んでいる分、1ページだけ変わったデザインを使いたくなったときにも、気軽にCSSを変えることができません。そんなときは、そのページだけが読み込むCSSファイルをもう１つ作るか、のちほど解説する【方法2】を取るのが良いですね。

1-4.【ちなみに】複数の外部CSSを読み込むことはできる？

できます。HTMLファイルのheadタグ内に<link rel="stylesheet" href="style.css">をもう1つ書き足すだけでOKです。

外部CSSから別のCSSを読み込むことも

外部CSSファイルからさらに別の外部CSSを読み込むこともできます。別のCSSを読み込みたいときは、CSSファイルの「@charset “UTF-8”;」の後ろに@import url("ファイル名.css");と書きましょう。

方法2：HTMLファイルにstyleタグを書き、その中にCSSを書く

2つめの方法はHTMLファイルのheadタグ内に<style>〜</style>を書き、その中にCSSを書く方法です。

2-1.HTMLのstyleタグ内にCSSを書く手順

1

HTMLファイルを開く

CSSを適用したいHTMLファイルを開きます。

2

headタグ内にstyleタグを書く

headタグの中に<style> </style>を書きましょう。今回の例では</head>の直前に書きます。この中にいつも通りCSSを書いていけばOKです。

3

CSSが適用される

styleタグ内に書いたCSSが適用されます。簡単ですね。

2-2.HTMLのstyleタグ内にCSSを書くデメリット

まずはデメリットから。

HTMLファイル内に書かれたCSSはそのファイル内でしか適用されません。つまり他のHTMLファイルからそのCSSを読むことはできません。

とはいえ、これはメリットでもあります。

2-3.HTMLのstyleタグ内にCSSを書くメリット

「このページだけデザインを変えたい！」というときにはピッタリです。なぜなら、そのHTMLファイル内でしか適用されないCSSなので、そのページに特化したCSSを書くことができるからです。

2-4.外部CSSと一緒に使おう

全記事共通の基本のデザインを外部CSSで作っておき（方法１）、ページごとにデザインを変えたくなったら、変えたい部分のCSSだけをHTMLのstyleタグ内に書く（方法２）のがおすすめです。

方法3：インライン（HTMLタグの中にCSSを書く）

3つめは、HTMLのタグの中にCSSを書く方法です（「インラインにCSSを書く」と言ったりもします）。文字にサクッと色をつけたり、線を引いたりするときには便利ですが、タグにいちいち書き込む必要がありやや手間がかかります。また、後からまとめてデザインを変更することもできません。

3-1. インラインの書き方

タグの中にCSSを書くときは、<タグ名 style="CSSをここに書く">という形になります。このstyle=""はstyle属性と呼ばれます。

たとえば、h1タグとpタグの文があるとします。

<h1>例文見出し</h1>
<p>これは例文です</p>

この中にCSS（style属性）を書いてみましょう。CSSの書き方はいつもと同じですが、セレクタ（bodyとかpとか）を指定する必要はありません（そのタグに対してのデザインが指定されます）。

<h1 style="color: orange; border-bottom: solid 2px black">例文見出し</h1>
<p style="color: orange">これは例文です</p>

このようにstyle属性を指定することで、ウェブページ内でピンポイントにデザインを変えることができます。ここではh1タグとpタグで試しましたが、他の様々なタグの中にインラインでCSSを書くことができます。

3-2. インライン記述のメリット

外部CSSを触る必要がないので「一部のデザインだけ変えたいとき」には楽です。

3-3. インライン記述のデメリット

タグ内に書かれたCSSが適用されるのはそのタグだけです。複数のタグに同じCSSを適用させたいときにも、各タグいちいちCSSを書く必要があります。

また、インラインでCSSを書くと後からまとめてデザインを変更したいときに非常に面倒です。なぜなら、タグ内のCSSをいちいち書き直す必要があるからです。コードを書くのがウマイ人は、ほとんどインラインでは書きません。

4. CSSが適用される優先順位は？

3つの方法で「同じ箇所のデザインを指定」したときには、どれが優先されるのでしょうか。たとえば

というように、別々のデザインを指定すると、どれが適用されるのでしょうか。答えは以下のようになります。

HTMLタグに近い場所に書かれたCSSが適用されるというように覚えておくと分かりやすいでしょう。この優先順位がウェブデザインをしていく中で意外にも大事になってくるので、覚えておくことをおすすめします。

5. CSSの記述場所まとめ

ここまで3つの方法を紹介してきました。基本的には【方法１】の外部CSSを使い、必要に応じて【方法2】【方法3】を使っていくのが良いでしょう。