メタデータ・コンテンツの要素の1つであるstyle要素は、HTMLファイルの中にスタイルシート（CSS）を組み込むための要素です。
外部スタイルシートを読み込む時に使用するのがlink要素で、HTMLファイルに直接CSSを書く時に使用するのがstyle要素です。
今回は、style要素についてまとめたいと思います。
HTML 【メタデータ】1 ～ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】2 ～ link要素（1）MIMEタイプ一覧と属性一覧
HTML 【メタデータ】2 ～ link要素（2）CSSファイルの読み込み
HTML 【メタデータ】2 ～ link要素（3）media属性
HTML 【メタデータ】2 ～ link要素（4）@importと@media
HTML 【メタデータ】2 ～ link要素（5）rel属性
HTML 【メタデータ】3 ～ style要素（ 本ページ ）
HTML 【メタデータ】4 ～ meta要素
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
ピンポイントでCSSを使いたい時にstyle要素を使うと便利です。
以前は、style要素は<head>内に書いていましたが、HTML5からは<body>の中にも書けるようになりました。
ピンポイントでCSSを使いたい時には、外部CSSファイルを介さずにstyle要素を使うと便利ですが、サイト全体に共通するようなCSSに関しては、外部CSSファイルを使用した方が良いです。
外部ファイルとしてまとまっていると、後ほどデザインの変更等があった場合に作業がし易いからです。
このページだけ、他のページと違うスタイルにしたいという場合には、style要素を使ってそのページだけに適用するCSSを書く方が便利です。
style要素を使って<head>内にCSSを書いてみます。
<head>
<style>
body { background:#00F; color:#FFF;}
</style>
</head>
<body>
文字の色は白、背景色は青です。
</body>
body要素内の背景（background）は青（#00F）、文字色（color）は白（#FFF）という指定をしています。
この指定はこのHTMLファイルだけに適用されます。
他のHTMLファイルにも同じスタイルを指定したい時に、全部のHTMLファイルにそれぞれ上記CSSを書いていくと、その後の変更等も、全部のHTMLファイルを１つずつ書き直していく必要があり、かなり手間がかかります。
そこで、複数のHTMLファイルに共通のCSSは、style要素を使わず、外部CSSファイルにした方が効率的で記述ミスも防げます。
同じメタデータ・コンテンツのbase要素とlink要素は終了タグがありませんでしたが、style要素は終了タグがあって、必ず</style>で終わります。
この違いは、各要素のコンテンツ・モデルが空かどうかによります。base要素やlink要素のコンテンツ・モデルは空なので終了タグはありませんが、style要素のコンテンツ・モデルはスタイルシートが入るため、終了タグが必要となります。
コンテンツ・モデルについては最後に一覧にまとめましたので要素とカテゴリとコンテンツ・モデルの一覧をご参照下さい。
また、以前は、スタイルシートをコメントタグで囲んで、次のような書き方もしていました。
<style>
body { background:#00F; color:#FFF;}
</style>
この書き方は、style要素に対応していないブラウザ対策のための書き方です。
今ではそのような古いブラウザは殆どないので、コメントタグで囲む必要はないと思います（囲んでも問題はありません）。
type属性は、適用するスタイルシートのMIMEタイプを指定します。
MIMEタイプについてはHTML 【メタデータ】２ ～ link要素（１）MIMEタイプ一覧と属性一覧 １．MIMEタイプ一覧をご参照下さい。
style要素のtype属性のデフォルト値はtext/cssですので、省略すれば自動的にtext/cssとなります。
style要素のtype属性を指定する場合は、次のように記述します。
<style type="text/css">
body { background:#00F; color:#FFF;}
</style>
media属性は、メディアタイプ（Webサイトを出力（見る、聞く、印刷）するメディア（機器））を指定します。
media属性についてはHTML 【メタデータ】２ ～ link要素（３）media属性をご参照下さい。
メディアタイプを指定すると、関係ない機器用のスタイルシートの読み込みを行わないので、ブラウザの読み込みスピードがアップします。
media属性のデフォルト値はallですので、media属性を省略すれば自動的にallとなります。
style要素のmedia属性を指定する場合は、次のように記述します。
<style media="screen, projection, print">
body { background:#00F; color:#FFF;}
</style>
| 要素 | カテゴリ | コンテンツ・モデル |
|---|---|---|
| a | ●フロー・コンテンツ ●インタラクティブ・コンテンツ ●フレージング・コンテンツのみを含む場合：フレージング・コンテンツ |
●トランスペアレント |
| abbr | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| address | ●フロー・コンテンツ | ●フロー・コンテンツ。 ただし、子孫にヘディング・コンテンツ、セクショニング・コンテンツ、header 要素、footer 要素、address 要素を含まない |
| area | ●フロー・コンテンツ ●フレージング・コンテンツ |
空 |
| article | ●フロー・コンテンツ ●セクショニング・コンテンツ |
●フロー・コンテンツ |
| aside | ●フロー・コンテンツ ●セクショニング・コンテンツ |
●フロー・コンテンツ |
| audio | ●フロー・コンテンツ ●フレージング・コンテンツ ●エンベッディド・コンテンツ ●controls属性を持つ場合：インタラクティブ・コンテンツ |
●src属性を持つ場合：トランスペアレント。ただし子孫にmedia要素はNG ●src属性を持たない場合：0 個以上の source要素に続き、トランスペアレント。ただし子孫にmedia要素はNG |
| b | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| base | ●メタデータ・コンテンツ | 空 |
| bdo | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| blockquote | ●フロー・コンテンツ ●セクショニング・ルート |
●フロー・コンテンツ |
| body | ●セクショニング・ルート | ●フロー・コンテンツ |
| br | ●フロー・コンテンツ ●フレージング・コンテンツ |
空 |
| button | ●フロー・コンテンツ ●フレージング・コンテンツ ●インタラクティブ・コンテンツ |
●フレージング・コンテンツ ただし子孫にインタラクティブ・コンテンツはNG |
| canvas | ●フロー・コンテンツ ●フレージング・コンテンツ ●エンベッディッド・コンテンツ |
●トランスペアレント |
| caption | なし | ●フロー・コンテンツ ただし、table 要素を子孫に入れることはNG |
| cite | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| code | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| colgroup | なし | ●span属性あり：空 ●span属性なし：0個以上のcol要素 |
| col | なし | 空 |
| datalist | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ、または 0個以上のoption要素 |
| dd | なし | ●フロー・コンテンツ |
| del | ●フロー・コンテンツ ●フレージング・コンテンツがのみを含む場合：フレージング・コンテンツ |
●トランスペアレント |
| details | ●フロー・コンテンツ ●インタラクティブ・コンテンツ ●セクショニング・ルート |
●ひとつの summary要素とその後にフロー・コンテンツ |
| dfn | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ ただし、子孫に dfn要素はNG |
| div | ●フロー・コンテンツ | ●フロー・コンテンツ |
| dl | ●フロー・コンテンツ | ●1個以上のdt要素+1個以上のdd要素のセットを0個以上 |
| dt | なし | ●フレージング・コンテンツ |
| embed | ●フロー・コンテンツ ●フレージング・コンテンツ ●エンベッディッド・コンテンツ ●インタラクティブ・コンテンツ |
空 |
| em | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| fieldset | ●フロー・コンテンツ ●セクショニング・ルート |
●オプションで、最初にlegend要素を1つ、その後フロー・コンテンツ |
| figcaption | なし | ●フロー・コンテンツ |
| figure | ●フロー・コンテンツ ●セクショニング・ルート |
●1つのfigcaption要素の後にフロー・コンテンツ ●または、フロー・コンテンツの後に1つの figcaption要素 ●または、フロー・コンテンツ この3パターンのいずれか |
| footer | ●フロー・コンテンツ | ●フロー・コンテンツ。 ただし、子孫に header、footer要素を含むのはNG |
| form | ●フロー・コンテンツ | ●フロー・コンテンツ ただし、子孫にform要素はNG |
| h1 ～ h6 | ●フロー・コンテンツ ●ヘディング・コンテンツ |
●フレージング・コンテンツ |
| header | ●フロー・コンテンツ | ●フロー・コンテンツ ただし、子孫に header、footer要素はNG |
| head | なし | 1つ以上のメタデータ・コンテンツ そのうち1個は title要素 |
| hgroup | ●フロー・コンテンツ ●ヘディング・コンテンツ |
●1個以上の h1 ～ h6 |
| hr | ●フロー・コンテンツ | 空 |
| html | なし | ●head要素の後にbody要素 |
| i | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| iframe | ●フロー・コンテンツ ●フレージング・コンテンツ ●エンベッディッド・コンテンツ ●インタラクティブ・コンテンツ |
テキスト |
| img | ●フロー・コンテンツ ●フレージング・コンテンツ ●エンベッディッド・コンテンツ ●インタラクティブ・コンテンツ（usemap属性を持つ場合のみ） |
空 |
| input | ●フロー・コンテンツ ●フレージング・コンテンツ ●インタラクティブ・コンテンツ（type属性hidden以外） |
空 |
| ins | ●フロー・コンテンツ ●フレージング・コンテンツ（フレージング・コンテンツのみを含む場合） |
●トランスペアレント |
| kbd | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| keygen | ●フロー・コンテンツ ●フレージング・コンテンツ ●インタラクティブ・コンテンツ |
空 |
| label | ●フロー・コンテンツ ●フレージング・コンテンツ ●インタラクティブ・コンテンツ |
●フレージング・コンテンツ ただし、子孫にlabel要素はNG ラベルの対象になってないフォーム関連要素は入れられない |
| legend | なし | ●フレージング・コンテンツ |
| li | なし | ●フロー・コンテンツ |
| link | ●メタデータ・コンテンツ | なし |
| map | ●フロー・コンテンツ ●フレージング・コンテンツ（フレージング・コンテンツのみを含む場合） |
●トランスペアレント |
| mark | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| menu | ●フロー・コンテンツ ●インタラクティブ・コンテンツ（type属性toolbarの場合） |
●0個以上の li要素、 または、フロー・コンテンツ |
| meta | ●メタデータ・コンテンツ | 空 |
| meter | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ ただし、子孫に meter要素はNG |
| nav | ●フロー・コンテンツ ●セクショニング・コンテンツ |
●フロー・コンテンツ |
| noscript | ●メタデータ・コンテンツ ●フロー・コンテンツ ●フレージング・コンテンツ |
●head要素内：link、style、meta要素を順不同で0個以上 ●head要素外：トランスペアレント（ただしnoscript要素はNG） |
| object | ●フロー・コンテンツ ●フレージング・コンテンツ ●エンベッディッド・コンテンツ ●インタラクティブ・コンテンツ（usemap属性ありの場合） |
●0個以上の param要素に続けてトランスペアレント |
| ol | ●フロー・コンテンツ | ●0個以上の li要素 |
| optgroup | なし | ●0個以上の option要素 |
| option | なし | ●テキスト |
| output | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| p | ●フロー・コンテンツ | ●フレージング・コンテンツ |
| param | なし | 空 |
| pre | ●フロー・コンテンツ | ●フレージング・コンテンツ |
| progress | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ ただし、子孫に progress要素はNG |
| q | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| rp | なし | ●フレージング・コンテンツ |
| rt | なし | ●フレージング・コンテンツ |
| ruby | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツに続いてrt ●またはフレージング・コンテンツに続いてrp、rt、rp このどちらかを1つ以上 |
| samp | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| script | ●メタデータ・コンテンツ ●フロー・コンテンツ ●フレージング・コンテンツ |
●src属性なし：type属性の値に依存。スクリプト ●src属性あり：空。またはコメント |
| section | ●フロー・コンテンツ ●セクショニング・コンテンツ |
●フロー・コンテンツ |
| select | ●フロー・コンテンツ ●フレージング・コンテンツ ●インタラクティブ・コンテンツ |
●0個以上のoption要素、またはoptgroup要素 |
| small | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| source | なし | 空 |
| span | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| strong | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| style | ●メタデータ・コンテンツ ●フロー・コンテンツ（scoped属性ありの場合） |
●type属性の値に依存。スタイルシート |
| sub sup |
●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| summary | なし | ●フレージング・コンテンツ |
| table | ●フロー・コンテンツ | ●次の順番で配置： オプションでcaption要素/0個以上のcolgroup要素/オプションでthead要素/オプションでtfoot要素/0個以上のtbody要素または1個以上のtr要素/オプションでtfoot 要素（ただしtfoot要素はtable内で1個だけ） |
| tbody | なし | ●0個以上のtr要素 |
| td | ●セクショニング・ルート | ●フロー・コンテンツ |
| textarea | ●フロー・コンテンツ ●フレージング・コンテンツ ●インタラクティブ・コンテンツ |
●テキスト |
| tfoot | なし | ●0個以上のtr要素 |
| thead | なし | ●0個以上のtr要素 |
| th | なし | ●フレージング・コンテンツ |
| time | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ ただし、子孫にtime要素はNG |
| title | ●メタデータ・コンテンツ | ●テキスト |
| tr | なし | ●0個以上td要素またはth要素 |
| track | なし | 空 |
| ul | ●フロー・コンテンツ | ●0個以上のli要素 |
| var | ●フロー・コンテンツ ●フレージング・コンテンツ |
●フレージング・コンテンツ |
| video | ●フロー・コンテンツ ●フレージング・コンテンツ ●エンベッディッド・コンテンツ ●インタラクティブ・コンテンツ（controls属性を持つ場合） |
●src属性を持つ場合：0個以上のtrack要素に続き、トランスペアレント。ただし子孫にメディア要素はNG ●src属性を持たない場合：0 個以上のsource要素、0個以上のtrack要素に続き、トランスペアレント。ただし子孫にメディア要素はNG |
| wbr | ●フロー・コンテンツ ●フレージング・コンテンツ |
空 |
INTERNOUS,inc. All rights reserved.
