CSS3＋Mediaqueyで「レスポンシブWEBデザイン」をマスターする

このレクチャーではメディアクエリについて概要を説明します。

実際にメディアクエリを使ってページレイアウトを変化させるページを制作します。まずワイヤーフレームをみてこれから制作するページの構造とタグを確認しておきます。

制作するページの空白のhtmlファイルを新作成し、定型部分（bodyタグの前まで）を完成させます。

このレクチャーから実際のページの内容です。まず最初にheaderのブロックとnav（ナビゲーション）のブロックを完成させます。

つづいてmainのブロックのうち写真の部分(aside)をコーディングします。

htmlの最後の部分、記事のブロックをarticleとsection要素を使ってマークアップします。このレクチャーでhtmlのページは完成です。

つづいてこのページのCSSの設定を行います。このレクチャーではbodyとheader部分の設定をします。

つぎはナビゲーション部分のnavタグの設定を行います。

つづいてこのページの写真２枚を入れたaside部分のCSS設定をします。

このレクチャーでは記事部分のarticleとfooterの設定をします。この２ブロックの設定が終わるとこのページのスマートフォン用の設定が完成します。

このレクチャーではメディアクエリを使って、画面サイズがタブレットのときのCSS設定を行います。まずスマートフォンとタブレットで大きくレイアウトが変化するナビゲーションのブロックからです。

同じように画面サイズがタブレットのときのCSS設定を行います。このレクチャーでは写真の部分と記事の部分です。

このレクチャーでは画面サイズがPCのときのCSS設定をします。この設定が終わるとこのページのコーディングは一応完成します。

前のレックチャーまででコーディイングは一応終わりましたが、プレビューすると思いもかけないような不具合が起きました。このレクチャーではこの不具合を解決する方法としてclear fix（クリアフィックス）という設定をCSSコードに書き入れます。

実際にhtmlとCSSスタイルシートにクリアフィックスを書き入れてその使い方を学びます。

このレクチャーではフルードグリッドの概要を説明します。

このレクチャーからは実際にソースコードを書きながらフルードグリッドを学びます。最初にサンプルページのhtmlコードを書きます。

このレクチャーでこのサンプルページのhtmlコードを完成させます。

このレクチャーからこのページのCSSスタイルシートを書きます。最初はbotyとheader部分です。

つぎはmainの部分のCSSを設定します。

footerの部分までを設定して制作を完成させ、プレビューしてみますが固定値で設定しているため画面の左右に表示されない部分があることを確認します。

CSSの設定で固定値でサイズを設定していた部分の値をパーセントなどの相対値で指定し、画面サイズに応じて要素の幅が可変になるように設定します。これでフルードグリッドの学習は終了です。

ここからレスポンシブWEBデザインに必須の技術の３番目。フルードイメージについて学びます。このレクチャーではまずフルードイメージの概要を説明します。

フルードイメージの学習をするためのhtmlファイルを作ります。

前のレクチャーで制作したhtmlファイルに対応するCSSスタイルシートを書きます。まずheaderの部分までです。

つづいて画像の部分のCSS設定です。この画像が画面サイズに応じて変化するように設定することでフルードイメージの技術を学びます。

ひきつづき画像のCSS設定です。画像の幅と高さを相対値にします。このレクチャーを終了するとフルードイメージの学習も終わりです。これでこのセクションは終了です。

このレクチャーではドロップシャドウをCSSだけでつくる技術を学びます。まずサンプルとなる長方形をページ上に描きます。

前のレクチャーで描いた長方形にCSS3の設定でドロップシャドウを作ります。

ドロップシャドウの応用です。ボックスの内側にシャドウをかけたり、テキストにドロップシャドウを適用する技術を学びます。

CSS3の注目の機能として次は角丸長方形の描き方です。まず単純な角丸長方形を描きます。

つづいて４角の楕円の半径を様々に変えて、複雑な角丸長方形を描きます。

３つ目の機能はグラデーションです。先ほど描いた角丸長方形を色で塗りつぶし、さらにグラデーションをかける練習をします。

さらに複数の中間色を加えたグラデーションや円形のグラデーションについても学びます。

サンプルのページをブラウザで開いて、３つのデバイスサイズでそれぞれレイアウトがどう変化するかを確認します。ここでしっかりデバイスごとの変化を確認しておくことで後の作業効率が大きくちがってきます。しっかり見ておきましょう。

これからページを制作する工程を確認しておきます。レスポンシブWEBデザインでは通常のページよりもデバイスによってデザインレイアウトが変化することで多くのケースが出てきます。それらを最初に整理しておくことで作用途中で自分がどこにいるかが分からなくなることがないようにします。

ページ制作のために必要なファイルとフォルダーを準備します。空白のhtmlファイルとCSSファイルを準備し、練習用に使用する新規のサイトフォルダーを作ってその中に保存します。このファイルがこれから演習を行うためのファイルになります。

