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

第26回「1つの「ブロック」の中に3つの「モジュール」という、シンプルなレイアウトからスタートしよう!」


概論が多いけど、とっても重要なので過去3回のURLを掲載しておきます!

第23回「Dreamweaverでマガジンレイアウトに挑戦しよう! まずは言葉の確認だ、「整理」「整頓」「整列」の違いってわかる?


第24回「どんなに複雑なマガジンレイアウトも、ナビゲーションバーの作り方の応用だよ! 不安な人は復習してね!


第25回「重要なこと! CSSの知識だけあっても「ブロック、カラム、モジュール」を理解できていないと苦労するぞ〜




第26回の授業(テキストキャスティング)を開始します!
新カリキュラムの第4回になります!



[01]
それでは、学習を始めていきましょう!

素材データをダウンロードしてください。
「dw-26-data」フォルダの中に、「MyMagazine」フォルダが入ってますので、デスクトップにコピーします。



サイト定義しておきます。
この作業はすでに学んでいますので、簡単に。

サイトメニューの[新規サイト]を選び、表示されたダイアログの[サイト名]に「私のマガジン」、[ローカルサイトフォルダー]はフォルダアイコンをクリック、デスクトップにコピーした「MyMagazine」フォルダを選択してください。

[保存]をクリックして準備完了!

やり方を忘れちゃった人は、Part 01の「STEP 01 サイトを定義する」を復習してね!





[02]
ファイルパネルを見てください。
すでに、HTMLファイル(index.html)とCSSファイル(style.css)が作成されていますね。

「index.html」をダブルクリックして開きましょう。

BOX-1、BOX-2、BOX-3、そして文章が一行、表示されています。




[03]
DOMパネルを見れば、HTMLの構造がわかりますが、図でも確認しておきましょう。

前回、「ブロック」「カラム」「モジュール」について学びましたが、このページはブロックの中に3つのモジュールが配置されている状態ですね。

ブロックの下に、1つテキストブロックがあります。





[04]
まず、やりたいのこれ!

みんなは、箇条書きの状態からナビゲーションバーをつくっているから、大丈夫だよね。
魔法の呪文(clearfix)は、もうCSSファイルに記述されてますので、指定するだけです。




[05]
最初に、ブロックを固めておこう!
大きなコンテナね。

DOMパネルを使います。
「body」タグの下の「div」タグをクリックして選択しておきます。



[エレメントディスプレィ]の[+]をクリックして、クラス名を付けます。
「container」と入力して、Enterキーを押してください。ポップアップが表示されますが、そのままEnterキーを押して決定!

大きなコンテナだから「container(コンテナ)」という名前ね。





[06]
CSSデザイナーで指定していきます。

[ソース]の「style.css」を選択、[@Media]の「グローバル」を選択、続けて、[セレクター]の「.container」を選択!




[07]
[プロパティ]のレイアウトアイコンをクリックして、[width]の値をダブルクリック、「80%」と入力してEnterキーを押してください。
これで、コンテナの幅が80%になりました。



次は、コンテナをページの、中央に配置します。
[margin]の左の値の「単位」をクリックして、メニューから[auto]を選びます。
続けて、右の値の「単位」をクリック、同じようにメニューから[auto]を選んでください!





[08]
はい、これで1つの大きなブロックが固まりました。
次は、この中のモジュールの指定です。



図で確認しておきましょう。ここまでは学習済みですから、問題ないですね。





[09]
このレイアウトをクリアしたら、あとはブロック、カラム、モジュールの使い分けの習得。
最後まで理解できれば、複雑なマガジンレイアウトも設計できるようになるよ!

ゆっくり進めていきます!





それでは、第27回(新カリキュラムの第5回)の投稿をお待ちください。


今回のテキストキャスティングは、こちらの講座ビデオの追加コンテンツです。
テキストキャストの課題データやサンプルデータは、専用ページからダウンロードすることができるようになります。

講座ビデオ版・Dreamweaver CC 2015 によるレスポンシブWebデザイン
CSSデザイナーとDOMパネルを活用したライブビュー・ワーク[基礎編]
購入方法:Creative Edge School Booksのストア( http://design-zero.tv/ia/dw1/
形式:ビデオ(学習パートごとに分割されています)
総再生時間:1時間40分
発売期間:2月29日の朝7時まで(※販売終了しました
価格:1,500円
※シンクゼロマガジン(旧・全記録)の読者ページでは常時アクセスできます。



前回(第22回)までは、以下のページにまとめてあります。

中学生のためのレスポンシブWebデザイン
Dreamweaverライブビュー編


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

筆者:
Creative Edge School Books