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

最終更新日:2018年03月31日  (初回投稿日: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を使いたい時に
  4. <style>要素を <body>要素の中に書く(5.2仕様)

2018年3月:記事全体を HTML5.2 仕様に合わせて整理しました。

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

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

<style>要素のルール

<style>要素は メタデータ・コンテンツ<head>内に書きます。

W3C の HTML5.1 仕様では「<head>に表示されるように制限」とされていましたが、HTML 5.2(2017年12月勧告)ではこの制限は無くなりました
ということで、<body>内にも書くことができます。

また、<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>要素の属性

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

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

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

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

<style>要素を <body>要素の中に書く

W3C の HTML5.1で「<style>要素は <head>内に制限」とされちゃいましたが、 HTML 5.2(2017年12月勧告)で この制限は無くなり、<body>内にも書けることになりました。

HTML 5.2 の仕様には、下記の記述があります。

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> を使用すると、スタイルの変更や上書きが起こりますので注意して使用すべきです。)

滅多に <body>内に <style>要素を使うような事態は無いと思います。
(スタイルシートは外部ファイルにして <link>要素で読み込むのが基本ですから)
が、ピンポイントで特定のページのほんの一箇所だけに CSSを使いたい時、<body>内に書けたほうが便利ですよね。

特に、ブログシステムや WordPress などの CMS では、記事ごとに <head>内を編集できないため <body>内に <style>要素が書けるとほんっと便利w。

ページ内の他の要素のスタイルに影響がないように、十分気をつけて使えば大丈夫。
下記のように、要素に 必ず新しい class名や id名を付けて、要素を限定して使おう。

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

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

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

HTML5.0勧告後に「scoped属性」は無くなったものの、<body>内の <style>要素は HTML5.0 的に問題なかった。
<style scoped> 〜 </style> 内のスタイルは、エラーにせずに「scoped属性」を無視して HTML全体に適用され、scoped属性が無ければ同じように文書全体のスタイルで使えました。

こうして多くのブラウザが <body>内の <style>をサポートしていたところ、5.1勧告で文法違反になっちゃった!(あの時は焦ったワ)
いや〜 5.2 で復活して、ほんっとに良かったです。

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

<head>内にしか <style>要素を置けない...という事態だった時に調べた方法です。余談ですが、メモとして残しておきます。

<head>にしか <style>要素を置けないとなると、WordPress などでは、1記事にしか使わない CSS を ほかの全記事にも読み込ませることになります。
これを、強引に1記事の<head>にだけ読み込ませる、JavaScript を使う方法です。

下記を 本文中(<body>内)に置きます。外部CSSファイルは 相対パスでも絶対パスでもOK。WordPressなら絶対パスがいいね。

<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>

<head>内に <link>要素を生成し、外部CSSファイルを読み込ませてます。
JavaScriptなので <style>要素やインラインで CSSを書くより、表示が遅くなっちゃうけどね。

次回予告

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

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

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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