[43] style要素で CSS を HTML文書内に書こう

最終更新日:2017年11月28日  (初回投稿日:2012年07月27日)

今回は <style>要素 を使ってみましょう。これもメタデータ・コンテンツです。

<link>要素は、外部CSSファイルを HTML内に読み込む時に使い、
<style>要素は、CSSを直接 HTMLに書く時に使います。

ずいぶん前に [6] 段落に<p>要素を使おう(ついでにCSSで整えてみよう)でも <head>内に <style>要素でCSSを書く方法を紹介していますが、今回はもう少し詳しく見ていきましょう。

使用する要素 <style> 〜 </style>
使用する属性 type属性、media属性、title属性
本日のINDEX
  1. <style>要素のルール
  2. <style>要素の属性
    1. type属性
    2. media属性
    3. title属性
  3. ピンポイントでCSSを使いたい時に<style>要素を使おう
  4. <style>要素を <body>要素の中に書く(5.1仕様外)
  5. JavaScript で CSSを <head>要素内に置く(余談)

2017年11月:記事全体を HTML5.1 仕様に合わせて整理し、5.2勧告案についても触れておきました。

2016年7月:「scoped属性」に関する部分を書き直しました。
初回投稿時(2012年)は、W3Cの草案に<style>要素の「scoped属性」が含まれていましたが、HTML5.0 勧告で「scoped属性」は削除されました。

<style>要素のルール

<style>要素は メタデータ・コンテンツ<head>内に書きます。
W3C の HTML5.1 仕様では、

