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

第14回「レイアウト作業で混乱しないように、まず「clearfix」っていう古くから使われている魔法の呪文の最新版を理解しようね!」



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



[01]
まず、最も理解しにくい部分を先に学習していきましょう。
サンプルページを使って説明していきますね。

このページを使います。
ページに青い背景色が指定されていて、中央にコンテナが配置されています。
コンテナの中には、タイトルと本文、一番下にクレジットがあります。





[02]
図で確認しましょう。
コンテナの中に、「header」「article」「aside」「footer」の4つのコンテナが入ってます。

これから、「article」と「aside」のコンテナに対して、CSSを指定してみるよ。
見ていてください。





[03]
CSSデザイナーの[セレクター]の「article」をクリックして選択。

続けて、[プロパティ]の[width]の値をダブルクリックして「65%」と入力します。
「article」コンテナの幅が、65%になりました。

さらに、[float]の右端のアイコンをクリックしますよ。





[04]
はい、「article」の右側の空きに、「aside」と「footer」が流れ込んできましたね!





[05]
じゃ、「aside」もCSSを指定してみます。

[セレクター]の「aside」をクリックして選択。
[プロパティ]の[width]の値をダブルクリックして「32%」と入力します。

続けて、[float]の左端のアイコンをクリック!





[06]
「article」と「aside」の2つのコンテナが、横方向にきれいに並びました!

「article」の幅は65%、「aside」の幅は32%ですね。
「article」は左に寄せていて、「aside」は右に寄せた、という状態です。

でも、一番下の「footer」がまだ流れ込んだ状態だよね。
わかるかな?

「article」と「aside」の間に、クレジットの頭の(C)が入っちゃってるでしょう。





[07]
もっと、わかりやすいように、「footer」に背景色を指定してみるよ。

[セレクター]の「footer」をクリックして選択。
[プロパティ]の[backrround-color]で、薄いピンクを選びます。



どうです?
「footer」が流れ込んでいるでしょう!
これは、マズイですよね。

さぁ、どうやって流れ込むのを防ぐか?





[08]
実は、[float](フロート)を解除するプロパティがあるんですよ。

[プロパティ]の[clear]がそうです。
4つアイコンが並んでいますが、3番目のアイコンが、左寄せでも右寄せでも解除できる値です。
クリックしますよ!



ほら、止まった!
「footer」で止まったよね。

こんな感じで、[float](フロート)を使ったら、[clear]で流れ込むのを防ぐ。
覚えておいてください!





[09]
でも、このページには「footer」があったからいいけど、何もなかったら、[clear]を指定できないじゃない?

ちょっと、「footer」を削除してみるよ。
DOMパネルの「footer」タグを右クリックして、[削除]を選択!





[10]
流れをせき止めていた「footer」が無くなっちゃったので、おかしな表示になったね。

これ、どういう状態かというと、「article」と「aside」が宙に浮いていて、コンテナの外に飛び出しちゃってるんだ。

前に、[float](フロート)って「浮動化」の機能って話をしたけど、まさに浮いてる状態。

だから、どうしても[clear]を指定したい!
でも、指定するものがない!





[11]
さぁ、ここで魔法のクラス名を使うよ!

「article」と「aside」が入っているコンテナに対して、その魔法のクラス名を指定します。
DOMパネルの「div(class="wrapper")」をクリックして選択!



[エレメントディスプレィ]の[+]をクリックして、クラス名を追加しますよ。
「cf」と入力して、Enterキーを押します!





[12]
どうです! コンテナの外に飛び出ていた「article」と「aside」が戻ってるでしょう。

[clear]を指定したからですよ!

どこに指定したのでしょう。秘密は、魔法のクラス名にあります。
「cf」はすでに、CSSファイルに記述されているんだけど、次回、その秘密を教えます!

「clearfix」っていう古くから使われているCSSのテクニックの最新版なんだ。

ここが理解できれば、複雑なレイアウトデザインでも、怖いものなしだ!




今回使ったサンプルページは、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページにあるので、ダウンロードして、実際にDreamweaverで試してみてよ。


「DW-14-Sample」フォルダに、「Step01」から「Step04」まで4つのフォルダが入っている。

「Step01」フォルダには、まだ[float]が指定されていないページが入ってます。
「Step02」フォルダには、[footer]コンテナに[clear]を指定して、完成したページ。
「Step03」フォルダには、[footer]コンテナを削除して、大惨事になってるページ。

そして、「Step04」フォルダには、魔法のクラス名を追加した完成ページが入ってます。

ウェブブラウザーで見ていくだけでもいいですよ。
「Step04」フォルダには、魔法のクラス名の秘密が書かれてるんだけどね!


それでは、第15回の投稿をお待ちください。


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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books