[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ
Post on:2010年10月12日
sponsors
CSS3のMedia Queries（メディア クエリ）を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。
[ad#ad-2]
スタイルシートの分け方は2種類あります。
プロパティ単位でデバイスごとにスタイルシートを設定
「/* Styles */ 」の箇所にスタイルシートを記述。
スマートフォン（（縦長・横長）
|
1 2 3 4 5 |
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } |
スマートフォン（横長）
|
1 2 3 4 |
@media only screen and (min-width : 321px) { /* Styles */ } |
スマートフォン（縦長）
|
1 2 3 4 |
@media only screen and (max-width : 320px) { /* Styles */ } |
iPad（縦長・横長）
|
1 2 3 4 5 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } |
iPad（横長）
|
1 2 3 4 5 6 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } |
iPad（縦長）
|
1 2 3 4 5 6 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } |
デスクトップのブラウザ用（横長）
|
1 2 3 4 |
@media only screen and (min-width : 1224px) { /* Styles */ } |
大きいモニター用
|
1 2 3 4 |
@media only screen and (min-width : 1824px) { /* Styles */ } |
iPhone4などの高解像度用
|
1 2 3 4 5 |
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } |
[ad#ad-2]
ファイル単位でデバイスごとにスタイルシートを設定
1ファイルをそのデバイス用にする場合は、link要素に設定する方が便利でしょう。
スマートフォン（（縦長・横長）
|
1 2 3 |
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)"> |
スマートフォン（横長）
|
1 2 |
<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)"> |
スマートフォン（縦長）
|
1 2 |
<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)"> |
iPad（縦長・横長）
|
1 2 3 4 |
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)"> |
iPad（横長）
|
1 2 3 4 5 |
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"> |
iPad（縦長）
|
1 2 3 4 5 |
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"> |
デスクトップのブラウザ用（横長）
|
1 2 |
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1224px)"> |
大きいモニター用
|
1 2 |
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)"> |
iPhone4などの高解像度用
|
1 2 3 4 |
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"> |
サイトではプロパティ単位のスタイルシートをまとめたファイルがダウンロードできます。
Hardboiled CSS3 Media Queries
sponsors
