CSSとは、カスケーディングスタイルシート(Cascading Style Sheets)の略。
今回は、CSS自体をどこに書いていけばいいのか？設定すればいいのか？、スタンダードなものから、最新？のモノまで、その適用方法を紹介します。
このページの目次
XHTMLやHTML4.01には宣言が必要
<head> ... <meta http-equiv="Content-Style-Type" content="text/css" /> ... </head>
<head>内に宣言を記述します。
この記述は、「HTMLタグの中に書く」では、必須です。
それ以外の記述方法には、特に必要ないのですが、テンプレート・決まり文句だと思って書くことをオススメします。
この宣言を書かなくてもブラウザが、うまく処理してくれます。
ですが、エラーを避けるため忘れずに記述しましょう。
HTML5では、この記述が逆に構文エラーとなってしまうので、書かないよう注意が必要です。
この宣言をザックリ説明しますと・・・スタイルシートにも色々あるようで、そのうちの「CSS」というスタイルシートを使いますよ～という宣言になります。
HTMLファイルに直接コーディングする
ここから実際に、CSSを適用させるための説明になります。
まずは、HTMLファイルに、CSSを直接、記述していくタイプです。
HTMLタグの中に書く
CSSのプロパティや値をHTMLタグの中に、記述して適用させる方法です。
あまり使わない方法ですが、外部CSSや<head>内の記述を禁止しているブログやWebサービスには、この書き方で対応します。
<body> <p style="font-size: 20px; color: red;">～</p> </body>
開始タグの中に属性として「style="プロパティ:値;"」と指定します。
要素名と「style="プロパティ:値;"」の間には、半角スペースを入れます。
CSSを複数指定する場合には「;（セミコロン）」で区切ります。
<p style="font-size: 20px; color: #red">～</p>
また、一番最後の「;」だけ、省略することができます。
省略して紹介しているサイトもあるので、混乱を避けるために補足という感じで書いておきます。
この方法は、HTMLタグに、1つ1つ細かく書き込むので、HTMLが冗長化してしまい、
・ファイルが大きくなる
・変更など、管理が大変になり、メンテナンス性が低下してしまう
という点で、現在では、あまり使われていません。
最悪、ワンポイントで使う感じの適用方法かと。
<head>内に<style>で指定する
<head>内にCSSを書き込んでスタイルや装飾を指定する方法です。
ページ単位にCSSを設定していく記述方法です。
<head>
...
<style type="text/css"><!--
p {font-size: 16px; color: red;}
h2 {font-size: 20px; color: blue;}
.demo01 {width: 450px;}
--></style>
</head>
<head>内に<style type="text/css">を記述して、その中にCSSを書き込んでいきます。
</head>の直前に書くのが一般的でしょうか。
HTML5では、「type="text/css"」を省略することができます。
<style>内側の<!-- -->の囲みは、CSSに対応していない古いブラウザに対応するための記述です。
最近のブラウザでは、ほとんど対応しているので、<!-- -->を省略しても問題ないと思います。
<body>内に<style>で指定する
今度は、<body>内に<style>を使って、CSSを指定する方法になります。
この方法は、今のところ、オマケという感じの記述方法です。
<body>
...
<p>文字は赤くならない</p>
<section>
<style scoped>
p {color: red;}
</style>
<p>文字が赤くなる</p>
</section>
...
</body>
<style scoped>で指定することにより、そのボックス（親要素）の中だけ指定したCSSが適用されます。
この場合、<section>の中だけCSSが適用されるということになります。
ここで、なぜ、オマケなのか？
2点ほど、補足ってみようと思います。
1点目は、「<body>内に<style>は、構文エラーとなる」です。
HTML4.01やXHTMLなどでは、CSSは適用されるようですが、構文エラーとなってしまいます。
もちろん、<style scoped>も対応していません。
また、HTML5でも、<style>の指定のみだと、構文エラーになります。
HTML5として、正しく使うには<style scoped>と記述します。
次に、「ほとんどのブラウザが、<style scoped>の対応が進んでいない」ということです。
執筆現在は、Firefoxの最新版は、正しく表示されるようです。
また、他のブラウザでは、記述したCSSが、ページ全体に適用されてしまいます。
なので、各ブラウザで、表示が違う場合があるので注意が必要です。
上記の理由により、現段階では使う場面が非常に限定されます。
使うこともできますが、各ブラウザで不具合が出る可能性があるので、注意しましょう。
外部のCSSファイルを使う
今度は、外部CSSを使う方法です。
HTMLファイルと区別して、別ファイルでCSSを準備して、読み込む方法になります。
まずは、今回のディレクトリ構造のイメージです。
たいだい標準的な構造だと思います。
ここでは、CSSフォルダを用意して、CSSファイルを一括するディレクトリ構造で説明を進めます。
外部CSSファイルを読み込む
一番スタンダードな記述方法です。
HTML
<head> ... <link rel="stylesheet" href="css/style.css" type="text/css" /> ... </head>
HTML側には、外部から読み込むCSSファイルのパスを記述します。
<head>内に<link>を使ってパスとファイル名を指定します。
複数のCSSファイルを読み込む場合、
<link rel="stylesheet" href="css/ファイル名.css" type="text/css" />
を、読み込みたいCSSファイルの数だけ、書き足していきます。
HTML5の場合「type="text/css" /」の部分を省略することができます。
CSS
p {font-size: 16px; color: red;}
h2 {font-size: 20px; color: blue;}
.demo01 {width: 450px;}
CSSファイルに関しては、この場合、準備した「style.css」にCSSを記述していきます。
今回は、適用方法に特化した内容なので、記述の内容は割愛します。
外部CSSファイルから、別の外部CSSファイルを読み込む
この方法も結構、見かける適用方法です。
必要に応じて「外部CSSファイルを読み込む」と使い分けましょう。
HTML
<head> ... <link rel="stylesheet" href="css/style.css" type="text/css" /> ... </head>
HTMLの記述は「外部CSSファイルを読み込む」と同じです。
CSS
@import url("css/reset.css");
p {font-size: 16px; color: red;}
h2 {font-size: 20px; color: blue;}
.demo01 {width: 450px;}
「style.css」から@importを使って「reset.css」ファイルを読み込んでいます。
この場合、「reset.css」が先に読み込まれてから、そのあとに記述したCSSが適用されます。
もちろん、複数のCSSファイルを複数呼び出すこともできます。
その場合、こちらも・・・
@import url("css/ファイル名.css");
を、書き足していきます。
<head>内で@importを使って外部CSSファイルを読み込む
私は、あまり見かけたことのない方法です。
変化球的な感じだと思います。
HTML
<head>
...
<style type="text/css"><!--
@import url("css/reset.css");
@import url("css/style.css");
--></style>
</head>
<head>内に、<style>を記述して、@importを使い、外部CSSファイルを読み込む方法です。
<style>を使った記述に関しては、「<head>内に<style>で指定する」も参考にしてみてください。
CSS
p {font-size: 16px; color: red;}
h2 {font-size: 20px; color: blue;}
.demo01 {width: 450px;}
CSSファイルは、普通に記述します。
あとがき
HTMLファイルに直接書く方法3種類、外部CSSファイルを読み込む方法3種類、を紹介しました。
直接書く方法は、中盤の1つを、外部CSSファイルの方法は、序盤の2つを押さえておきたいところです。
サイトのデザインをカスタマイズするとき、あのデザインを参考にしたい！
なんて時にも、CSSがどこに書かれているのか？とコーディング場所がサクッと探せるような手助けになればいいなぁ～と思います。
ぜひ、CSSの楽しい扉が開かれますように♪
参考
[CSS]CSSの適用方法 | コリス
HTML文書へのスタイルシート適用 – CSS2リファレンス
hamashun.me : HTML5のstyle要素が持つscoped属性について