閉じる
CSS
  • 2011.08.26 (Fri)

CSS3『メディアクエリ』の使い方と実装サイトの紹介

スマートフォンなどモバイルデバイスのシェアが拡大する中、ブラウザやディスプレイサイズなども含め多種多様にwebサイトを閲覧する状況が増えてきました。

そうした状況でもCSS3のメディアクエリ(Media Queries)をサイトへ導入することで、ユーザに対してストレスなく閲覧させることが出来ます。

当サイトもメディアクエリを導入しないといけないのですが、やるならビジュアル等もリニューアルを視野にいれなくては。。。まずは備忘録という事で….

目次一覧

1.メディアクエリとは?

下記のようなHTML4 でも定義されていたスタイルシート機能、PC用ブラウザでは『screen.css』、印刷時には『print.css』を指定してあげることでそのスタイルが適応されます。

/* PC用スタイルシート */
<link rel="stylesheet" href='screen.css' type="text/css" media="screen" />
/* プリント用スタイルシート */
<link rel="stylesheet" href='print.css' type="text/css" media="print" />

メディアクエリは上記のようなスタイルシート機能、異なる媒体型 (media types)を拡張したものになり、デスクトップブラウザはじめ、iPhone, iPadなどのディスプレイ解像度や仕様など閲覧するデバイスに応じてスタイルシートの割り振りを指定してあげることができます。

目次へ戻る

2.メディアクエリを扱う上での注意

2-1.ユーザーエージェントを使ったスタイルシートの割り振りも一つの策

10月に発売されると噂のiPhone5(4S?)ですが、画面サイズなど仕様がどうなっているのか分かりません。

そういったわからない場合は無理せず個人主観ではなくユーザー視点でどう見えるかが一番なのでユーザーエージェントを使用し振り分ける事も手です。

ユーザーエージェントとは、Webサイトへのアクセスの際に利用者がどんな末端からアクセスしているかサーバやプログラムでリソースの取得等を行い判別して振り分けます。

構築の際は色んな方法がありますが一般的には『.htaccess』『PHP』を使った方法あります。

取得した情報を元に末端にあった個別で用意したページ,またはスタイルシートに切り替える処理をします。

つまり、iPhoneからPC用向けのページにアクセスされた場合に、iPhone向けのページへとリダイレクトされます。

iPhone(iPod)でアクセスを『.htaccess』で判別させるユーザーエージェントの場合

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} iPhone [OR]

RewriteCond %{HTTP_USER_AGENT} iPod [OR]

RewriteCond %{HTTP_USER_AGENT} UP.Browser

RewriteRule ^$ /iphone.html [R]

『PHP』の場合

<? php
 $ua = $_SERVER['HTTP_USER_AGENT'];
 if ((strpos($ua, “iPhone”) !== false) || (strpos($ua, "iPod") !== false)){
  //iPhone・iPodの場合の処理
  include('iphone.html');
 }else{
  //それ以外のブラウザの場合の処理
  include('pc.html');
 }
?>

2-2.メディアクエリはIEでは使えない!?

今やweb制作者には問題児扱いのIEですが、シェアがある以上、根気よく付き合っていかなければいけませんね…っと言いたいところなのですが、IE自体CSS3に対応しおらずメディアクエリを認識することができないので、GoogleのライブラリからダウンロードできるJavaScriptの導入や、スタイルシートへIE用に追記をする必要があります。

Google JavaScriptライブラリ 『css3-mediaqueries-js』

css3-mediaqueries-js記述方法 <head>内に下記を記述

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

◯メディアクエリ 対応ブラウザ

・Firefox 3.5+

・Chrome

・Safari 3+

・Opera 7+

・IE9

2-3.ただメディアクエリを導入するだけではダメ

メディアクエリを導入することで、デバイスに合った仕様になるので、スマートフォンなど一見閲覧し易くなるイメージがありますが、webブラウザに比べれば視認性や可読性は明らかに下がります。

そこで、スタイルを組む際、デバイスに合ったフォントの大きさやボタン、操作性も考えなくてはいけません。

あと、当ブログのような長ったらしいブログ記事をたまによく見かけ、尚且つメディアクエリを導入してるブログを見かけたりするのですが、そんなブログは誰もiPhoneやiPadで見ようとは思いません。

