スマートフォンやタブレット、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で指定していた値を%へ変換する計算式を分かりやすく解説する。

Tweet