当サイトもサクっとレスポンシブデザインにしてみたので、そのプロセスをサクサクっと解説します。
レスポンシブデザインコーディングの基本
モバイルファーストで考える
レスポンシブデザインの基本は、モバイルファーストで考えることです。
いままでは PCベースで考えてからモバイルに対応する、というものでしたが、その考え方はもう古いです。
モバイルファーストということは、まずはシンプルな 1カラムで作るということです。
そして画面サイズが大きくなるに従って、2カラム、3カラムと、レイアウトを変化させていくというやり方です。
可変を前提として考える
カラムはすべて可変を前提として考えます。
つまりカラム幅は % で指定するということです。
モバイルファーストで実装
メインコンテンツは、article と aside（サイドバー）の 2カラム。
article は WordPressループの記事一覧で、.thumbnail カラム と .excerpt カラムの 2カラムを内包しています。
＊主要な部分のコードのみ記載します。
> HTML
<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_enqueue_script('modernizr-2.5.3-respond-1.1.0.min', get_bloginfo('template_url').'/js/libs/modernizr-2.5.3-respond-1.1.0.min.js'); ?>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div id="header-container">
<header class="wrapper clearfix">
<!-- header content -->
</header>
</div>
<div id="main-container">
<div id="main" class="wrapper clearfix">
<!-- article -->
<article>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<section <?php post_class(); ?>>
<div class="thumbnail">
<!-- .thumbnail カラム -->
<?php the_post_thumbnail(); ?>
</div>
<div class="excerpt">
<!-- .excerpt カラム -->
<?php the_excerpt(); ?>
</div>
</section>
<?php endwhile; ?>
<?php else : ?>
Not found
<?php endif; ?>
</article>
<aside>
<!-- sidebar content -->
</aside>
</div>
</div>
<div id="footer-container">
<footer class="wrapper">
<!-- footer content -->
</footer>
</div>
</body>
＊レスポンシブデザインテンプレート「Initializr」のマークアップ構造をベースに作成しています。
viewport の設定
<meta name="viewport" content="width=device-width">
レスポンシブデザインでまず重要になるのは、viewport の設定です。
マルチデバイスに対応する為、width=device-width を設定します。
IE でメディアクエリを有効にする
残念ながら CSS3 メディアクエリは IE 6〜8 では動作しません。（ほんとにIEってインターネットエクソプローラーですね。
仕方ないので、IE でもメディアクエリを有効にする為のライブラリを読み込みます。
「Respond.js」を採用します。
可変を前提とする
> CSS
.wrapper{
width: 90%;
margin: 0 5%;
}
これで、モバイルファーストのシンプルな 1カラムレイアウト、そして画面サイズに応じてカラム幅が可変となるサイトができあがりました。
＊.thumbnail カラムはディフォルトでは非表示です。
ブレイクポイントを決定する
スマートフォン、タブレット、PC、それぞれのメジャーブレイクポイントとされる 320px、768px、960px、この3つをブレイクポイントとしました。
CSS3 メディアクエリを使って、それぞれのブレイクポイントで切り替えるスタイルを記述していきます。
第1ブレイクポイント min-width 320px
> CSS
/* for SmartPhone */
@media only screen and (min-width: 320px) {
}
モバイルファーストで作っているのでディフォルトのままでいいです。
第2ブレイクポイント min-width 768px
> CSS
/* for Tablet */
@media only screen and (min-width: 768px) {
#main article{
float: left;
width: 60%;
}
#main aside{
float: right;
width: 35%;
padding-top: 0;
}
#main article .thumbnail {
display: inherit;
}
}
・thumbnail カラムの表示
・article カラムと aside カラムを2カラム化
それぞれの幅は % 指定の可変
第3ブレイクポイント min-width 960px
> CSS
/* for PC */
@media only screen and (min-width: 960px) {
.wrapper {
width: 960px;
margin: 0 auto;
}
#main article {
width: 640px;
}
#main aside {
width: 290px;
}
#main article .thumbnail {
width: 240px;
float: left;
}
#main article .excerpt {
width: 380px;
float: right;
}
}
・全体幅を 960px で固定（それ以上拡大されないように
・article カラム、aside カラムも固定（上記と同様
・thumbnail カラム と excerpt カラムを 2カラム化
WordPress アップロード画像の処理
WordPressテーマをレスポンシブデザインにする際には、アップロード画像の可変処理も行います。
> CSS
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
WordPressでアップロード画像を記事に埋め込む際、表示サイズを「サムネイル、中、大、フルサイズ」の中から選択しますよね。
サムネイルは 150px なので影響ないとしても、それ以上のサイズの画像については、マルチデバイスの画面サイズからはみださないようにする処理です。
これで、画面サイズより大きい画像も、最大 100% 幅で可変になります。
あとがき
レスポンシブウェブデザインについてはまた今度じっくりまとめたいと思いまっす！
（2012/07/25）
・サムネイル画像も可変デザインにしました。
その他、絶賛アップデート中＾＾