というわけで、レスポンシブ Web デザインを取り入れてみた…

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

というわけで、何となくですがレスポンシブ Web デザインのことがわかったような気になった :-P ので、実際に制作していくことに…

まず、IE8にも対応させるために css3-mediaqueries.js というスクリプトを読み込むように記述。

<!--&#91;if lt IE 9&#93;>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->

最近話題になってた気がする Google HTML/CSS Style Guide には

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

と、書いてあったりするので

<!--&#91;if lt IE 9&#93;>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->

のように記述する方がいいのかな…

次に Viewport の記述。

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

Viewport をどのように記述するのがベストなのかよくわかっていない。
ただ、user-scalable『no』に設定する人もいるようですが、ユーザビリティの観点からするとあまりお勧めできないと思います。
Viewport に関しては、Viewport [iPhone生活] で詳しく解説されていますので、ご覧ください。

で、結構重要な要素ではないかと思っているブレイクポイントの設定。
最近では、色々なサイズのスマートフォンやタブレットがありますので、どのサイズで表示を切り替えるかは考慮する必要がありますよね。
とりあえず、

@media only screen and (min-width: 768px) and (max-width: 990px) {
	/*スタイルを記述*/
}
@media only screen and (max-width: 767px) {
	/*スタイルを記述*/
}

にしました。
スクリーンサイズが、990px より大きければ PC 用のスタイルで、768px 〜 990px だとタブレット用のスタイルその1、767px 以下だとタブレット用スタイルその2で表示します。
本来は、スマートフォン用(PORTRAIT)に

@media only screen and (max-width: 480px) {
	/*スタイルを記述*/
}

もしくは、

@media only screen and (max-width: 320px) {
	/*スタイルを記述*/
}

というようなブレイクポイントも必要かも知れませんが、このサイトはスマートフォンでアクセスがあった場合には、プラグインでテーマを切り替えていますので、今回は設定なし。

ブレイクポイントに関しては、Design Spice » Blog Archive » レスポンシブwebデザインで制作する時のポイントで詳しく解説されています。

で、先ほどのブレイクポイントにあわせて、コンテンツ幅をそれぞれ 960px、720px、480px に設定しました。
スクリーンサイズに合わせて上記のコンテンツ幅を設定したのですが、偶然にも 2/3、1/2 というサイズになりました。
すべてをレスポンシブ Web デザインでカバーするのであれば、これにコンテンツ幅320px の設定・スタイルを追加すれば OK ですよね。

レスポンシブ Web デザインを考慮したデザイン・レイアウトではないので、『無駄な記述も多いなぁ…』と思いながらひたすらスタイルシートに記述。
この記事を読んでいる人は、ブラウザの幅を変えるとどのように変化するかわかると思いますので、必要ないかも知れませんが一応こんな感じです。

991px以上のスクリーンサイズで見た時のスクリーンショット

991px 以上のスクリーンサイズで見た時

768px 〜 990pxのスクリーンサイズで見た時のスクリーンショット

768px 〜 990px のスクリーンサイズで見た時

767px以下のスクリーンサイズで見た時のスクリーンショット

767px 以下のスクリーンサイズで見た時

スマートフォン用のテーマに切り替わった時のスクリーンショット

スマートフォン用のテーマに切り替わった時

テーマを切り替えなかった時のスクリーンショット

ちなみに、テーマを切り替えなかった時はこれ

と、こんな感じになったのですが、iPod touch で見た時に何故か文字の大きさがおかしい。
PC で見ると問題ない。
すべての文字の大きさがおかしいというのではなく、あるブロックの文字だけ表示が大きくなっています。

フォントサイズのバグ(?)

左の一部のブロックだけフォントサイズが大きく、右は対処後。

左の画像の一番下の文字と同じフォントサイズですが、何故か大きく表示されています。
MobileSafari(Webkit)には、フォントサイズを自動調整する機能があるらしく、試しにそのプロパティを記述してみた。

body {
	-webkit-text-size-adjust : none;
}

すると、右の画像のように他の文字と同じフォントサイズになりました。
PC の Safari ではこのように一部のフォントサイズが大きくなるということはないので、iPod touch(iPhone)のバグかな?
すっきりしないけど、まっ、いいか :-)
ちなみに手元に Android がありませんので、上記の記述の有無の違いによるフォントサイズの検証はできていません。

