web codery

Media Queriesの基本的な実用方法と書き方

category: HTML/CSS

Media Queries(メディアクエリ)とは、ブラウザのウィンドウサイズやデバイスの向き(スマホ等)などの条件によって、スタイルを適用するデバイスなどを限定するCSS3で追加された機能です。いわゆるレスポンシブなど、ウィンドウサイズに応じて適用するスタイルを変えることが基本的な用途になると思います。

まずは基本的な実用方法と注意点を、その後でもっと詳しくMedia Queriesの使い方について説明していきます

目次

  1. Media Queriesの基本的な実用方法
  2. Media Queriesについてもっと詳しく

Media Queriesの基本的な実用方法

指定できる条件や記述できる場所はいろいろありますが、まずは基本ということで、ブラウザ幅によってスタイルを切り替える指定をCSS内に記述する使い方から説明します。
下が基本構文と指定例です。

/* @media メディアタイプ and (条件) { } */
@media screen and (max-width: 959px) {
  #container {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  #container {
    widht: 960px;
    margin: 0 auto;
  }
}

[メディアタイプ]の部分にはscreen, tv, allなど、linkタグでCSSを読み込む時に指定するmedia属性と同じメディアタイプを指定します。PCやスマホのブラウザを対象にする場合はscreenになります。
[条件]の部分には、ウィンドウの最小サイズを指定するmin-width, スマホなどで画面の向き(縦横)を指定するorientationなど、スタイルを適用する条件を指定します。ブラウザ幅でスタイルを切り替える場合は、min-width, max-widthを使います。

上の例で#containerがbody直下にある場合、ブラウザ幅が959px以下では#containerの幅がブラウザ幅いっぱい、ブラウザ幅が960px以上の場合#containerの幅は960pxで、左右のマージンをautoにすることでセンタリングしています。もちろん、body自体に幅指定がされていない(幅100%)ことが前提です。

補足ですが、上の例のmax-width指定部分は説明のために記載していますが、max-width指定がなくても同じ結果になります。

#container {
  width: 100%;
}
@media screen and (min-width: 960px) {
  #container {
    widht: 960px;
    margin: 0 auto;
  }
}

IE8以下への対策

Media QueriesはCSS3の機能なので、IE8以下には対応していない点に注意が必要です。IE8以下に対応する場合は、Media QueriesをシミュレートしてくれるJavaScriptを読み込みます。

<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->

Media QueriesをシミュレートしてくれるJSはいくつかあり、どのJSも動作が不完全ではありますが、そこそこ再現してくれて動作が軽いrespond.jsを私は使っています。上の指定では、条件コメントでIE8以下の場合だけrespond.jsを読み込んでいます。src部分は.jsファイルを置いた場所によって読み替えてください。

Media Queriesについてもっと詳しく

指定できる場所

指定できる場所は、CSS中の@media, @importと、HTMLのhead内でCSSを読み込むlinkタグのmedia属性です。

/* CSS media */
@media screen and (max-height: 640px) {}
/* CSS import */
@import url(example.css) screen and (min-width: 541px);
/* HTML */
<link rel="stylesheet" href="example.css" media="screen and (min-width: 541px)">

min, max前置詞

min-, max-は、widthなど数値で指定する条件につけることで、〇〇以上などの指定をする場合に使います。例えば、min-widthに600pxを指定した場合は「ブラウザ幅が600px以上」という意味になります。

and, only, notキーワード

andキーワードは上の例でも使いましたが、もう少し詳しく説明します。
まずはコードから

@media all and (min-width: 541px) and (max-width: 960px) { }

andは〇〇かつ〇〇という指定方法で、上の例では
メディアタイプがscreenかつウィンドウサイズが541px~960pxまで
という指定になります。

onlyキーワードは、Media Queriesに対応していないブラウザに指定を無視させるためものです。非対応ブラウザに確実に無視させることができるので、無駄なものを読ませないために使います。

@media only screen and (min-width: 960px) { }

notキーワードは否定(条件を反転させる)効果があります。日本語でいうと「〇〇ではない」です。

/* メディアタイプtvには適用されない */
@media not tv and (min-width: 960px) { }

指定できる条件

指定できる条件は多いので、使う頻度が高そうなものに絞って説明します。

  • width(height)⇒ ブラウザ(表示領域)の幅
  • device-width(height)⇒ デバイスの幅
  • orientation ⇒ デバイスの向き(スマホなど)
  • -webkit-device-pixel-ratio ⇒ デバイスのピクセル密度(主にiOS, Androidブラウザ)
screen and (max-width: 480px)
screen and (max-device-width: 768px)
/* landscape | portrait(横向き or 縦向き) */
screen and (orientation: portrait)
/* CSS上の1pxに2px以上を割り当てるデバイス(主にRetinaディスプレイのデバイス) */
screen and (-webkit-min-device-pixel-ratio: 2)

Retinaディスプレイ採用のデバイスは1インチ当たりのピクセル数が多いため、そのまま表示するとサイト全体が小さく表示されてしまいます。そのため、CSS上のピクセルに倍(縦×横で4倍)などのピクセルを割り当てるものが多いので、例えば、device-pixel-ratioが倍以上のデバイスのbackground-imageに倍サイズの画像を指定することで、より滑らかな画像を表示することができます。今のところwebkit系ブラウザの独自実装なので、-webkit-のベンダープレフィックスが必要です。

複数条件の指定

条件をカンマで区切ることで複数の条件を指定できます。CSSセレクタの複数指定と同じ効果です。

@media screen and (max-width: 480px), 
@media screen and (max-height: 640px) { }

以上、Media Queriesの書き方でした。

参考サイト
メディアクエリ – Web developer guide | MDN

管理人にメッセージを送る





ページトップ