スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、TRIAINAのWebデザイナー「Y-Jet」が解説。
この講座は、当サイトで短期集中型で連載していた「レスポンシブWebデザイン」講座の第一章と第二章の完全版であり、読み進めていく中で皆様も一緒にサイトを制作していく〝実践型〟の講座である。そうすることで、より理解を深められると共に、皆様のスキルが格段に進歩するのだ。是非、実践してみてほしい。
　

第一章

その1 実録！レスポンシブWebデザイン　シンプル＆ハイクオリティーのサイトで学ぶ

「レスポンシブWebデザイン」は決して難しいものではない。TRIAINA流シンプル＆ハイクオリティーのサイトの完成を目指して、その目標となるサイトをまず見てみよう！

その2 レスポンシブWebデザインとは

主流となった背景やレスポンシブWebデザインを構成する技術などを分かりやすく解説する。

その3 レスポンシブWebデザインの基本構造

レスポンシブWebデザインの基本構造となる骨組みを一から制作していく。

その4 フルードイメージを体感する

ブラウザのウィンドウ幅に合わせて、画像のサイズを拡大・縮小する手法「フルードイメージ」を実際に体感し、作成していく。

その5 メディアクエリを体感する

画面幅に応じてCSSを切り替える「メディアクエリ」を駆使してサイトを制作。ブレイクポイントの決定やモバイルファーストの利点などを説明していく。

その6 レスポンシブWebデザインにおいての「Retinaディスプレイ」対応を考える

レスポンシブWebデザインにおいてのRetinaディスプレイへの対応策を簡潔に解説する。

その7 レスポンシブWebデザインでつくる「グローバルナビゲーション」

レスポンシブWebデザインにおける「グローバルナビゲーション」の基本的なポイントとなる可変レイアウトを、自分自身で作成しながら覚えていく。

その8 レスポンシブWebデザイン！可変する段組(マルチカラム)を極める（1）

まずはスマートフォン向けスタイルの2段組みボックスをつくっていく。

その9 レスポンシブWebデザイン！可変する段組(マルチカラム)を極める（2）

jQueryを使用し、複数のボックスの高さの最大値を揃える方法を説明。

その10 レスポンシブWebデザイン！可変する段組(マルチカラム)を極める（3）

2段組みのボックスを、「メディアクエリ」を使い、3段組み→6段組みへと可変していく手順を解説する。

その11 レスポンシブWebデザイン！ヘッダー画像の左右にブラウザ幅いっぱいのバック

ブラウザ幅いっぱいに配置するヘッダーのバックを作っていく。

その12 「フリードグリッド」の完成

最後の総仕上げ「フリードグリッド」への変換。pxで指定していた値を%へ変換する計算式を分かりやすく解説する。

第二章

その1 jQueryで超簡単レスポンシブWebデザイン対応スライダーを実装する

第一章で作成したサイトのトップページをもう少しカスタマイズしていく。手始めに、jQueryを使った簡単だが安定感のあるレスポンシブWebデザインに対応したスライドショーを、トップ画像に実装する。

その2 スクロールで「ページのトップに戻る」ボタンを出現させる

スライドショーに続いて、スクロールすると「ページのトップに戻る」ボタンが出現するjQueryプラグインの実装方法を紹介。

その3 jQueryでレスポンシブに対応したドロップダウンメニューをつくる

レスポンシブWebデザインに対応したドロップダウンメニューを jQueryを採用し作成する。簡単に実装でき、尚かつ小さいデバイスには絶大な効果を発揮する優れものだ。

その4 「Viewport resizer」レスポンシブWebデザインの確認ツールはこれだけでOK

レスポンシブWebデザインでサイトを制作するときには欠かせないシュミレーターツールを紹介。このツールを使えばスマートフォンやタブレットなど様々なデバイスでのサイズを確認することができる。

その5 レスポンシブWebデザインで2カラムレイアウトのページをつくる〜基本構造〜

サイトの通常ページをトップページを元に、レスポンシブWebデザインで2カラムレイアウトの作成を順を追って説明する。

その6 「2カラムレイアウト」モバイルファーストの視点からPCスタイルを最初につくる

最初にPC用のCSSをグリッドデザインを取り入れ記述した後に、「モバイルファースト」の視点から「スマートフォン」→「タブレット」→「PC」の順にスタイルシートにメディアクエリを用いて記述していく方法を解説。

その7 「2カラムレイアウト」フルードイメージ + センター揃え

「2カラムレイアウト」のメインエリアにフルードイメージ + センター揃えで画像を配置していく。

その8 「2カラムレイアウト」フルードイメージでサイドバー画像を

メインエリアに続き、サイドーバー内の画像スタイルを記述していく。

その9 「2カラムレイアウト」フリードグリッドの完成

「2カラムレイアウト」通常ページに「フリードグリッド」を導入する。第一章で学んだことを思い出し実践してみてほしい。

その10 「2カラムレイアウト」マイナーブレイクポイントであらゆるデバイスに最適なデザインを

「マイナーブレイクポイント」と「メジャーブレイクポイント」の考え方を紹介。

　
第3章からはWordPressを導入して、これまでに作成したサイトをテンプレートとして連動させていく。下記ダウンロードから作成した全ソースをダウンロード可能。乞うご期待！
　
【→sample.zip（zip）】
　

Tweet