A <style> element is restricted to appearing in the <head> of the document.
(<style>要素は、文書の<head>に表示されるように制限されている

という注意書きがあります。(WHATWG仕様には無いですが)

<style>要素は <head>内にある <noscript>要素の中にも書けます。
<noscript>要素は、JavaScriptを使えないブラウザ(使わないように設定しているブラウザ)のための代替の指定をする要素。
この場合は JavaScriptを利用できないブラウザに適用させるCSSを指定します。

<head>
  <noscript>
    <style>
      body {background:#fff}
    </style>
  </noscript>
</head>

<style>要素は、終了タグがあります。<style> 〜 </style> の中に CSSを書くので、必ず </style> で終わらないといけません(当たり前ですけどね)
これが同じメタデータ・コンテンツの <base>要素や <link>要素と違うところ。

また、1つの HTML文書内に復数OKです。

ちにみに余談ですが、ものすっごく古いブラウザは <style>要素に対応してなかった(内容をテキストとして解釈する)ため、大昔は CSSをHTMLのコメントタグで囲む書き方がありました。 <style>
<!--
body { background:#fff; color:#666}
-->
</style>
今はこんなもん不要でが、HTML5は、こうなっていても エラーにならず 問題なく表示します。

<style>要素の属性

<style>要素には「type属性」「media属性」があります。
また、グローバル属性の「title属性」は <style>要素で使うと特別な役目になります。

type属性

type属性「MIMEタイプ」を指定します。
*MIMEタイプについては(ちょっとメモ)MIMEタイプ を見てください。

スタイルシートの type属性は「text/css」です。

<style type="text/css">
body { background:#fff; color:#666;}
</style>

<style>要素では「type="text/css"」がデフォルト。省略すれば自動的に「text/css」になりるので省略可能。たいていの場合下記でOK。

<style>
body { background:#fff; color:#666;}
</style>

media属性

media属性には「メディアタイプ」「メディア特性」を指定します。
*media属性については[42-2] link要素の media属性で 外部CSSをメディア別に切り替えようをご覧ください。

<link>要素と同じように、メディア別にCSSを切り替えることができます。

<style media="screen">
  body { background:#ffc; color:#966;}
</style>
<style media="print">
  body { background:#fff; color:#000;}
</style>

デバイス別にCSSを切り替えることも。

<style>
  article {
  float:left;
  width:680px;
  }
aside {
  float:right;
  width:280px;
  }
</style>
<style media="screen and (max-width:480px) and (orientation:portrait)">
  article, aside {
  float:none;
  width:100%
  }	
</style>

CSSの @media を(いわゆるメディアクエリ)使うこともできます。

<style>
  article {
  float:left;
  width:680px;
  }
aside {
  float:right;
  width:280px;
  }
@media screen and (max-width:480px) and (orientation:portrait) {
  article, aside {
  float:none;
  width:100%
  }	
}
</style>

「media属性」のデフォルトは「all」
media属性を省略すれば自動的に「all」になります。特にメディアでの切り替えが必要ない場合は省略でOK。

title属性

<style>要素の「title属性」代替えスタイルシートのグループ名(セット名)を示し、
最初に指定したものと異なるグループ名(「title属性」の値)の <style>要素の内容は、読み込まれても表示に使われません
これは <link>要素の CSS読み込み時の「title属性」と同じ性質になります。

<link>要素の CSS読み込み時の「title属性」に関しては、
[42-1] link で外部CSSファイルの読み込み・グループ化をしよう をご覧ください。

例えば、下記のコードだと、titleが「default」のスタイルまでしかブラウザは適用せず、titleが「test」のものは読み込まれても適用されません。
一部のブラウザ(Firefox)では、メニューバーの「表示」から、この title属性のセットを切り替えることができます。

<style title="default">
  body { background:#ffc; color:#966}
</style>
<style title="test">
  body { background:#fff; color:#000}
</style>
<style title="tset">
  a {color:#000; text-decoration:underline}
</style>

「title属性」の値によって 適用される・されない の違いが出るんです。
他の要素の「title属性」の役割とは違いますね。

ピンポイントでCSSを使いたい時に<style>要素を使おう

<style>要素をどんなシーンで使うかですが、
全サイトに共通するフォーマット用CSSなら「外部CSSファイル」を <link>要素 で読み込むのがベストです。
フォーマットスタイルを 全部のHTMLの <head>に書いてたら、重いし、編集時の効率は悪いし、デメリットしかありません。

外部CSSファイルの作り方とHTMLへの読み込み方については、
[12-1] CSSを外部ファイルにしよう
[42-1] link で外部CSSファイルの読み込み・グループ化をしよう をご覧ください。

ですので <style>要素は「このページだけ、他のページとガラッと変えたい」という場合に使います。イベントページや特設ページなとですね。

<style>要素を使えばと、特設ページなどが不要になった時、CSSも一緒に始末できるので便利です。

<style>要素を <body>要素の中に書く(5.1仕様外)

HTML5.0の策定中に「scoped属性」が仕様にありましたが、勧告で削除されました。
「scoped属性」を付けた<style>要素は <head>でなく <body>内に置けるという仕様で、その親要素の範囲内にのみスタイルが適用されるというものでした。

これを勧告前に一旦は実装した Chrome firefox も勧告後にサポートしなくなり、Safari、Opera、IE は一度もサポートしていません。

ただ、どのブラウザでも <body>内に書かれた <style>要素はエラーにならず、「scoped属性」は無視し、<style scoped> 〜 </style> 内のスタイルは、HTML全体に適用する機能は残しています。
W3C の HTML5.1 仕様で「<style>要素は <head>内に制限」とされてはいますが。

これは、ブログシステムや、WordPress などの CMS では、記事ごとに <head>内を編集できないため、本文(<body>内)に <style>要素を書くのが便利だったため、勧告前の各ブラウザの実装で、多くのユーザーが使用したためではないかと思います。
勧告後に文法違反となったわけですが、急に実装を止められても困るユーザーが多いのではないでしょうか。

ですので、このような書き方をしても、たいていは意図通りに表示されます。

<body>
  <p class="sample">
  この段落のborderは赤。
  </p>

  <style>
  .sample {border:solid 3px red; padding:1em}
  </style>
</body>

そして、W3C の HTML 5.2 は今「勧告案(Proposed Recommendation)」になっています(次の段階で「勧告」)が、そこに下記の記述があります。

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.
(文書の <head> に <style>要素を使用することをお勧めします。
ドキュメントの <body> に <style> を使用すると、スタイルの変更や上書きが起こりますので注意して使用すべきです。)

HTML 5.2 では <style>を <body>内で使えるかも
勧告時にこの部分が削除される可能性もありますけど、期待したいところです。(2017年11月記)

JavaScript で CSSを <head>要素内に置く(余談)

W3C の HTML 5.1 の仕様どおりに書くなら、<head>内にしか CSSを置けませんが、WordPress などでは、1記事にしか使わない CSS を すべての記事に読み込ませることになります。
これを、強引に1記事の<head>にだけ読み込ませるため、JavaScript を使う方法があります。

下記のコードを 記事の本文中(<body>内)に置きます。

<script>
window.onload=function(){
    var css=document.createElement("link");
    css.setAttribute("rel","stylesheet");
    css.setAttribute("href","https://ex.com/css/sample.css");
    document.getElementsByTagName("head")[0].appendChild(css);
}
</script>

JavaScript で <head>内に <link>要素を生成し、外部CSSファイルを読み込ませています。

外部CSSファイルは 相対パスでも絶対パスでもOK。WordPressなら絶対パスがいいね。
JavaScriptなので <style>要素やインラインで CSSを書くより表示が遅いけど、WordPress などを使っている場合で 仕様違反が気になるなら良いかもしれません。

ちなみにこの「ほんっとに...」は、FC2ブログを使っていますが、記事内のCSS絡みのサンプルは <body>内に <style>要素を使っています。
上記の Javascript を使う方法に切り替えるのは、5.2勧告まで待ってみます。 万が一、5.2勧告後も <body>内に <style>が使えなかったら、やるしかないか。

次回予告

次回は <script>要素<noscript>要素 を使ってみましょう。

<script>要素は HTMLファイルに Javascript などのスクリプトを読み込みます。
また、スクリプトが効かない環境(ユーザがスクリプトをoffにしてる)で、代替のコンテンツを表示するために使うのが <noscript>要素です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.