スマホにはレスポンシブ・ウェブ・デザインで振り分け

Webサイトをパソコン以外のスマホなどにも対応する方法を学びましょう。

昔と今のWebの違い

以前は、Webサイトといえばパソコンから閲覧するのが一般的でした。

2000年以降、携帯が普及しガラケーでWebサイトを閲覧できるようになり、さらに最近ではスマホやタブレットから閲覧するのが一般的になりました。

パソコンとスマホでは画面の大きさが違いますが、実はこの違いはWebサイトにとってはとても大変なことだったのです。というのも、パソコンの画面を想定して作ったWebサイトは、スマホなどから見るとデザインが崩れて見るに耐えない結果になるからです。

そのため、デバイスによってWebサイトのデザインを分ける必要が出てきたのです。

デバイスごとにデザインが崩れてしまうという問題を解決するには、いくつかの方法が考えられますが、簡単に思い付くのは次の３つです。

この３つの対策が主に講じられてきたようです。

ひとつ目の方法は単純にスマホ用のサイトを別途構築する方法です。丸ごと切り分けるのでスマホへの適合性を高く仕上げたい場合には有効ですが、Webサイトはふたつになり、URLもふたつになるので、管理面やSEO面で何かとデメリットが大きくなる方法でもあります。

ふたつ目の方法はサーバサイドでユーザのデバイスを判断してクライアントに送信するCSSなどを振り分ける方法です。

そして、より一般的で手っ取り早いのが３つ目の方法です。この方法をレスポンシブ・ウェブ・デザインと呼びます。

「Responsive」は「反応が良い」というような意味ですが、Webデザインにおいてレスポンシブ・ウェブ・デザインというのは、具体的にはCSSのメディアクエリという技法を使ってスタイルを振り分ける手法が一般的だと思います。

メディアクエリを使うと、デバイスの条件を指定することでデバイスごとにスタイルを振り分けることができます。

条件はHTMLの<link>のmedia属性で指定する方法と、CSSファイル内で@mediaで指定する方法があります。

	<link media="パソコンの条件" href="パソコン用CSS">
	<link media="スマホの条件" href="スマホ用CSS">

	/* パソコンのスタイル */
	@media スマホの条件{
		/* スマホのスタイル */
	}

一方で、HTMLの<meta>でviewportを設定する必要があります。

widthはブラウザがWebページを描画するときの幅の指定で、device-width（デバイスの幅）でレンダリングせよ、といった感じの意味で、initial-scaleは初期倍率の指定で、レンダリングした結果は拡大縮小せずに1.0倍で表示せよ、といった感じの意味です。