★HTML Living Standard リファレンス
<style>タグは、CSS（Cascading Style Sheets）のソースを文書に埋め込む際に使用します。
style要素で文書内にCSSソースを直接記述することで、文書単位でスタイルを指定することができます。
■使用例
以下のサンプルは、典型的なstyle要素の使用例です。 style要素は、通常は<head>～</head>の中に配置します。 <style>～</style>の中には、CSSを記述します。 この使用例では、style要素を使用して、 cite要素、 em要素、 i要素に背景色や文字色の指定をするCSSを埋め込んでいます。
HTMLソース
<!DOCTYPE html>
<html lang="ja">
<head>
<title>お気に入りの本</title>
<style>
cite {border-bottom:dotted 3px green;}
em {font-weight:bold;}
i {color:navy;}
</style>
</head>
<body>
<p>私の<em>お気に入り</em>の本は、 <cite>A Cat's Life</cite> です。
<em>現代の人間社会における猫</em>について語った <i>P. Rahmel</i> の本です。</p>
</body>
</html>ブラウザ上の表示
私のお気に入りの本は、 A Cat's Life です。 現代の人間社会における猫について語った P. Rahmel の本です。
■属性
- media属性
- スタイルが適用されるメディアをキーワードで指定します。
media属性の値には、有効なメディアクエリを指定する必要があります。
- all …… すべてのデバイス（初期値）
- print …… プリンタ、および、「印刷プレビュー」で文書を表示するブラウザなど、 印刷された表示を再現することを目的としたデバイス
- screen …… print で一致しないすべてのデバイス（≒一般的なディスプレイ）
以下は、有効なメディアクエリですが、すでに非推奨となっています。 後方互換などの目的に残されているものであり、可能ならば使用を避けた方が良いでしょう。
- tty …… 固定文字サイズの端末
- tv …… テレビ
- projection …… プロジェクタ
- handheld …… ハンドヘルドデバイス
- braille …… 点字の触角デバイス
- embossed …… 点字プリンタ
- aural …… 音声出力デバイス
- speech …… 音声出力デバイス
- blocking属性
- 要素がレンダリングをブロックする可能性があるかどうか
- title属性
- スタイルのタイトル（style要素のtitle属性を指定すると、CSSのセット名を表します）
style要素のmedia属性
style要素のmedia属性には、スタイルが適用されるメディアを指定します。 media属性でメディアの種類を指定することで、スクリーンで表示される場合のスタイル、プリントされる場合のスタイルなどを指定し分けることができます。
media属性が省略された場合のデフォルトは「all」です。 これは、デフォルトではすべてのメディアに適用されうることを意味します。
■使用例
以下のサンプルは、style要素のmedia属性を使用してスタイルが適用されるメディアを指定しています。
HTMLソース
<style media="(max-width: 600px)">
#a { width: 100px; height: 100px; }
</style>
<figure>
<picture>
<source srcset="a-square.png" media="(max-width: 600px)">
<img src="a-rectangle.png" width="300" height="150"
alt="バーニーフランクはスーツと眼鏡を着用しています。" id="a">
</picture>
<figcaption>バーニーフランク, 2011</figcaption>
</figure>■使用例
以下のサンプルのように、CSSの「@media」を使用してスタイル指定することもできます。
HTMLソース
<style>
#a { width: 300px; height: 150px; }
@media (max-width: 600px) { #a { width: 100px; height: 100px; } }
</style>
<figure>
<picture>
<source srcset="a-square.png" media="(max-width: 600px)">
<img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
</picture>
<figcaption>Barney Frank, 2011</figcaption>
</figure>style要素のtype属性
HTMLの旧いバージョンではstyle要素のtype属性の値に text/css を指定していましたが、 現在のHTML標準ではstyle要素にtype属性の指定は不要です。 style要素はデフォルトで type="text/css" の状態のCSSを生成するため、 style要素にはtype="text/css" の指定は省略できます。
外部CSSファイル
文書内にCSSソースを埋め込むのではなく外部CSSファイルにリンクしてCSSを適用する場合は、 style要素ではなくlink要素を使用します。■関連項目
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
