[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法

ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。

サイトのキャプチャ

Different Stylesheets for Differently Sized Browser Windows

デモではブラウザのサイズを変更すると、それに応じてレイアウトが変わります。

デモのキャプチャ

デモページ(Wide Layout)

デモのキャプチャ

デモページ(Medium Layout)

デモのキャプチャ

デモページ(Narrow Layout)

サイズに合わせてスタイルシートを変更する方法は、二種類が紹介されています。

CSSで実装

「device-width」を使用して、下記のように記述します。
デモページ:CSS版

CSS

対応ブラウザはFirefoxのMozilla系、Safari, ChromeのWebkit系、Operaの最新バージョンでサポートしています。
IEはIE9を含み、現在のところ非対応とのことです。

JavaScriptで実装

IEを含むすべてのブラウザに対応させたい場合は、これらの方法がおススメです。
jQueryでブラウザの幅を判別して、適したスタイルシートにします。
デモページ:JavaScript版

スクリプトはjQueryを外部ファイルで指定し、下記のスクリプトを追加します。

JavaScript

HTML

sponsors

top of page

©2018 coliss