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

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　ウェブページを表示するブラウザのウィンドウサイズは、閲覧環境によってさまざまだ。特定のウィンドウサイズを想定してウェブページを作成すると、それ以外の大きさのウィンドウではコンテンツが読みづらくなるなどの問題が発生する。最近ではiPhoneのような携帯端末からのアクセスも考慮する必要性が出てきているが、サイズ別にページを用意するのは制作にも管理にも手間がかかってしまう。

　こんなとき、CSS3の「Media Query（メディアクエリ）」の機能を利用すれば、ウィンドウサイズに応じて適用するスタイルシートを切り替えて、ユーザーの環境ごとに最適なデザインでページを表示することができる。

　現在、Media Queryの規格はW3Cの勧告候補（Candidate Recommendation）となっており、Firefox 3.5以上、Safari、Google Chrome、Operaが対応している。

ウィンドウの横幅に応じて段組みのレイアウトを変更する

　次のサンプルはMedia Queryの@mediaを利用して、ブラウザのウィンドウの横幅に応じて段組みのレイアウトが変わるようにしたものだ。ウィンドウの横幅が1000ピクセル以上の場合は3段組み、640〜999ピクセルの場合は2段組み、639ピクセル以下の場合は1段組みで表示する。

　なお、3段組みと2段組みは横幅1000ピクセルと640ピクセルの固定レイアウトで、1段組みは横幅100％のリキッドレイアウトで表示するようにした。ウィンドウの横幅を変えればリロードしなくても適用されるスタイルシートが変わるので、対応したブラウザで表示を確認してみてほしい。

ウィンドウの横幅が1000ピクセル以上の場合（クリックで拡大画像を表示）

ウィンドウの横幅が640〜999ピクセルの場合（クリックで拡大画像を表示）

ウィンドウの横幅が639ピクセル以下の場合（クリックで拡大画像を表示）

/* 横幅1000px以上 */
@media screen and (min-width: 1000px) {

/* ３段組みの設定を記述 */
#container{width: 1000px;}
  ...
}

/* 横幅640px以上、999px以下 */
@media screen and (min-width: 640px) and (max-width: 999px) {

/* ２段組みの設定を記述 */
#container{width: 640px;}
  ...
}

/* 横幅639px以下 */
@media screen and (max-width: 639px) {

/* １段組みの設定を記述 */
#container{width: 100%;}
  ...
}

※ブラウザで表示を確認する

iPhoneでの表示