media

英単語「 media 」は、単語「 medium 」の複数形で、「 medium 」( ミディアム ) は、形容詞として 2 つのサイズ ( 量, 長さ, 温度 等 ) の「 中間 」を意味し、同義語に「 average 」があると言います。

加えて「 medium 」は、名詞として、「 情報を伝達する手段 」や「 媒体 」の意味を持っています。

ここで確認する CSS のメディアは、「 情報を伝達する手段 」,「 媒体 」としての「 medium 」で、その複数形である「 media 」です。

CSS の media

CSS は、(0x14c) や (0x150) 等で確認した様に、HTML ドキュメントの文書構造をどの様に表現するかを定義することを目的としますが、HTML ドキュメントを表示するメディア ( 伝達手段 ) はコンピュータのディスプレイデバイスだけとは限りません。

例えば、それは「 紙 」であったり「 プロジェクタ用のスクリーンディスプレイ 」であるかもしれませんし、「 点字 」や「 音声 」であるかもしれません。

そこで、CSS は、こうした異なる特性を持ったメディアタイプに合わせたスタイルを、個別に定義出来る機能を提供しています。

メディアのタイプ毎にスタイルを指定するには、メディアクエリ「 media 」と「 at-rule 」と呼ばれる規則セットを利用します。

@media rule set の構文

CSS の「 at-rule 」は、記号「 @ 」( U+0040 COMMERCIAL AT) とそれに続く識別子、それからスタイルを記述した文から構成されます。

「 at-rule 」には、「 @cherset 」や「 @import 」等いくつかの種類がありますが、ここでは「 @media 」を確認します。

「 ar-rule 」は、次の構文で記述します。

@media <media types> {

  /* rules */

}

「 /* rules */ 」の部分には、通常のスタイルシートの構文を任意に記述することが出来ます。

media type

「 @media 」ルールに指定可能な「 media type 」には、次のものがあります。中でもよく知られているのは「 screen 」,「 print 」,「 projection 」,「 all 」だとのことです。

media type	機能
all	すべてのデバイス。
braille	点字触覚フィードバックデバイス。
embossed	ページ媒体の点字印刷。
handheld	( 小さな画面と制限された通信帯域の ) 携帯デバイス。
print	印刷物や印刷プレビュー　( NOTE: ページ媒体固有の問題や書式については Paged Media や Media を参照 )。
projection	プロジェクタ等のスクリーン ( print と同様のページ媒体の位置付け )。
screen	カラーのコンピュータディスプレイデバイス。
speech ( CSS2 では aural ? )	スピーチシンセサイザー ( 音声合成装置 )。
tty	固定ピッチの文字グリッドを持つメディア。例えばテレタイプ, 端末装置, 制限されたディスプレイのポータブルデバイス等 ( NOTE: tty では単位 pixel を使うべきではない )。
tv	テレビジョン型 ( 低解像度, カラー, スクロールに性ゲインがある画面, 音声利用可能 ) のデバイス。

media type を定義する方法

ひとつのスタイルシートの中で、複数のメディア用のルールセットを一度に定義することも可能ですが、特定のメディア毎に複数のスタイルシートを作成しておいて、それらの定義を必要に応じて読み込む方法もあります。

例えば HTML ドキュメントでは、要素「 link 」の属性「 media 」を利用してメディアタイプを定義出来るといいます。

また、スタイルシートでは、冒頭で「 @import 」at-rule を利用して目的のメディアタイプに必要なスタイルシートのみを読み込んで利用することも出来る様です。

この様に、メディアタイプ毎のスタイルシートを個別のファイルとして定義しておくことは、スタイルシートの構造化 ( 組立, 構成 ) に役立つこともあるとのことです。詳細は以下を参照する必要があります。

 7 Media types - W3C Recommendation

0x166 -> 0x167 へ

「 at-rule 」がどの様なものなのか。そうした初歩的な理解は得られた様に思います。CSS のスタイルがこれほど様々なメディアに対応出来るのは驚きです。

次回は、「 @page 」というルールを確認します。

参考情報は書籍「 初めての Perl 第 6 版 」を中心に perldoc, Wikipedia および各 Web サイト。それと詳しい先輩。

目次 - Perl Index