ウィンドウサイズによってスタイルシートを変える

エ・ビスコム・テック・ラボ
2010-03-02 08:00:00
  • このエントリーをはてなブックマークに追加

@mediaの記述形式

 サンプルでは@mediaを利用してウィンドウの横幅に応じて3種類のスタイルシートの設定が切り替わるように指定したが、@mediaは次のような形で記述している。

@media 出力先の種類 and (出力先の詳細) { ... }

出力先の種類

 「出力先の種類」では次のような値を指定することができる。「screen」と指定した場合には出力先がモニタ画面の場合にだけスタイルシートが適用される。出力先の種類に関してはCSS2.1の「Media Types」で定義されており、CSS3もこの定義に従う。

@mediaで指定できる主な出力先の種類
指定できる値出力先の種類
allすべてのデバイス
screenモニタ画面(コンピュータスクリーン)
print印刷出力
handheld携帯端末
tvテレビ
speech音声出力

出力先の詳細

 「出力先の詳細」ではウィンドウサイズや解像度など、出力先に関する細かな条件を指定する。この指定はCSS2.1では定義されておらず、CSS3の「Media Query」で新しく定義されたものだ。出力先の種類の指定に続けて、「and」で区切って記述する。複数の条件を指定することも可能だ。

@media 出力先の種類 and (出力先の詳細) { ... }
@media 出力先の種類 and (出力先の詳細) and (出力先の詳細) { ... }

※下段のコードでは「and」で区切って記述している

 ()内には「media feature: value」の形で条件を記述する。media featureはスタイルシートのプロパティとよく似ており、サンプルでは「min-width」と「max-width」というmedia featureを利用してウィンドウの横幅に関する条件を指定した。

サンプルで使用したmedia feature
media feature指定できる値指定できる条件
min-width長さウィンドウの横幅が指定した値以上の場合
max-width長さウィンドウの横幅が指定した値以下の場合

 たとえば、「出力先がモニタ画面でウィンドウの横幅が1000ピクセル以上の場合」に適用したいスタイルシートの設定は、次の@mediaの{ }内に記述する。

@media screen and (min-width: 1000px) { }

 なお、Internet Explorerは「@media screen」の指定には対応しているが、CSS3で定義された「and ()」の指定には未対応で、「and ()」の記述があると@mediaの設定は無視される。

外部スタイルシートを利用する場合

 スタイルシートの設定を外部スタイルシートとして読み込みたい場合は、@importやを使って次のように指定することができる。

@import url(color.css) screen and (min-width: 1000px);

 次回は、出力先のモニタ画面の解像度に応じてスタイルシートを切り替える方法を紹介したい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]