WebTutorial

WebTutorial

XHTML 入門 -- 8

Wrox Press
2001年8月8日 / 00:00
 

メディア依存のスタイルシートを作成

この練習では、@media ルールを使って、 複数のメディアタイプに対応できるスタイルシートを作成する。 前章で出た例と類似しているので、 スクリーンショットやスタイル要素のない出力などは表示しない。 これまで、 異なるメディアにはそれぞれ異なったスタイルが必要だと習ったが、 今回 @media ルールを使った信頼できる例を以下に示す。

1. テキストエディタに以下を入力し、「atmedia.css」名で保存しなさい。

 @media screen {
body { font-size: 18pt }
span.speaker { background-color: yellow }
.stage { font-style: italic }
p.stage { text-align: center }
}
@media print {
body { font-size: 10pt }
span.speaker { font-weight: bold }
.stage { font-style: italic }
p.stage { text-align: center }
}
今度は、link.htm ファイルの <head> 部分を次のように書き換え、 「atmedia.htm」名で保存しなさい。
 <head>
<title>Tempest @media</title>
<link rel="stylesheet" type="text/css" href="atmedia.css"/>
</head>
これをブラウザで表示し、ページを印刷してみると、 両方とも atmedia.css ファイルのスタイルに沿って正しく表示されているのがわかる。 さらに、前章の例で <link> 要素を使ったステップ6と7とに一致していることがわかる。

解説

前回同様に外部スタイルシートを作成したが、 今回は、画面表示用と印刷ページ用の2つの @media ルールを使い、 <link> 要素を使って参照した。 前回と違って、<link> 要素のメディア属性を使用しなかった。 これが、すべてのメディアタイプに対応した外部スタイルシートを使いたい理由だ。

「@import」ルールの使用

スタイルシートをメディアタイプに関連付けする4つ目のメカニズムは、 @import ルールの使用だ。 これは、別のスタイルシートのスタイルルールを、 XHTML 文書のスタイルセクションに自動的に取り込む方法である。

 <style type="text/css">
<!--
@import url("mystyle.css");
/* rest of style section */
-->
</style>
メディア依存でインポートするなら、 次のように、url の後にそのメディアタイプを追加すればよい。
 <style type="text/css">
<!--
@import url ("mystyle.css") screen;
/* rest of style section */
-->
</style>
残念なことに、本書が書かれた頃は主要なブラウザはメディア依存の @import ルールに対応していなかった (マイクロソフトの Internet Explorer は、全般的な @import ルールに対応していたが)。 インポートするファイルは必ずしもローカルである必要はない。次の例は有効である。

 @import url("http://www.madeupdomain.com/reallygoodstyle.css"); 
これは、ブラウザに www.madeupdomain.com のサーバーからスタイルシートをダウンロードし、 そのスタイルを使って文書を表示するよう教えている。 インポートされたシートのスタイルは、 先に説明したタグを使って XHTML 文書内のスタイルを指定することで上書きされるだろう。 スタイルシートをインポートする方法のよい点は、 すべての Web ページ用の基本テンプレートを作成できることである。 そこから、個々の文書は、スタイルを上書きして枝別れしていく。

「@media」ルールを使う
初めに戻る
Print と Paginated メディア
【関連記事】
XHTML 入門 -- 9
XHTML 入門 -- 6
XHTML 入門 -- 7
XHTML 入門 -- 3
XHTML 入門 -- 4

New Topics

Special Ad

ウマいもの情報てんこ盛り「えん食べ」
ウマいもの情報てんこ盛り「えん食べ」 「えん食べ」は、エンジョイして食べる、エンターテイメントとして食べものを楽しむための、ニュース、コラム、レシピ、動画などを提供します。 てんこ盛りをエンジョイするのは こちらから

Hot Topics

IT Job

Interviews / Specials

Popular

Access Ranking

Partner Sites