ホーム >  WEB全般 >  メディアクエリで指定する条件

投稿日:   |  最終更新日:

メディアクエリで指定する条件

WEB全般レスポンシブデザイン制作

 Media Queriesの概要と記述例について前回紹介しました。

→ メディアクエリで画面サイズごとCSSを切り替えるには?

Media Queriesの条件分岐に利用できる指定方法には、これまでにご紹介したものも含め、一例を以下でご紹介します。

記述例

width

 横幅を条件にしてCSSを制御します。
※スクロールバーを表示する場合は、スクロールバーの幅も含みます。

max-width

 表示領域が700px以下のとき適用します。

@media screen and (max-width: 700px) {
   /* 700px以下の場合 */
}

min-width

 表示領域が700pxを超える場合適用します。

@media screen and (min-width: 700px) {
   /* 700px以上の場合 */
}

複数条件

 andで最大幅と最小幅を両方指定します。

@media screen and (max-width: 800px) and (min-width: 400px) {
   /* 800px以下~400px以上の場合 */
}

height

 縦幅を条件にしてCSSを制御します。
※スクロールバーを表示する場合は、スクロールバーの幅も含みます。

max-height

 高さが700px以下のとき適用します。

@media screen and (max-height: 700px) {
   /* 高さ700px以下の場合 */
}

min-height

 高さが700pxを超える場合適用します。

@media screen and (min-height: 700px) {
   /* 高さ700pxを超える場合 */
}

複数条件

 andで横幅と縦幅を両方指定します。

@media screen and (max-width: 800px) and (max-height: 500px) {
   /* 横幅800px以下で、高さ500px以下の場合 */
}

device-width

 画面の横幅を条件にしてCSSの適用を制御します。

PC:(ブラウザのウインドウ幅に関係なく)ディスプレイの幅を示。
スマートフォン:(端末の画面の物理的な解像度ではなく)ブラウザの仮想的な解像度での横幅を表示。

例)iPhone5の画面の横方向の物理的なピクセル数は640pxです。
  しかし、device-widthの値は320pxです。

@media screen and (max-device-width: 1024px) and (min-device-width: 640px) {
   /* 1024px以下~640px以上の場合 */
}

device-height

 画面の高さ(縦方向の長さ)を条件にしてCSSの適用を制御します。
「device-width」と同じく、PCならディスプレイの高さを示し、スマートフォンならなら、ブラウザの仮想的な解像度での高さを示します。

例)iPhone5なら画面の縦方向の物理的なピクセル数は1,136pxです。
  しかし、device-heightの値は568pxです。

@media screen and (max-device-height: 768px) and (min-device-height: 480px) {
   /* 768px以下~480px以上の場合 */
}

orientation

 端末の向きを条件にしてCSSの適用を制御します。
縦置き:「portrait」
横置き:「landscape」

@media screen and (orientation: portrait) {
   /* 縦置き(縦長)の場合 */
}
@media screen and (orientation: landscape) {
   /* 横置き(横長)の場合 */
}

トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター、フロントエンドエンジニア 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 20

最近の投稿
人気記事
カテゴリー
広告