スマートフォンでも見やすい web ページを作るために media queries を使うという選択

最近スマートフォンを使って web ブラウジングしていて気になることがあります。それは、幅固定の web ページや複数カラムの web ページが非常にみにくい ということ。当然ながらスマートフォンの画面の横幅は狭いため、PC 用に作られた幅固定や複数カラムのページは端末の画面の横幅に収まりきらずに横スクロールする必要が出てくる可能性があるのです。

皆さんも経験があると思いますが、横スクロールする必要があるページってみにくいですよね。「幅固定の web ページのレイアウトはやめるべき」という論調は昔からありました *1 が、PC で見る分には幅固定でもそれほど問題にならない *2 ため、開発者としては作りやすい幅固定の web ページで作ってしまう、という人が多いような気がします。

しかしながら、スマートフォンで見る場合、PC ほど自由が利かない *3 ことが多く、横スクロールが出るページは我慢して見ないといけない、という状況になりかねません。そんなわけで、スマートフォンでも見やすいページを作るために media queries を使って欲しいなー、という個人的な思いを綴っておきます。

Media Queries とは

Media queries というのは、CSS2 の media types *4 を発展させたものです。 Media types では、スタイルシートを適用するメディアのタイプ (画面表示や印刷など) を指定することができました。 Media queries では、メディアのタイプのほかに画面の横幅や縦幅も指定することができます。詳しいことは W3C 勧告候補 (Media Queries) や、下記ページなどをご覧ください。

現在のところ、最新の Firefox、Opera、Safari、Chrome で使用することができるようです。

画面幅が小さい場合に 2 段カラムを解除する

Media queries を使って、画面が小さい場合にでも見やすいレイアウトを実現する方法の例を示します。ここでは下図のように、2 段カラムを考えます。左カラムがメインの領域で幅は可変、右カラムがサブの領域で、幅は固定です。

左カラムの幅が可変ですので、ある程度画面サイズが小さくなっても横スクロールバーは出現せず、ある程度の見易さを維持できます。しかしながら、画面サイズをどんどん小さくしていくと、メイン領域である左カラムの方が幅が狭くなってしまい、横スクロールバーは出ていませんがこれはこれでみにくくなってしまいます。

このようなレイアウトを使う場合、media query によって画面幅があるサイズ以下の場合は 2 段カラムを解除するようにすると見やすくなります。以下に CSS のサンプルを示します。

#test1 { /* 2 つのカラムの親 */
	padding-right: 240px;
}
#test1_1 { /* 左カラム */
	float: left;
	margin-right: -100%;
	width: 100%;
	background-color: #EEEEFF;
}
#test1_2 { /* 右カラム */
	float: right;
	width: 218px;
	margin-right: -236px;
	background-color: #FFEEEE;
}
/* Media queries により, 画面幅が 500px 以下の場合は
 * 2 段カラムを解除する */
@media (max-width: 500px) {
	#test1 {
		padding-right: 3px;
	}
	#test1_1,
	#test1_2 {
		float: none;
		width: auto;
		margin-right: 1px;
	}
}

こうすることで、下図のように画面幅が小さい場合に 2 段カラムを解除できます。

実際のサンプルもご覧ください。

Media Queries を使う理由

画面の幅によってレイアウトを変更する方法はいくつかあると思いますが、media queries には以下のような利点があります。

使いやすい : CSS の仕様として勧告候補になっていますので、CSS との親和性が高くて使いやすいと思います。直接 CSS ファイルの中に書くこともできますし、HTML の link 要素の属性で指定することもできます。
多くの環境で使用できる : 現在のところ、IE 以外の主要なブラウザではサポートされています。特にこの記事の主題は「スマートフォンでも見やすいページを作る」ということですので、iPhone や Android のデフォルトのブラウザで使用できるということは大きいと思います。また、JavaScript を用いる方法では JavaScript を無効にしていると使えませんが、media queries なら CSS が有効であれば使えます。

記述しやすい、っていうのは結構重要じゃないでしょうか。例えば 2 段カラムを行うような CSS を書いたとして、そのすぐ下に @media ルールを使って media queries を適用し、指定の画面幅以下の場合は 2 段カラムの CSS を無効にするような CSS を記述できるわけです。「まあそれぐらいなら書いてもいいかな」って気分になりませんか？

Media Queries を使いましょう！

というわけで、画面幅が小さい端末でも見やすいページを作るために media queries を使いましょう！

*1:例えば「横幅を固定するな！ − 後悔しないためのWebデザイン」など。

*2:そもそも PC で見る分には横スクロールする必要がない程度の横幅で web ページのレイアウトがなされますし、ブラウザのウィンドウサイズを小さくしていて横スクロールバーが出てしまう場合はウィンドウサイズを大きくするとか、ユーザースタイルシートを適用するとか、そういう方法で回避可能なわけです。

*3:デフォルトのブラウザ以外は正常に動かないって端末もありますし、ユーザースタイルシートの適用ができないどころか、CSS を適用しないという設定もできないアプリもあります。

*4:詳しくは W3C の勧告候補 (Media types) をご覧ください。