[CSS] メディアクエリ(Media Queries)を考える

公開日: : CSS, Web制作 ,

Media Queriesとは

Media Queriesとは、画面環境に応じてCSSの適用範囲を切り替える機能のことをいいます。
実際にレスポンシブウェブデザインと言われるものは、このMedia Queriesをうまく使い分けて画面幅に合わせた見た目を表現しています。

現在、スマートフォンの数はとてもたくさんあります。
そして、画面解像度は、どんどん精細なものになってきております。
Xpeeria Z1などは、縦が1920pxもあります。

これは、24インチの液晶モニターの横幅に相当します。
こんなことは、ガラケー全盛の時代には考えられないことでした。

そして、Webの世界では、この画面の高精細化が以外と厄介な問題になりかねません。
ただし、その辺はしっかり考えられているようで、iPhoneでは横幅が320px、Androidでは横幅が360pxとなっているようです。

どのように対応するか

まず、端末に合わせた横幅だよと認識させるためのソースを記述しなければなりません。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

このviewportを設定しておく事で、画面幅を端末の決められた数値として設定されます。
device-widthとなっているところを任意の数値で横幅はこの数値で表示してね!と決める事もできます。

ここからがMedia Queriesの書き方になりますが、方法が2種類あります。

読み込むスタイルシートを振り分ける方法

<link rel="stylesheet" href="pc.css" media="(min-width:769px)">
<link rel="stylesheet" href="tb.css"  media="(max-width:768px) and (min-width: 321px)">
<link rel="stylesheet" href="sp.css"  media="(max-width:320px)">

このようにmedia属性で振り分ける事ができます。
ファイルの数は増えますが、1ファイルの記述量が多くはならないし、スマホの表示がおかしければsp.cssを修正するだけなので、結局のところファイルが分かれている方が管理しやすいかもしれません。

1つのスタイルシート内で記述を分ける方法

@media(min-width:769px){
 h1{...}
 h2{...}
 .wrapper{...}
 #main{...}
}
@media(max-width:768px) and (min-width: 321px){
 h1{...}
 h2{...}
 .wrapper{...}
 #main{...}
}
@media(max-width:320px){
 h1{...}
 h2{...}
 .wrapper{...}
 #main{...}
}

こういう風になります。
この方法は、CSSの行数がかなり多くなり(実際の案件でも5000行近くいきました)修正箇所を探すのが大変になります。
なので、慣れていない人にはオススメはできません。

数あるスマホやタブレットにどう対応するか

先述したとおり、iPhoneは320px、Androidは360pxというデフォルト値がありますので、縦での表示は360pxを分岐点にするのがいいでしょう。
タブレットは、ある程度の妥協点を作るしかありません。

たとえば、iPadを基準にしてしまうのもいいでしょう。
そうすれば、iPadは横が768pxですから(上の例でもそこが基準になっています)、それ以上の大きさのタブレットでは、PCサイトと同様のレイアウトにしてしまっていいでしょう。
それだけのサイズもありますし、見にくさが先行する事もないでしょう。

まとめ

今回紹介した方法以外にも、Media Queriesの方法はあります。
今回は、一般的によく使われる方法を紹介しました。

もっと管理しやすい方法があるかもしれませんので、調べてみてください。

ad

関連記事

[jQuery]背景画像にぼかしを入れるプラグイン

Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

[Dreamweaver] オプション領域を極める!テンプレート上級編

オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[jQuery] 実際の案件でよく使っていたプラグイン4選!

1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常

記事を読む

[Dreamweaver] テンプレートの入れ子

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