レスポンシブウェブデザインを作ってみる（簡単編）

だいぶ久しぶりの更新になりました。

今年は大雪で大変ですね。被害がありました地域の皆様にお見舞い申し上げます。
東京（都下）住まいの私も久しぶりに見る大雪。。。
家の玄関前は、未だにかまくらができるほどに雪が積みあがっております。

さて今日はレスポンシブウェブについてです。

レスポンシブウェブとは？
という部分はすっ飛ばして、基礎的な実装方法を書きたいと思います。

私が教えている生徒さんの卒業制作の1つとして、レスポンシブウェブを課題に出してみました。

考え方に苦労するかと思いきや、それが思いのほかすんなりと実装できたので、
練習としてはよかったかなと思っています。


まずは考え方。

◆HTMLは一つ。
◆CSS3のメディアクエリ（Media Queries）を使って、デバイス別（あるいは解像度別）に読み込むスタイルを切り替える

以上です。

メディアクエリというのは、従来のmediaの拡張です。
media="screen"　・・・表示するのがscreenの時は、の意味
meia="print"　　　・・・印刷の時は、の意味

こんな記述を書いた＆見たことがあるんじゃないかと思います。

その拡張型として、CSS3ではメディアクエリというのが登場しました。

メディアクエリを使うと、
「screenかつ769px以上の時はこのCSS」（一般的にPCの数値）
「screenかつ最大768pxまでの時はこのCSS」（一般的にiPadなどタブレットの数値）
「screenかつ最大640pxまでの時はこのCSS」（一般的にスマホの数値）
というCSSの切り分けができます。

サイズはあくまで代表的なものを書きました。
例えばシンプルなデザインのサイトであれば、641px以上（タブレット＆PC）は同じデザインにしてCSSは2つ書くだけ、というようにアレンジしてもいいかと思います。


では解説が長くなりましたので、実際の書き方を。

まずはHTMLのmetaに以下を記入。

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

デバイスの画面サイズに合わせてCSSを切り替えるために、viewportを記述しておきます。
ここにもいろんな設定が入るのですが、それはまた次回に……

続いて、CSSへのリンクを書きます。
今回は、pc.css、tablet.css、smart.cssの3つのcssを読み込むこととします。

<link rel="stylesheet" media="all" type="text/css" href="pc.css" />
<!-- PC用 -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- タブレット用 -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- スマホ用 -->

続いて、（説明略）IE8以下にHTML5（XHTMLでコーディングしている場合は不要）とCSS3を認識させます。

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

HTML　headの記述は以上です。


そして、pc.css、tablet.css、smart.css、3つのCSSを用意します。

/*===============================================
◆pc.css 画面幅　769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
---ここにPC用のスタイルを書く---
}　/*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




/*===============================================
◆tablet.css 画面幅　768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
---ここにTABLET用のスタイルを書く---
}　/*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




/*===============================================
◆smart.css  画面幅　640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
---ここにスマホ用のスタイルを書く---
}　/*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/

こんな感じです。
imgに対する「max-width: 100%;」は、小さい画面で見たときにも「最大で100％の幅で表示せよ」という指示です。
スマホで見たときにも画像サイズが最適化されますので、これは記述必須になりますね。


以上、まずはざっくりとレスポンシブウェブデザインの実装方法でした。

まずはアイキャッチ画像（メインビジュアル）、h1、pぐらいで構成された簡単なHTMLを作成し、GoogleCromeなどで画面サイズを小さくしたりしてみてください。

初めて実装するときは、思わず「おぉっ」と感動します。たぶん。


自作ではなくレスポンシブなテンプレートを探している、というWeb担様にも、今は安くていいものがそろってます。

■レスポンシブデザイン対応、SNS連動型WordPressテンプレート【黒船】

■ビジネス（企業）サイト向け


■大型EC・ポータルサイト向け


■ブログなのにかっこよすぎるやつ



これらはいずれも有料のテンプレートになりますが、有料だけあって出来はいいです。

自作でコツコツもいいですが、時間をお金で買う必要がある場合には、導入を検討するのもいいと思います。