[43] style で CSS を HTML内に書いてみよう

この記事は2016年7月に書き直しました。
記事を投稿した2012年7月当時は、W3Cのドラフトに<style>要素の「scoped属性」が含まれていましたが、2013年10月の勧告では「scoped属性」は無くなっています
というわけで、本記事の「scoped属性」に関する部分を書き直しています。

今回は <style>要素 を使ってみましょう。
<style>要素は、HTMLファイルの中にスタイルシート(CSS)を組み込むための要素です。

前にやった<link>要素は、外部スタイルシートを読み込む時に使い、
今回の<style>要素は、HTMLに直接CSSを書く時に使う、というわけです。

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

<style>要素は「メタデータ・コンテンツ」なので、<head>内に書いてCSSを指定します。

ただし、HTML5からは <body>の中にも書けます。
メタデータ・コンテンツの一部は「フロー・コンテンツ」に属すと仕様書にもあるのですが、<script> <noscript> <style>要素がコレにあたるのではないかと思われます。
HTML5に対応したブラウザは、<style>要素を <body>内に書いても効きます。

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

ただ、フォーマット用(全サイトに共通する)CSSに関しては、
「外部CSSファイル」を<link rel="stylesheet"> で読み込むのがベスト
外部ファイルとしてまとめた方が、あとで編集しやすいからです。(作業効率の問題)

でも「このページだけ、他のページとガラッと変えたい」などの場合には、この<style>を使って
「そのページだけに適用するCSSを書く」方法が便利です。
「外部ファイルにする程でもない(ピンポイントに使う)CSS」を書く時に、<style>要素を使うと良い、ということですね。

<style>要素で、<head>内にCSSを書いてみよう

ではまず、スタンダードに<head>内にCSSを書いてみましょう。
これ、ずいぶん前に「[6] テキストに段落<p>を作ってみよう」で紹介していて重複しますが、
もう1度書いておきますね。 サンプルをみてください。

<head>
<style>
 body { background:#FFC; color:#966;}
</style>
</head>
<body>
テキストの色は茶色、背景色は黄色です。
</body>

↑これをブラウザでプレビューすると、↓こうなります。

<body>要素内の背景(background)はクリーム色(#FFC)、文字色(color)は茶色(#966)という指定をしました。
このCSSは、このHTMLファイルだけに適用されます。

ほかのHTMLファイルにも同じスタイルを指定したいとき、この<head>内に書く方法だと、ぜーんぶのHTMLファイルにコレを書く必要が…。もしもCSSを変更したかったら、またぜーんぶのHTMLを直すハメに…。時間の無駄ですよね。
だから、複数のHTMLファイルに共通のCSSなら、外部CSSファイルにした方が効率的なんです。
外部CSSファイルの作り方とHTMLへの読み込み方については、
「[12-1] CSSを外部ファイルにしよう」
「[42-1] link で外部CSSファイルの読み込み、グループ化をしよう」をご覧ください。
また「グラフィックデザイナーのためのCSSレイアウト:外部CSSの読込み」も、あっさりしててわかりやすいかと思いますので見てみてください。

<style>要素は、終了タグがあるのに注目。必ず</style>で終わります。

いままで見て来たメタデータ・コンテンツ (<base><link>)は、 「終了タグ無し」でした。
それはコンテンツ・モデルが「空(カラ)」だから。今回の<style>のコンテンツ・モデルは空でなくスタイルシートが入る。
だから終了タグが必要なんですね。
「メタデータ・コンテンツ」については「[40] メタデータ・コンテンツって何?」
「コンテンツ・モデル」については「[38-2] 「コンテンツ・モデル」一覧」を参照してください。

それから、
HTML4やXHTML1の頃には、スタイルシートをコメントタグで囲む書き方をしていました。
このブログの初期(2010年11月2011年3月)では、コメントタグを付けて紹介してます。

<style>
<!--
 body { background:#FFC; color:#966;}
-->
</style>

コレは、かなり古いブラウザが<style>要素に対応していなかったときの対策でした。
( 内容をそのままテキストとして表示してしまうという動作を防ぐため、コメント化してた。)
今ではそんなめっちゃ古いブラウザを使っている人も珍しいと思われますので、まぁ不要でしょう。
しかし、ちなみに、HTML5でコレを入れても、別に問題なく動作します。

<style>要素の type属性と media属性について

●「type属性
type属性は、適用するスタイルシートの「MIMEタイプ」を指定します。
「MIMEタイプ」については「ちょっとメモ:MIMEタイプ」を見てください。

<style>要素の type属性のデフォルトは「text/css」。省略すれば「text/css」自動的になります。
書くならこのように書きます。

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

●「media属性
media属性とは<link>要素の時に紹介した「サイトを出力する機器を指定する」属性です。
「media属性」については「[42-2] link media=" " で 外部CSSをメディア別に切り替えよう」に、詳しく書きましたので見てください。

メディアタイプを指定すれば、ブラウザは関係ない機器用のスタイルシートを読み込みません。
ですので、見た目の装飾だけのためにCSSを書いた場合は、このように、
視覚用メディアの「screen, projection, print」などを指定しておけば、音声ブラウザなどは、このCSSを無視します。(音声ブラウザなどでの読み込みが早くなります。)

<style media="screen, projection, print">
body { background:#FFC; color:#966;}
</style>

「media属性」のデフォルトは「all」。media属性を省略すれば自動的に「all」になります。

<style>要素の scoped属性

★このセクションは2016年7月に全面書きなおしました。

「scoped属性」は、HTML5の策定中に仕様にあり、多くのブラウザで採用されていましたが、HTML5の勧告では仕様から外れました。
参考資料:HTML5 W3C Recommendation 4.2.6 The style element

「scoped属性」を付けた<style>要素だけは「フロー・コンテンツ」の置ける場所に書ける(<head>だけでなく、<body>内にも書ける)というもので、その親要素の範囲内にのみスタイルが適用されるというものでした。

これが、コード的に複雑すぎるということで Chrome は 35 からサポートしなくなりました(ver.35は2014年5月リリース)。
Safari(ver.8.0.8で確認)も、Opera(ver.38で確認)も同じくサポートしていません。
Firefox だけはまだサポートしています。(ver.47で確認)

「scoped属性」をサポートしていないどのブラウザでも、「scoped属性」が無くなったからといって、<body>内に書かれた<style>要素がエラーになるというわけではなく、<style>要素の指定が HTML文書全体に適用されます。

<style scoped> で指定していた場合の対処法は、スタイルを効かせたい要素に idや classを付けて特定してスタイルを指定してあげることですね。

こちらは、この記事を投稿した当時に「scoped属性」を使ったサンプルです↓
(Firefoxで見れる方は「ああこういうものか〜」と思うはず。そのうち Firefoxでも見れなくなるんでしょうね)
→scoped属性のあるstyle要素でCSSをbody内に書いてみよう(別ウィンドウで開きます)

次回予告

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

yuki★hata

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

メールフォームはこちら

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