必読!5分でわかるレスポンシブWebデザインまとめ 制作編


必読!5分でわかるレスポンシブWebデザインまとめ 制作編

お久しぶりです。デザイナーの野田です。
まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。

「必読!5分でわかるレスポンシブWebデザインまとめ」
「必読!5分でわかるレスポンシブWebデザインまとめ Pt.2」
を読んでいただけるとスムーズです。

今回で、【必読!5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。
100% 5分では分らないので、タイトルはスルーしてやってください。

様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。
この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。

また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で知っててもらいたい事が多すぎて、なかなか制作編に移せませんでした。
ようやく制作編になりますので、是非、皆さんの参考にしてください。

とりあえず制作する(仕様について)

レイアウトについて

まず、今回制作するサイトのレイアウトは、
【レスポンシブWebデザイン+可変グリッドレイアウト】
を合わせて制作させていただきます。
レイアウトについては、「必読!5分でわかるレスポンシブWebデザインまとめ」をご覧ください。

ページ全体はCSS3(Media Queries)で制御、異なる画面サイズに応じてページのレイアウト・デザインを調整しつつ、コンテンツ部分のみ、可変グリットでブラウザサイズに合わせて決められたサイズのボックス要素が再配置されるといった仕様にします。

レイアウトについて

当然、HTML5は今後標準化してくると思うので、レスポンシブWebデザイン同様、新しい技術を使って制作していきます。

対応デバイスの確認

対応デバイスについては、「必読!5分でわかるレスポンシブWebデザインまとめ PT.2」をご覧ください。

今回は、全てのデバイスに対応させていたら大変なので、
・iPhone 4 / 4S (縦:640 x 960 横:960px x 640px)
・iPad (縦:768px x 1024px 横:1024px x 768px)
・PC (横幅:960px)

スタンダードな上記の3デバイスに対応させたいと思います。
現在は、Androidユーザーもかなり増えていますが、割愛させていただきます。

Retinaディスプレイの対応

はい。やりましょう。
大変ですが対応します。
Retinaディスプレイの対応については、こちらも「必読!5分でわかるレスポンシブWebデザインまとめ PT.2」をご覧ください。

CSS3の使用に関して

CSS3については、PCではあまり使用せずに画像で対応、タブレットやスマートフォンのみ使用します。

注意点

今回制作するページで、いくつか気をつけなければならないことがございます。
ひとつひとつ解決策として紹介させていただきます。

HTML5について

HTML5で制作するにあたって、IE7~8の対策をする必要があります。
単純に制作してしまうと、HTML5の新要素に未対応のIEのブラウザに対してはスタイルが効かないということになります。
そういった場合に備えてGoogleコードで公開されている、html5.jsを使用し、対応します。
下記のコードをhead内に読み込んであげてください。

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

CSS3(Media Queries)について

01-01. Media Queriesの記述方法について

Media Queriesの記述方法は、いくつか方法がございますので、代表的なものをご紹介させていただきます。

インライン記述
css内にソースをまとめて書く時などに便利です。

@media screen and (min-width: 0px) and (max-device-width: 640px) {
中身
}
@media screen and (min-width: 641px) and (max-device-width: 768px) {
中身
}
@media screen and (min-width: 769px)  {
中身
}

外部CSS記述
cssごとに振り分けて記述する方法です。

<link rel="stylesheet" media="screen and (min-width: 769px)" href="css/pc.css">
<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="css/phone.css">
01-02.Media Queriesの記述属性について

Media Queriesの振り分けでは下記のような属性があります。

Media Queriesの記述属性について

02. CSS3(Media Queries)について

残念ながらIE8以下では使えません。
そのため公開されているスクリプトを使用して対応させてあげましょう。
今回は、Googleコードで公開されている、css3-mediaqueries.jsを使用し、対応させてあげます。ありがとう。Googleさん。
下記のコードをhead内に読み込んであげてください。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
03. css3-mediaqueries.jsを使用するにあたって

これには、解決せずに大変だった問題がございます。
css3-mediaqueries.jsを使用する場合、外部cssの読み込みを使用するとIE8以下では動いてくれません。
@media規則で指定すると解決するので、こちらを使用してください。

良い例:

@media screen and (min-width: 0px) and (max-device-width: 640px) {
中身
}
@media screen and (min-width: 641px) and (max-device-width: 768px) {
中身
}
@media screen and (min-width: 769px)  {
中身
}

ダメな例:

<link rel="stylesheet" media="screen and (min-width: 769px)" href="css/pc.css">
<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="css/phone.css">

しかし、残念ながらこれが全ての解決策ではございません。
一定の条件になるとしっかりと効くこともあるので、もしもバグがでたら試してみてください。

Viewport のプロパティ

