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

第12回「本格的なレスポンシブWebデザインの準備編! 新人ウェブデザイナーのお兄さんお姉さんと同じ学習をするよ!」


難易度がかなり高くなるので、カリキュラムを少し修正しました!
皆さんでも、理解できるような教材を用意したから、安心してね。

こんなページが簡単に作れるんだよ、すごいでしょう。
ただ、CSSの勉強がちょっと大変かな。





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



[01]
専用ページにログインして、素材データをダウンロードしてね!
素材フォルダには、「Step01」から「Step04」までの4つのフォルダが入っている。

このフォルダの中には、ページが完成するまでのHTMLやCSSファイルが入ってるんだ。これをウェブブラウザーを表示しながら、基本的なことを学習していこう。





[02]
作成するウェブページがどんな感じなのか、見ておきましょう。
これが、パソコンのワイドスクリーンで表示したときのページ。

タイトルの下にある黒い帯は、ナビゲーションバーって言うんだ。ボタンをクリック、もしくはタップすると、他のページに移動する仕組み。

ページの中央は、記事とサイドバーが並んでいるよね。
一番下には、クレジットが書かれた領域がある。この領域をフッターって呼びます。





[03]
ウィンドウを狭めていくと、サイドバーが下に落ちる。
こうしないと、記事の幅が狭くなって、読みづらいでしょ?

タブレットを使って、このページを読む人は、こういうレイアウトになるんだ。





[04]
さらに、ウィンドウを狭めると、ナビゲーションバーのボタンが縦方向に並ぶ。
幅が狭くなっちゃうと、ボタンをタップしにくいでしょう。

どうですか?
とてもシンプルなページだけど、レスポンシブWebデザインで作成すると、どんな環境で見ても、読みやすいデザインになるよね。





[05]
さぁ、これをDreamweaverで作っていくんだけど、DOMパネルとCSSデザイナーを使えば、簡単にできちゃう。

でも、手順のとおりに作成できても、自分の思い描いたデザインで作成できるようになるには、やっぱりCSSの知識とテクニックが必要なんだ。

CSSのことをちゃんと理解して、このページが作成できるようになったら、すごいな。頑張ろうね!






それでは、第13回の投稿をお待ちください。
難しくなるから、今まで学んだことを復習しておいてください!

以下の専用ページにログインして、完成データをダウンロードしておいてね!
※第14回の掲載と同時にダウンロードできるようになるので、待っててね。


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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books