HTML/CSS-11日目
最初の方とかめっちゃきちんと内容書きよったのに最近ものっそい雑になりよる。
どうでもいいけど鶏に似合うスニーカー探してます。
今日は２段組のボックスレイアウトを作ります。
----------ぱっ-------------------------------------ぱっ----------------------------------------
ボックス要素を使用して二段組のレイアウトを作っていきます。
完成を目指すのはこの形。ものすごいレゲエ臭。
早速やっていきましょう。
中身を作る（HTML）
では、HTMLから。
完成図、わかりづらいけどグレーの背景色の中に白いまとまりがあって、
その中にさらにヘッダーやらなんやかんやと、各要素が入っています。
この白い、二段組ボックスレイアウトの一番外側のひとを、一般的にwrapperと呼びます。
HTMLで中身を書いていきます。
<header><article><nav><footer>
そしたらそのwrapperの中にさらに上の4つの要素があるので、適当にタグを作って書いていきます。
<header>には<h1>が、
<nav>には<ul>が、基本的には必須となります。
装飾なしですが、中身はこれで完了です。意外と少ないですね。
調子乗って色は自分好みに変えながら進めます。
完全に調子に乗った輩の挙動。
-------------------------------------------------------------------
各要素を装飾する（CSS）
CSSを書いていきます。
CSSを書き始める前に、まず、これらのすべての要素がボックスになっているか確認しながら進めたほうがいいです。今回ははしょる。
全体の背景色を決める
ここでついでにリセットもしておきます。
さらに、全体の背景色を設定。
少し詰まって、背景も変わりました。
ボックス関連を指定
ここから、
ボックス関連を指定していきます。
wrapper
外側からせめて行きましょう。
.wrapperはヘッダーやフッターなどを内包する一番大きい外側の箱です。
赤い下線部marginの10PX autoは、垂直方向に10PX、さらに左右方向に自動で余白を取って配置してという命令。
さらにそのネストに当たるボックスについて書いていきます。
header
頭の部分です。
背景色、高さ、内外余白を指定します。
横幅は指定しないので、外部余白分のみ左右に余白が発生します。
article
右側の箱です。黄色いやつ。
幅と高さを指定し、floatで右側に浮かせます。
nav
左側水色の箱です。リスト入りのやつ。
幅と高さを指定し、左側に浮かせます。
footer
一番下の箱です。
clear: both;
footerの上部にはnavとarticleがありますが、これら２つはfloatにより浮いています。
clear: both;と書くことで、フロートによる要素の回り込みを解除します。前回のブログでやったやつ。
これで完成です。
ちなみに、footerのclearを書かないとこうなります。
なぜなら、navとarticleがフロートにより浮いているから。
親要素であるwrapperがこの浮いている２つを認識できないのです。
footerにclearをかけてやることで、親要素にfooterを認識させ、footerまでの領域をwrappwrが確保できるようにします。
では、footerがない場合に領域を確保させるには？
clearfixを使う
先日のブログに書いた「clearfix」を使います。
親要素の最後に、clear=bothを含んだブロックレベル要素をおく、というやり方です。
おさらいもかねて、改めてやってみます。
①divにクラス[clearfix]を与える
クラスを二つ持たせるのは問題ないので、まとめて持たせてあげましょう。
②外部CSSにclearを書き込む
.clearfix:after
で、clearfixというクラスをもつ箱のafter(後)に、このCSSを適当します。という意味になります。
content="";
CSSから文字を出力することが可能になります。""の中に文字を入れると、clearfixというクラスを持つ箱の後に、その文字列が出力されます。
display: block;
ブロック要素にします。clear=bothを含んだブロックレベル要素をおかないと解除されませんので、ここでブロック要素にします。
clear: both;
これで解除の命令を出します。
綺麗にまとまりました。
これで段組レイアウトボックスは完成です。
レッツトライ↑
