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

第15回「魔法の呪文「clearfix」をつくって、宙に浮いてコンテナから飛び出してしまった2つの記事を元に戻すよ!」



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



[01]
前回の続きです。魔法の呪文「clearfix」について学習していきましょう。

素材データをダウンロードしてください。
「DW-15-Sample」フォルダの中の「Step01」フォルダが入ってます。その中の「MyLP」フォルダをデスクトップにコピーしてね。
前にもやりましたね。

Dreamweaverで「index.html」をダブルクリックして開くと、「footer」が流れ込んだままのページが表示されますので、これを直しますよ。





[02]
CSSデザイナーの[ソース]で「style.css」が選択されていることを確認しておいてね。

[セレクター]の[+]をクリックして、「.cf」と入力、Enterキーを押してください。

続けて、[セレクター]の[+]をクリックし、「.cf:before, .cf:after」と入力して、Enterキー!
入力は注意してくださいね。

「.cf」+「:before」+「,(カンマ)」+「.cf」+「:after」です。





[03]
[プロパティ]の一番下に[その他]があります。スクロールして表示して!

クリックして「con」と入力すると、候補メニューが出てきますので、「content」を選んで、Enterキーを押してください。

続けて、値の部分をクリックして「""」と入力、Enterキーを押しましょう。

この指定は、「見えないけど、存在する何か」という感じかな。
透明な物体をつくったと考えてください。





[04]
さらに、[clear]の3つ目のアイコンをクリック!
覚えてますよね?

そう、[float](フロート)を解除する指定です!
透明な物体に、指定したんですよ。

もう一つ、[display]の値をクリックし、メニューから[block]を選んでください。
これで、魔法の呪文が完成しましたよ。





[05]
それでは、宙に浮いてコンテナの外に飛び出してしまった2つの記事を元に戻してあげましょう。

この2つの記事を含むコンテナに、先ほどのクラス「.cf」を追加します。
DOMパネルの「div(class="wrapper")」をクリックして選択してください。

[エレメントディスプレィ]の[+]をクリックして、「cf」と入力して、Enterキーを押しましょう!
さぁ、どうなるかな?






[06]
はい、2つの記事がコンテナに戻りましたね!

実は、このコンテナの一番下に、先ほどつくった透明な物体が置かれていて、そこに[float](フロート)を解除する[clear]を指定したのです。

指定する要素がなくても、こうやって透明な要素をつくって指定できるなんて、すごいと思いませんか?

「.cf:before, .cf:after」って入力したでしょう。
これって、「cf」が付けられた要素の「前」もしくは「後」に、「content: ""」(透明な要素)を発生させるということなんです。





[07]
ついでにBootstrapの中を覗いてみましょうか。
アプリケーションバーの[bootstarp.css]をクリックし、続けて、[コード]をクリックしてください。

Bootstrapで使われているCSSが表示されました。





[08]
編集メニューの[検索/置換]を選んでください。
ダイアログが表示されますので、[検索]に「clear」と入力して、[次を検索]を3回ほどクリックすると、「.clearfix:after」の箇所がコードビューに表示されるでしょう。






[09]
ほら、「content: " "」が記述されてる。
その下の「.clearfix:after」には、「clear: both」があります。

これが「clearfix」という魔法の呪文の正体。
ここでは、短縮して「cf」というクラス名にしましたけど。





[10]
今回の課題ページでも、この「clearfix」を使うけど、もうわかったよね。
ちなみに、ナビゲーションバーでも「clearfix」が必要なんだ。

ちょっと難しかったと思うけど、知識として頭に入っているだけで、ずいぶん違うから。
では、次回!





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

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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books