記事内に商品プロモーションが含まれる場合があります
ウェブページに文字や写真を貼るなどの土台作りをするのがHTML、デザインやレイアウトなどの見栄えを決めるのがCSS（スタイルシート）です。それでは、CSSはどこに書けば良いのでしょうか。
CSSの記述場所は3パターンある
CSSを書く方法（場所）は3パターンあります。それぞれメリット・デメリットがあるため、この3パターンを組み合わせてCSSを書いていくのが良いでしょう。この記事では、1つずつ丁寧に解説していきます。
方法１：外部ファイルから読み込む
1つめの方法は、外部ファイルのCSSから読み込む方法です。つまり、CSSファイルを別に作り、HTMLファイルから読み込むということです。この作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれます。ウェブサイトを作る時にはこれが最も一般的な方法です。
1-1.外部CSSファイルの読み込み手順
例として使うテキストエディターはSublime Textの公開当時の画面です。現在の画面とは異なる場合がありますが、CSSをUTF-8で保存し、HTMLから読み込む基本の流れは他のエディターでも同じです。
1
テキストエディターを開く
まずCSSファイルを新しく作ります。テキストエディターを開きましょう。
2
文字コードを確認する
CSSファイルはUTF-8で保存しましょう。文字コードをCSS内で宣言する場合は、ファイルの先頭に@charset "UTF-8";と書きます。山括弧は付けません。 宣言の前には空白・改行・コメントも置きません。HTTPヘッダーなどで文字コードが正しく指定されている場合は、この宣言は必須ではありません。
3
CSSを書く
CSSを書きましょう。
4
保存
ctrl+Sで保存します。新規ファイルでは保存先やファイル名を指定します。 Macの場合、ctrlの代わりに⌘です。この例ではファイル名を扱いやすい英数字にし、拡張子（末尾）を.cssにします。保存場所は、ひとまずHTMLファイルのある場所と同じフォルダ（ディレクトリ）にしましょう。
5
HTMLファイルを開く
次にCSSを読み込みたいHTMLファイルを開きます。
6
外部CSSの読み込みコードを書く
外部スタイルシートの読み込みには<link rel="stylesheet" href="ファイル名.css">というコードを使います。このコードをheadタグの中に書きましょう。
7
CSSが読み込まれる
これで外部CSSが読み込まれ反映されました。
やってみれば簡単ですね。このように外部CSSは簡単に読み込むことができます。
1-2.外部CSSを読み込むメリット
CSSを外部ファイルとして作っておくことには大きなメリットがあります。
それは、1つのCSSファイルを複数のHTMLで読み込むことができることです。言い換えると、複数のHTMLファイルに対して共通のCSSを適用できるということです。
この例では1ページを1つのHTMLファイルとして扱います。
また、複数のページに同じデザインを適用していれば、デザインをまとめて変えることもできます。
複数のHTMLファイルに同じCSSを直接書くと、共通のデザインを変える際に各ファイルの修正が必要です。外部CSSへまとめれば共通部分を管理しやすくなります。ブログなどではHTMLを動的に生成する場合もあり、記事ごとにHTMLファイルを手作業で作るとは限りません。
1-3.もし1ページだけ特別なデザインにしたいときは…
共通のCSSを変更すると、その指定に当てはまるほかのページにも影響します。1ページだけ変える場合は、専用のクラスを付けて対象を絞る、そのページ専用のCSSファイルを読み込む、のちほど解説する【方法2】を使う、といった方法があります。
1-4.【ちなみに】複数の外部CSSを読み込むことはできる？
できます。HTMLファイルのheadタグ内に<link rel="stylesheet" href="style.css">をもう1つ書き足すだけでOKです。
外部CSSから別のCSSを読み込むことも
外部CSSファイルからさらに別の外部CSSを読み込むこともできます。読み込むには@import url("ファイル名.css");と書きます。通常のスタイル規則より前に置いてください。先行できるのは@charsetと、ブロックを持たないレイヤー順序宣言の@layerです。@charsetがなければ先頭に書けます。相対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. インライン記述のデメリット
style属性は、その要素へ直接スタイルを指定します。ただし、colorなど継承されるプロパティは子孫にも影響します。複数のタグへ同じ指定をする場合、それぞれにstyle属性を書き込むと管理が大変です。
また、インラインでCSSを書くと後からまとめてデザインを変更したいときに非常に面倒です。なぜなら、タグ内のCSSをいちいち書き直す必要があるからです。共通の装飾にはクラスとスタイルシートを使うと管理しやすくなります。インライン指定にも動的な値を設定する用途があります。
4. CSSが適用される優先順位は？
3つの方法で「同じ箇所のデザインを指定」したときには、どれが優先されるのでしょうか。たとえば
この例で、すべて作者の通常の宣言（!importantなし）なら、style属性の黄色が優先されます。ただし、外部CSSとstyle要素には、記述場所だけで決まる固定の優先順位はありません。
この例の優先関係と確認順
- 通常の宣言同士ではstyle属性が優先（方法3）
- 外部CSSとstyle要素は、同じオリジン・重要度・レイヤーなら詳細度を比較
- さらに詳細度やスコープの近さも同じなら、後に現れる宣言を採用
HTMLタグとの距離だけで優先順位は決まりません。同じ作者のスタイルでも、!importantの宣言は通常のstyle属性に優先します。詳細度より先にオリジン・重要度やカスケードレイヤーを比較し、その後で詳細度、スコープの近さ、出現順を確認します。アニメーションやトランジションにも固有の優先関係があります。
5. CSSの記述場所まとめ
ここまで3つの方法を紹介してきました。基本的には【方法１】の外部CSSを使い、必要に応じて【方法2】【方法3】を使っていくのが良いでしょう。