japan.internet.com
WebTutorial2001年8月8日 00:00

XHTML 入門 -- 8

この記事のURLhttp://japan.internet.com/webtutorial/20010808/1.html
著者:Wrox Press
海外internet.com発の記事

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

この練習では、@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 メディア
japan.internet.comのウエブサイトの内容は全て、国際法、日本国内法の定める著作権法並びに商標法の規定によって保護されており、その知的財産権、著作権、商標の所有者はインターネットコム株式会社、インターネットコム株式会社の関連会社または第三者にあたる権利者となっています。
本サイトの全てのコンテンツ、テキスト、グラフィック、写真、表、グラフ、音声、動画などに関して、その一部または全部を、japan.internet.comの許諾なしに、変更、複製、再出版、アップロード、掲示、転送、配布、さらには、社内LAN、メーリングリストなどにおいて共有することはできません。
ただし、コンテンツの著作権又は所有権情報を変更あるいは削除せず、利用者自身の個人的かつ非商業的な利用目的に限ってのみ、本サイトのコンテンツをプリント、ダウンロードすることは認められています。

Copyright 2014 internet.com K.K. (Japan) All Rights Reserved.