とりあえず、これでレスポンシブ Web デザインを取り入れたサイトができて、実際にそれぞれのスクリーンサイズで見ても特に問題はなさそう。
すべての Android 端末で確認したわけではありませんが、大丈夫じゃないかな。
でも、レスポンシブ Web デザインでサイトを制作する場合は、やはり、レイアウトの設計をしっかりとしないといけないというのを痛感しました。
とはいえ、レスポンシブ Web デザインを考えていなくてもこれだけできてしまうというのも、レスポンシブ Web デザインを取り入れる利点かもね。
まぁ、このサイトの場合は、ベーシックなレイアウトなので比較的簡単に対応できたのかもしれない。

それにしてもこれだけ色々な Android 端末があると確認が大変です。
すべて買い揃えるのは無理だし、ヨドバシカメラさんのお世話になるしかないかぁ… ;-)

あと、試していないので未検証ですが、画像に関しては Response.js という JavaScript があります。
解説は、レスポンシブウェブデザインの画像問題を解決する「Response JS」-JavaScript Library Archive がわかりやすいかな。
もうひとつ Adaptive Images in HTML というのもあるのですが、動作環境や .htaccess に記述が必要だったりするのでちょっと敷居が高いかも…
レスポンシブ Web デザインに関する jQuery では レスポンシブなレイアウトに役立つ25個のjQueryプラグイン | colopixie にも色々とまとめられています。

最後に Retina ディスプレイに関して…
Retina ディスプレイというのは、iPhone 4、iPod touch、新しいiPad(第3世代のiPad)に採用されたディスプレイ。
次期、MacBook Pro にも採用が噂されています。
文字がシャープに見え、画像も綺麗に見えるのですが、反面、通常の画像を Retina ディスプレイで見ると滲んで見えてしまう。
ちょっと説明がヘタで申し訳ないですが、Retina ディスプレイで表示する画像は通常の等倍のサイズを用意しないと綺麗に表示しない。
要するにサイズが60px 角の画像だと、120px 角の画像を用意しないといけないのですが、Media Queries を使うことで画像の入替えができます。

アイコン

アイコン

60px の画像を表示、Retina ディスプレイ用には特に何もしてない。

通常は60px の画像を表示、Media Queries で Retina ディスプレイの時は120px の画像を表示。

PC で見るとどちらも60px 角の画像を表示していますので違いはわかりませんが、Retina ディスプレイで見ると左の画像は滲んで見え、右の画像は綺麗に見えると思います。

上の例の html と css は、

<p class="normal-size-icon">アイコン</p>
<p class="retina-size-icon">アイコン</p>
.normal-size-icon {
	width: 60px;
	height: 60px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
 	background: url(/img/hoge_60.png) no-repeat;
}

.retina-size-icon {
	width: 60px;
	height: 60px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
 	background: url(/img/hoge_60.png) no-repeat;
}

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.retina-size-icon {
 		background: url(/img/hoge_60_2x.png) no-repeat;
 		background-size: 60px auto;
	}
}

という感じ。
ちなみに当サイトは、現状 Retina ディスプレイに対応させていませんが、いずれ必要になってくるでしょうね。

またまた、未検証で申し訳ないですが、Retina ディスプレイを判別する retina.js というのもあります。
retina.js スクリプトの Retina.js | Retina graphics for your website に書いてあるのを読むと、<img src=”/images/my_image.png” /> というタグがあるとスクリプトが自動的にサーバーをチェックして “/images/my_image@2x.png” のようなパスが存在すれば置き換えてくれるみたいです。

しかし、MacBook Pro に Retina ディスプレイが搭載されると、これらの作業も必須になるんだろうなぁ…

というわけで、一応、それらしくレスポンシブ Web デザインを取り入れましたが、やっぱりこもりさんの本をじっくり読んでみたい。
私の理解度やここに書いたことが否定されそうな気がしてちょっとこわいですが、近所の本屋さんには置いてなさそうなので、アマゾンでポチっとしようかな…

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

posted with amazlet at 12.05.29
こもりまさあき
エムディエヌコーポレーション
売り上げランキング : 516
Amazon.co.jp で詳細を見る

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。