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

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

 ウェブページを表示するブラウザのウィンドウサイズは、閲覧環境によってさまざまだ。特定のウィンドウサイズを想定してウェブページを作成すると、それ以外の大きさのウィンドウではコンテンツが読みづらくなるなどの問題が発生する。最近では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ピクセル以上の場合(クリックで拡大画像を表示) ウィンドウの横幅が1000ピクセル以上の場合(クリックで拡大画像を表示)
ウィンドウの横幅が640〜999ピクセルの場合(クリックで拡大画像を表示) ウィンドウの横幅が640〜999ピクセルの場合(クリックで拡大画像を表示)
ウィンドウの横幅が639ピクセル以下の場合(クリックで拡大画像を表示) ウィンドウの横幅が639ピクセル以下の場合(クリックで拡大画像を表示)
/* 横幅1000px以上 */
@media screen and (min-width: 1000px) {

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

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

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

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

/* 1段組みの設定を記述 */
#container{width: 100%;}
  ...
}
ブラウザで表示を確認する

iPhoneでの表示

  • 新着記事
  • 特集
  • ブログ