中学生のためのレスポンシブWebデザイン

第13回「自分が思い描いたイメージで、レスポンシブWebデザインのページを作成できるように、しっかり学んでいこう!」



いよいよ本格的なレスポンシブWebデザインのページを作成していきますが、HTMLの構造がどうなっているか、確認していきましょう。
頑張っていこう!




第13回の授業(テキストキャスティング)を開始します!



[01]
素材データはダウンロードしたかな?
専用ページ( http://design-zero.tv/Dreamweaver/ )にログインしたら、テキストキャスティングのところを見てね。

「Step01」から「Step04」までの4つのフォルダが入ってますので、まず「Step01」フォルダを開いてください。

「MyLP」フォルダがあるでしょう。
このフォルダも開いてください。この中にある「index.html」を見てみましょう。

ウェブブラウザーを起動したら、「index.html」をウィンドウにドラッグして表示させてください。





[02]
シンプルなページが表示されますね。
まだCSSを指定していないので、たんに見出しや本文などが、縦方向に並んでいます。
でも、HTMLの構造はもう出来てるんです。





[03]
DreamweaverのDOMパネルで見ると、こんな感じです。
皆さんは、Dreamweaverを起動しなくてもいいですからね。作業はこの後です。

コンテナ(「div(class="wrapper")」)の中に、4つのタグがありますね。
「header」「nav」「div」「footer」の4つ。





[04]
図で表現してみましょう。

「header」(ヘッダー)は、タイトルが入るコンテナです。
その下の「nav」は、ナビゲーションバー。
中央の「div」には、記事やサイドバーが入ってます。
一番下の「footer」(フッター)は、クレジットなどが入ります。

ウェブページに掲載する情報の種類で、コンテナを分けているのです。





[05]
DOMパネルで、中央のコンテナ「div」を展開してみましょう。

中には、「article」と「aside」のコンテナが入っています。
さらに、この2つのコンテナの中に「section」というコンテナがあります。





[06]
図で確認してみるよ。

大きな図になってしまったけど、わかりやすいでしょ。

中央のコンテナ「div」の中に、「article」と「aside」のコンテナが入っていて、さらに「section」というコンテナが入っている。

「article」には記事が入っている。「aside」は、サイドバーです。





[07]
今度は、「Step02」フォルダの中の「index.html」をウェブブラウザーで開いてください。

「header」「nav」「div」「footer」の4つコンテナに対して、簡単なCSSが指定されています。
ここは、いいですよね。
CSSで文字サイズを調整したり、背景色を指定しているだけです。





[08]
次は、「Step03」フォルダの中の「index.html」をウェブブラウザーで開いてみましょう。

変化がないように見えるけど、タイトルの下に注目!
ほら、ナビゲーションバーになってるでしょう!

「Step02」では、縦方向に並んでましたが、このページはちゃんとナビゲーションバーになってるね。





[09]
このナビゲーションバーって、HTMLでは「箇条書き」なんですよ。

「箇条書き」をCSSで、ボタンのような見栄えにして、横方向に並べているのです。

CSSデザイナーを使えば、数回クリックするだけで完成してしまうので、簡単なんですが、なぜこのような表現が可能なのか知っておく必要があるんですね。





[10]
最後は、「Step04」フォルダです。「index.html」をウェブブラウザーで開きましょう。

ウィンドウを広げたり、狭めてみて!
サイドバーが、記事の右側に表示されたり、下に落ちたりするよね。

このテクニックって、ナビゲーションバーと同じなんです。
だから、ナビゲーションバーの作り方を学べば、理解することができますよ。

切り替わるポイント(ウィンドウの幅)は、メディアクエリを使っています。
これは、すでに学習してますので、わかるでしょう?





[11]
さて、それでは始めていきましょうか!

「Step01」フォルダの中に入っている「MyLP」フォルダを使います。
「MyLP」フォルダをデスクトップにコピーしましょう!

デスクトップに、今まで作業してきた「MyLP」フォルダがあると思いますので、どこかに移動してから、コピーしてね。






それでは、第14回の投稿をお待ちください。
うまくいかない場合は、以下の専用ページにログインして、完成データをチェックしてね!


完成データは、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページにアップロードしていきますので、参考にしてください。



今回のテキストキャスティングは、こちらのオンライン講座の追加コンテンツです

Dreamweaver CC 2015 基礎編パート1



関連記事:
Dreamweaver/Museのカテゴリーページ:



関連コンテンツ:
Muse CC 2015 ビジネスガイドブック




シンクゼロマガジンとは?

筆者:
Creative Edge School Books