Media Queries を使って、デバイスサイズごとにスタイルを振り分けるだけでは、スマートフォンでブラウジングする際に、アレッて表示になってしまいます。
スマートフォンのブラウザにはViewportという機能があります。
こちらを使用しないと、せっかくスマートフォン用に制作したものも、980pxのサイズで表示され、PC用の画面が表示されてしまいます。
メディアクエリを使用してレスポンシブWebデザインを制作する際には、このViewportをデバイスの横幅であるdevice-widthに指定してあげます。
これで、解決することができます。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

Retinaディスプレイの対応について

Retinaディスプレイ対応・対策については、対応する画像部分についてはスクリプトやcssで対応し、css3で対応できるところは、css3で対応させてあげます。
画像についての対応方法をこちらではご紹介します。
今回は画像等はあまり使用しないので、特別な対応はしませんが、私のオススメは、
Retinajs.jsです。
Retinaディスプレイ判別で自動で高解像度画像を入れ替えて表示してくれます。
使用している画像と同じ階層に、同じ名前+【@2x】を追記しておいてあげるだけで、Retinaディスプレイの場合のみ画像を入れ替えてくれます。
例:
retina_image.jpg  ←通常の画像
retina_image@2x.jpg  ←Retinaディスプレイ用高解像度画像

使い方は、サイトからretina.jsをダウンロードし、下記のコードをhead内に読み込んだ上で、Retinaディスプレイ高解像度画像を用意してあげるだけです。

<script type="text/javascript" src="js/retina.js"></script>

かなり高速で説明しましたが、これも五分に抑えるためなのでご了承ください。

制作してみました

上記で書かせていただいた内容、過去の記事も含め、とても簡単にテンプレートを制作させていただきました。
本当に基本的な機能やcss、スクリプトを取り入れてるので、良かったら使ってください。
ちなみに、なにかミスがありましたら、精神的にとても弱いので優しく指摘してください。

————————————————————————————
Demo
Download(zip)
————————————————————————————

おすすめお役立ちツール

Responsinator

Responsinator

http://www.responsinator.com/

様々なデバイスを一括で表示してくれるツールです。
URLでのリンクを入力すると確認できるので、一度サーバーにアップしてから使いましょう。

Media Queries

Media Queries

http://mediaqueri.es/

この記事を読んでる人なら一度は見かけたことがあるでしょう。
レスポンシブWEBデザインの参考サイトリンク集です。
超いいです。
いつもボーっと口を開けながら、ウインドウサイズを大きくしたり小さくしたり・・・。

25 jQuery Plugins to help with Responsive Layouts

25 jQuery Plugins to help with Responsive Layouts

http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive-layouts/

レスポンシブWEBデザインに対応しているブラグインを集めたサイトです。
レイアウトは、しっかりと動きを考えながら構成を練る方が良いので、参考にしてください。

20 Useful jQuery Plugins for Responsive Web Design

20 Useful jQuery Plugins for Responsive Web Design

http://designmodo.com/jquery-plugins-responsive-web-design/

上記同様レスポンシブWEBデザインに対応しているブラグインを集めたサイトです。
こちらも、レイアウトはしっかりと動きを考えながら構成を練る方が良いので、参考にしてください。

Firesizer

Firesizer

https://addons.mozilla.org/ja/firefox/addon/firesizer/

簡単にウィンドウサイズを変更できる、FireFoxのプラグインになります。
コーディング中に簡単な判断を行いたい時などにとても使えます。

最後に

現在までの【必読!5分でわかるレスポンシブWebデザインまとめ】のシリーズについて、FacebookのコメントやTwitterにて、ご感想をいただければとても嬉しいです。
皆様のご感想を参考にさせていただければと思います。
よろしくお願い致します。

次回の私のブログは、完全にWeb制作から離れて、私の趣味について語らせていただきたいと思います。
あまり参考にならないと思いますが、インスピレーションとしてまたご覧下さい。

この記事を書いた人

野田
野田 アートディレクター 2012年入社
クリエーティブディレクター / デザイナーの野田です。 小さい頃、兄にバトルDJとして育てられ、嫌になって逃げだした過去をもっています。 電車通勤です。 子供います。

こちらもおすすめ

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

  • 著者吉田 真麻
  • 価格¥ 2,894(2015/12/16 15:39時点)
  • 出版日2015/11/03
  • 商品ランキング14,970位
  • 大型本256ページ
  • ISBN-104798141577
  • ISBN-139784798141572
  • 出版社翔泳社
Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

  • 著者こもりまさあき,赤間 公太郎
  • 価格¥ 2,700(2015/12/24 16:59時点)
  • 出版日2016/02/02
  • 商品ランキング148,734位
  • 単行本288ページ
  • ISBN-104844365630
  • ISBN-139784844365631
  • 出版社エムディエヌコーポレーション