HTML 【メタデータ】3 ~ style要素

Web Design Template Copy Space Concept

メタデータ・コンテンツの要素の1つであるstyle要素は、HTMLファイルの中にスタイルシート(CSS)を組み込むための要素です。
外部スタイルシートを読み込む時に使用するのがlink要素で、HTMLファイルに直接CSSを書く時に使用するのがstyle要素です。
今回は、style要素についてまとめたいと思います。

メタデータ・コンテンツについては、以下のページもご参照下さい。
HTML 【 metadata 】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【 metadata 】2 ~ link要素(2)CSSファイルの読み込み
HTML 【 metadata 】2 ~ link要素(3)media属性
HTML 【 metadata 】2 ~ link要素(4)@importと@media
HTML 【 metadata 】2 ~ link要素(5)rel属性

目次

1.style要素を使う時
2.style要素のtype属性とmedia属性

1.style要素を使う時

ピンポイントでCSSを使いたい時にstyle要素を使うと便利です。

使用する要素  <style> ~ </style>
使用する属性  type属性、media属性、scoped属性

以前は、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ファイルを1つずつ書き直していく必要があり、かなり手間がかかります。
そこで、複数のHTMLファイルに共通のCSSは、style要素を使わず、外部CSSファイルにした方が効率的で記述ミスも防げます。

同じメタデータ・コンテンツのbase要素とlink要素は終了タグがありませんでしたが、style要素は終了タグがあって、必ず</style>で終わります。
この違いは、各要素のコンテンツ・モデルが空かどうかによります。base要素やlink要素のコンテンツ・モデルは空なので終了タグはありませんが、style要素のコンテンツ・モデルはスタイルシートが入るため、終了タグが必要となります。
コンテンツ・モデルについては最後に一覧にまとめましたので要素とカテゴリとコンテンツ・モデルの一覧をご参照下さい。

また、以前は、スタイルシートをコメントタグで囲んで、次のような書き方もしていました。

<style>
<!–
 body { background:#00F; color:#FFF;}
–>
</style>

この書き方は、style要素に対応していないブラウザ対策のための書き方です。
今ではそのような古いブラウザは殆どないので、コメントタグで囲む必要はないと思います(囲んでも問題はありません)。

▲目次へ戻る

2.style要素のtype属性とmedia属性

type属性

type属性は、適用するスタイルシートのMIMEタイプを指定します。

MIMEタイプについてはHTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧 1.MIMEタイプ一覧をご参照下さい。

style要素のtype属性のデフォルト値はtext/cssですので、省略すれば自動的にtext/cssとなります。

style要素のtype属性を指定する場合は、次のように記述します。

<style type=”text/css”>
 body { background:#00F; color:#FFF;}
</style>

media属性

media属性は、メディアタイプ(Webサイトを出力(見る、聞く、印刷)するメディア(機器))を指定します。

media属性についてはHTML 【 metadata 】2 ~ link要素(3)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 ●フロー・コンテンツ
●フレージング・コンテンツ

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です