少なくとも僕はwebサイトで閲覧したほうが良いと思っています。

例えばスマートフォンでは長い記事には、JavaScriptやjQuery Mobileなどを使用し要所で折り返し機能を実装するなどの工夫が必要だと思います。

記事の書き手にしたら、記事を作る際手間が増えますがメディアクエリを導入したからには、殆どのデバイスに対応したからと満足で終わらせず、可読性も考え記事を書くようにしなくてはいけないですね。

目次へ戻る

3.メディアクエリの指定方法

3-1.まずは各デバイスのディスプレイサイズをメモ程度に覚えましょう

iPhone 320px x 480px

iPhone4 640px x 960px

iPad 768px x 1024px

iPhone4のピクセル数は3G/3GSの2倍です

androidのディスプレイサイズは下記が参考になります。

Hacking My Way ~ itogのhack日記さんのAndroidデバイスのディスプレイサイズ、DPI一覧

ちなみにですが、androidでメディアクエリを検討する場合はandroid2.1以降からのサポートとなっているようです

3-2.HTMLへ外部スタイルシートを設定する方法

HTMLファイルの<head>内にデバイスに応じた<link>要素を定義させてあげます

iPhoneの場合

<link rel="stylesheet" href="iphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

iPadの場合

<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

「min-device-width」は最小の横幅が指定された幅以上であった場合という意味。

「max-device-width」はその逆で、最大の横幅が指定された幅以下であった場合という意味です。

上記を踏まえ、別に横(ランドスケープ)、縦(ポートレート)、高解像度のディスプレイモニタなど個別で指定してあげる事が可能です。

3-3.スタイルシートへ記述する方法

iPhoneの場合

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* …ここにstyleを記述... */
}

iPadの場合

@media only screen and
(min-device-width : 768px) and
(max-device-width : 1024px) {
/* ...ここにstyleを記述... */
}

目次へ戻る

4.viewportで表示を最適化する

メディアクエリを使用してデバイスに応じたCSS処理の方法を紹介しましたが、もう一点対処しなければならない問題があります。

メディアクエリを応用したとしても、iPhoneのデフォルトブラウザSafariでは独自仕様のため、下記のようになります。

つまり、解像度を横幅980pxで仮想シミュレーションしてサイトを表示させるので、サイトを横幅320pxでレイアウトしても縮小され表示されてしまいます。

そのため、下記のようなviewportを<mata>タグに記述して表示領域をコントロールしてあげる必要があります。

<meta name="viewport" content="width=980,initial-scale=1.0,user-scalable=yes,maximum-scale=3.0" />

● width

表示領域の指定をします。数値とdevice-widthが指定できます。

何も指定しなければデフォルトで980pxがあてられます。

device-widthでは「portrait」「landscape」関係なく、横幅320pxになります。

● initial-scale

widthで設定した値の初期表示の倍率です。

例えばwidthが980pxでinitial-scale=2.0と指定した場合、2倍にズームした状態で表示されます。

つまり画面では490pxの拡大された内容が表示されます。

● user-scalable

指でズームやタップで拡大をさせるかどうかです。値はyesかnoで指定します。

● maximum-scale

user-scalableで拡大をyesにした場合の最大倍率です。

基本的には全てデフォルトの値に指定してあげれば、ユーザー的にもストレスなく優しいと思います。

ですので、下記のような指定がいいでしょう。

<meta name="viewport" content="width=device-width" />

そうすれば前図のような状態から下図のようなサイトが表示されます。

目次へ戻る

5.まとめ

まだまだ書き足らない細々したハックがたくさんあるのですが、ザッとメディアクエリを使用する上での基本的な方法を大きくまとめてみました。

今回は備忘録的にまとめたものなので、改めて実装してから新しい発見や気付きも得られるのかなと思いました。

今後もメディアクエリに関するハックなどまとめていけたらと思います。

目次へ戻る

6.おまけ。。。メディアクエリを使用したサイト紹介

Kayak Capers

Food Sense

Cisco London 2012

FoodDrinkEurope

Kings Hill Cars

目次へ戻る