Media Queriesでウィンドウサイズやデバイスに合わせてCSSを振り分ける:CSS3
CSS3のMedia Queriesという便利な仕様を使ってウィンドウサイズやスマートフォン等のデバイスに合わせて適用させるCSSを振り分ける方法をメモ。
Media Queriesの記述方法
Media Queriesの記述方法には、外部CSSの読み込み時に振り分ける方法と、CSSファイル内で部分的に振り分ける方法があります。
↓外部CSSの読み込み時に振り分ける場合
<link href="css/style1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" > <link href="css/style2.css" rel="stylesheet" type="text/css" media="only screen and (min-height: 640px) and (max-width: 1024px)" >
↓CSSファイル内で部分的に振り分ける場合
@media screen and (max-device-width: 320px) { /*ここに内容*/ div{ ------ } } @media screen and (min-height: 640px) and (max-width: 1024px) { /*ここに内容*/ div{ ------ } }
みたいな感じに記述すればOK。
Media Queriesの振り分け条件
Media Queriesの振り分け条件に指定できる主なパラメータはそれぞれ
max-width: | ウィンドウサイズの最大幅。このサイズより小さい場合に適用 |
---|---|
min-width: | ウィンドウサイズの最小幅。このサイズより大きい場合に適用 |
max-height: | ウィンドウサイズの最大高さ。このサイズより小さい場合に適用 |
min-height: | ウィンドウサイズの最小高さ。このサイズより大きい場合に適用 |
max-device-width: | デバイスサイズの最大幅。このサイズより小さい場合に適用 |
min-device-width: | デバイスサイズの最小幅。このサイズより大きい場合に適用 |
max-device-height: | デバイスサイズの最大高さ。このサイズより小さい場合に適用 |
min-device-height: | デバイスサイズの最小高さ。このサイズより大きい場合に適用 |
device-pixel-ratio: | デバイスの解像度(webkit) |
orientation: | デバイスの向きで判定 portrait ・・・縦向き landscape・・・横向き |
IE6~8の対応
IE6~8はCSS3に対応してないので、Media QueriesをIEに対応させたい場合は
>css3-mediaqueries-js
このプラグインを使用すればOK
<!--[if lt IE 9]> <script src="js/css3-mediaqueries.js"></script> <![endif]-->
みたいな感じでIE9以下に読み込ませてあげます。
CSSのおすすめ参考書
ポチップ