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

CSSはどこに書く?外部ファイルから読み込む方法・HTMLに書く方法

ウェブページに文字や写真を貼るなどの土台作りをするのがHTML、デザインやレイアウトなどの見栄えを決めるのがCSS(スタイルシート)です。それでは、CSSはどこに書けば良いのでしょうか。

CSSの記述場所は3パターンある

CSSを書く場所

CSSを書く方法(場所)は3パターンあります。それぞれメリット・デメリットがあるため、この3パターンを組み合わせてCSSを書いていくのが良いでしょう。この記事では、1つずつ丁寧に解説していきます。

方法1:外部ファイルから読み込む

CSSファイルを作って読み込み

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

サルワカくんの顔(喜)
サルワカくん

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

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

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

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

1

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

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

charset utf-8

2

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

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

CSSコードを書く

3

CSSを書く

CSSを書きましょう。

ファイルを保存

4

保存

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

HTMLファイルを開く

5

HTMLファイルを開く

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

外部スタイルシートの読み込みコードを書く

6

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

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

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

7

CSSが読み込まれる

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

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

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

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

外部ファイルからcssを読み込むメリット

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

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

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

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

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

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

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

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

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

外部スタイルシートからさらに別のCSSを読み込む

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

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

HTMLファイルにstyleタグを作って書く

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

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

HTMLファイルを開く

1

HTMLファイルを開く

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

styleタグを書く

2

headタグ内にstyleタグを書く

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

styleタグ内にcssを書く CSSが読み込まれる

3

CSSが適用される

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

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

まずはデメリットから。

HTMLファイルの中に書いたCSSはそのファイルの中でしか使えない

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

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

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

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

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

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

方法3:インライン(HTMLタグの中にCSSを書く)

HTMLタグの中に書き込む

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

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

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

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

HTMLコード
<h1>例文見出し</h1>
<p>これは例文です</p>
ブラウザ表示

style属性例

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

HTMLコード
<h1 style="color: orange; border-bottom: solid 2px black">例文見出し</h1>
<p style="color: orange">これは例文です</p>
ブラウザ表示

style属性を書いた例

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

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

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

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

style属性のデメリット

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

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

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

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

  • 外部CSSではpの色をに指定(方法1)
  • style内ではpの色をに指定(方法2)
  • インライン(タグ内のstyle属性)ではpの色をに指定(方法3)

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

CSS適用の優先順位

  1. インラインのCSSが最優先(方法3)
  2. style内に書いたCSSが2番目(方法2)
  3. 外部CSSが3番目(方法1)

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

5. CSSの記述場所まとめ

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

まとめ
  • CSSを書く方法は3パターンある
  • 【方法1】外部CSSに書く
  • 【方法2】HTMLファイルのstyleタグ内に書く
  • 【方法3】HTMLのタグ内に書く(style属性)
  • 適用の優先順位が最も高いのは方法3、最も低いのは方法1
  • 基本的には外部CSSを使い、必要に応じてHTMLのstyle内やタグ内に書くタグ内に書くと後から変更するのが大変なので、あまり使わないようにする
サルワカ