htmlファイルのテンプレートをつくります。このレクチャーではどのページでも書かれるhtmlの定型部分を用意したindex.htmlファイルの先頭に書き込みます。

htmlファイルテンプレートのつづきです。このレクチャーではこのサイトページのブロックごとにタイトルを注釈で記入し、htmlコードを記入する場所を指定しておきます。こうすることで後で作業が混乱しないように整理しておきます。

つぎはCSSスタイルシートのテンプレートをつくります。このレクチャーではそのうちメディアクエリを使ったテンプレートの整理をしておきます。

CSSスタイルシートにブロックごとの分割を行います。ここまででテンプレートの制作は完成です。

モックアップページの完成したサンプルを見て確認しておきます。どこまで作りこめばいいのかなどをモックアップページと完成したページを見比べて検討しておきます。

モックアップページの制作をはじめます。このレクチャーではhtmlのheaderの部分だけをつくります。頭を整理しながら進めましょう。

つづいてheader部分のCSSです。このレクチャーではh1を設定します。

つづいてulとimgの部分を設定します。これでheader部分のモックアップが完成しますが、」これはスマートフォンと各デバイス共通のみの設定です。この他にさらにタブレットとPC用の設定を後で行うことになります。

つぎはmainブロックのhtmlです。mainの終了タグの位置に注意して慎重に作業をしましょう。

mainブロックのCSSの設定をします。このレクチャーではmainとarticleの２つを設定します。ここはスマートフォン向けなので特に難しいところはありません。スペルミスに気を付けて書きます。

mainブロックのCSSの設定をつづけます。このレクチャーではh2とimg、pの３つを設定します。これが終わるとmainのブロックのCSSも完成です。

mainブロックの次はasideブロックです。この部分は少し複雑なので注意しましょう。このレクチャーではまずhtmlだけを完成させます。

つぎはasideのCSS設定です。このブロックはinformationとtopicsという２つのsectionで構成されています。この２つはデバイスのサイズによってレイアウトが大きく変化しますが、ここではスマートフォンの設定だけを行います。このレクチャーではasideのうちinformation部分の上のul#snsの設定までを行います。

つぎはul#snsの次のul#guideのCSSです。先のレクチャーのつづきです。

このレクチャーではasideの最後のtopicsのCSS設定です。このレクチャーでasideブロックは完成します。

つぎは最後のnewsブロックとfooterブロックです。この部分は簡単です。このレクチャーではnewsブロックとfooterブロックのhtmlコードを完成させます。

このセクションの最後はnewsブロックとfooterブロックのCSS設定です。この部分はCSSも特に難しいところはありません。これが終わるとスマートフォン向けのモックアップは完成です。

このレクチャーではheader部分の設定をします。h1とulの部分を設定してheader部分を完成させます。

つぎはコンテンツのブロックに入ります。このレクチャーではcontentsのうちmain部分を完成させます。

このレクチャーではasideのinformation部分からはじめて、タブレット向けのモックアップを完成させます。

ここから最後のPC画面向けのモックアップページの制作に入ります。まずはheader部分からです。

aside内のtopicsからはじめて、PC向けのモックアップを完成させます。これでこのセクションは終了です。

まずは最初のheaderの部分を調整します。このレクチャーではスマートフォン向けのCSS設定だけです。

つぎにheader内のナビゲーション部分を完成させます。項目を増やして小さな画像を挿入し、タブレット、PCにも対応するようCSSを完成させます。

スマートフォンとタブレット/PCで大きくデザインが変化するグローバルナビゲーションの部分です。この部分はCSSの設定で有用なTipsを多く使います。

まずスマートフォン向けのグローバルナビを完成させます。liの設定で項目の並び方を大きく変えるので注意して学習しましょう。

つづいてタブレット用、PC用にグローバルナビを調整します。これでグローバルナビの部分は完成です。

つぎにmain部分を編集します。ここからコンテンツブロックの編集になります。まず最初にmain部分のhtmlを完成させます。項目を増やし、写真とテキストも挿入します。

つづいてmainの部分のCSSを設定します。この部分はモックアップの制作でレイアウトの変更など大きな部分はできているので細かい調整だけで済みます。

mainのつぎはaside部分のhtmlの設定です。この部分はスマートフォンとタブレット用、PC用でそれぞれレイアウトが異なりますが、モックアップでこのしくみはできているので細かい調整が主な作業になります。ただこの部分は小さい写真や画像が多く入るので間違えないように注意して作業しましょう。

同じくaside部分でつぎはCSSの設定です。この部分は画像や写真の点数が多いのと、細かい調整が多くあるのでこのレクチャーではスマートフォン向けのCSSだけを完成させます。

aside部分のタブレット用、PC用のCSSを完成させます。これで複雑だったaside部分は完成です。

最後にnews部分のhtmlとCSSを設定します。これで完成です、全体をプレビューして細かい直しをしてサイトを完成させます。