ほんっとにはじめてのHTML5とCSS3：[43] style要素で CSS を HTML文書内に書こう

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

最終更新日：2019年07月05日　（初回投稿日：2012年07月27日）

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

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

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

使用する要素	`<style> 〜 </style>`

使用する属性	`type属性、media属性、title属性`

本日のINDEX

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

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

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

<style>要素のルール

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>

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

<style>要素の属性

type属性

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

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

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

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

media属性

media属性には「メディアタイプ」「メディア特性」を指定します。
＊media属性については[42-2] link要素の media属性で外部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属性

例えば、下記のコードだと、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を使いたい時に

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

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

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

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>要素です。

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-07-05（Fri）│
投稿日：2012-07-27（Fri）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