レスポンシブWebデザインの作り方（簡単設定方法）

ツイート
127,128 view
2012年12月01日（土）

レスポンシブWebデザイン・・・レスポンシブルWebデザインじゃないよ。「ル」は要らないです。

さて、androidやiPhone・iPadなどのスマートフォンやタブレットが普及してきて、我らWebデザイナーもスマートフォンやタブレット用にホームページを調整しなければいけない需要が増えてきました。

これまでは、m/だのi/だの携帯サイトを細々と作ってきてきましたが、レスポンシブWebデザインがいつからでてきたかは定かではありませんが、別途携帯サイトやスマートフォン用に作られたHTMLではなく、パソコン用のHTMLひとつと任意の数のCSSだけで端末が変わってもデザインが最適化されたホームページを見る事ができます。

jQueryも使いませんし、CSS3のメディアクエリを利用するからといって、ホームページをHTML5で作らなきゃならないってことも無いです（笑）
このエントリーでは簡単に短く、ホームページをレスポンシブWebデザインに換装する方法を綴ります。

レスポンシブWebデザイン設定の記述方法

PC用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現できるという事で、まずはソースを記載します。
HTMLのmetaに以下を記載。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->

端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、Viewportを挿入します。

次に３つ（任意）のCSSを用意します（数値は任意です。色々試してみて下さい）
■ PC：横幅769px以上
■ タブレット（android）：横幅768px
■ スマートフォン（android）：横幅640px
PCとタブレットの横幅は1024以上でも769以上でも良いでしょう。

/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が640pxまでの場合のスタイル記入～
}

また、@importで各CSSを読み込む方法もあります。

@import url(style.css) screen and (min-width: 769px);
@import url(tablet.css) screen and (max-width: 768px);
@import url(smart.css) screen and (max-width: 640px);

画像の伸縮設定

そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
上記にも記載しておりますが、スマートフォン用・タブレット用のCSSに下記のように画像を伸縮するように指定をします。

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

以上になります。

これでレスポンシブWebデザインが換装可能になりますので、細かく各CSSを調整していただければと思います。スマートフォンだけでもタブレットだけでも画像指定でそれぞれ独自のデザインにする事も可能です！
Wordpressのプラグインを使わなくてもテーマに直接書き込めますし、MovabletypeやTYPO3などのCMSでも構築可能ですのでお試しあれ。

Internet Explorer（IE）対応について

レスポンシブWebデザインをIEに対応させる為の２つの方法を記載します。
● Respond.jsを挿入する
● Googleコードで公開されているcss3-mediaqueries.jsを挿入する
上記２つのいずれかをHTMLに挿入すればOKです。

しかし、スマートフォンやタブレットのブラウザには、インターネットエクスプローラーはありません。
あるとしてもほぼ使われてないと思って良いです。ですからクライアントからIEにも対応して欲しいと言われたらその旨を伝えてみてはと思います。IEでのレスポンシブWebデザインの確認はほぼ無意味でしょう（笑）
エゴを主張されてきたら追加料金で対応しましょう！

SEOにも効果的なレスポンシブWebデザイン

googleが公式ブログでレスポンシブWebデザインでのホームページ作成を推奨すると発表しておりました。
Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

レスポンシブWebデザインの表示確認

レスポンシブWEBデザインで作成したホームページを端末を分けて一括表示で確認できるサービスたち。
The Responsinator
Codebomber // Resizer
Responsive Design Testing

レスポンシブWebデザインを仕事で導入するとなると

レスポンシブWebデザインは、一つのHTMLで換装可能ですから、クライアントに提案をすると安くでスマートフォンサイトが作成できると思われますが、うかつに口頭で費用はこのくらいと少額で言ってしまうと後から痛い目に合うことでしょう…。

やはり計画性が大事！

デザイン次第でCSSを０から書き下ろす事にもなるので、手間暇のかかるレスポンシブWebデザイン、出来上がりのイメージをしっかり持ち、見積りをしましょう。

これからはWindows8も普及してきてそうだし、タッチUI前提のWebデザインに移行しても良いですね。

何故、レスポンシブWebデザインを採用するのか？
それはやはり、HTMLが一つで済み、制作・管理・更新の効率が良いからでしょう。

.htaccessでの振分け方法もある

レスポンシブWebデザインは、一つのHTMLでPC用のCSS・スマートフォン用のCSS・タブレット用のCSSを切り替える訳ですが、.htaccessでの切り替え方法もあります。個人的にはこのエントリーで綴ったHTML一つで作るレスポンシブWebデザインでの作成が気楽で良いですが。
.htaccessでスマートフォンサイトをアンドロイドやiPhoneで判別表示