デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- トモ・リーン
- 今回は、内容っぽいの部分をするわよ。（下の図を見てね）
- ケンジ
- ここは毎回新着記事が出る箇所なんだけど、画像のサイズが変わる可能性があるところで、時々画像が無いこともあるんだけど、更新が楽なように組みたいな〜！
- トモ・リーン
- 大丈夫よ〜！
今回の作戦はこんな感じね。
- ケンジ
- おけ〜。
やるぜーーー！
- トモ・リーン
- ちょい、まてぇーーい！
ねえ。気持ち悪くない？？
- ケンジ
- な、なにが。
- トモ・リーン
- ここ、フロートしてるのに、クリアしてないわよね。
file10でも説明してるけど、フロートをしたら必ずクリアの要素をおかないといけないのよ。
- ケンジ
- う〜ん、こう？
- トモ・リーン
- Noぉーーーーっ！！
無意味すぎるbrタグが不細工すぎるわ！！！
- ケンジ
- でも、仕方ないよね。
世の中、目をつぶらなくちゃいけないこともある・・・。
それが人間社会ってもんだぜ。
- トモ・リーン
- ぶっちゃけたことを言うと、わたしも妖精だけど臭いものにはフタをするわ。
でも今回はこのリンクのフロートの次に何も置かなくてもクリア出来るのよ！
- ケンジ
- ええ〜〜〜〜っ？
- トモ・リーン
- 実は超裏技があるのよ。
CSS界では「clearfix」と呼ばれているわ。
この手法を使うと実際には不必要な要素（brやdivなど）を使って、floatを解かなくてもいいのよ。
- ケンジ
- 超裏技・・・。 ごくり。
- トモ・リーン
- ややこしいから、気合いを入れて理解してね！！
実際の書き方
floatしている要素の親 {
_height: 1px; /* 高さ1px「:after」をサポートしていない、IE6用の記述。高さを指定すると、含む内容のサイズに合わせて親が伸びるバグを利用している。 */
min-height: 1px; /* 最低の高さ1px「:after」をサポートしていない、IE7用の記述。最低の高さを指定すると、含む内容のサイズに合わせて親が伸びるバグを利用している。*/
}
floatしている要素の親:after { /* ul#sample20が閉じる直前に新しい要素を作る */
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both; /* 回り込み解除 */
height: 0; /* 高さは０ */
visibility: hidden; /* 表示を隠す */
}
- ケンジ
- うお〜〜。
確かに今までみたいな、単純さは無いね・・・。
とりあえず、この記述も入れて今回の箇所のコードを組むぜ！
まだまだ納得出来ない人は、気になるところをclearfix用の記述箇所をコメントアウトしたり、値を書き換えて納得するまで挙動を確かめるとスッキリします。
- トモ・リーン
- 他にもclearfixを使うと、こんなシーンにもきれいな記述が出来るわよ。
aタグの疑似クラスを使って色々やってみよう！文字編2 + clearfixで横並びリスト！！
- まるでボタン2
-
HTML 構造はfile18の「まるでボタン」と同じですよ。
<ul id="sample20">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>CSS
ul#sample20 {
margin: 0;
padding: 0;
_height: 1px; /* 高さ1px：clearfix用記述 */
min-height: 1px; /* 最低の高さ1px：clearfix用記述 */
}
ul#sample20:after { /* ul#sample20が閉じる直前に新しい要素を作る：clearfix用記述 */
content: "."; /* 新しい要素を作る：clearfix用記述 */
display: block; /* ブロックレベル要素に：clearfix用記述 */
clear: both; /* 回り込み解除：clearfix用記述 */
height: 0; /* 高さは０：clearfix用記述 */
visibility: hidden; /* 表示を隠す：clearfix用記述 */
}
#sample20 li {
width:10em;
margin: 0;
padding: 0;
list-style-type: none;
float:left; /*メニューを横に並べます*/
}
#sample20 a {
display:block;
text-align:center;
text-decoration:none;
}
#sample20 a:link, #sample20 a:visited {
color: #888888;
background-color:#EEEEEE;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
padding: 5px 1px 5px 0;
}
#sample20 a:hover {
color: #333333;
background-color:#CCCCCC;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
padding: 6px 0 4px 1px;
}
- ケンジ
- お〜〜！
さすがに、ulの中にbrとかdivは俺でも気持ち悪いな〜〜。
- トモ・リーン
- clearfixは記述が複雑なので、今回みたいに「一番最後」とか決め打ち出来るところや、ソース的にクリア要素が入れられないときに書いておくといいわ。
- ケンジ
- うんうん。
普段は<br class="clear" />とかの方が楽だしね〜！
- トモ・リーン
- 実はclearfixはまだまだ研究中の分野で、そのうちもっと単純な書き方が見つかるかもって噂もあるわ。
「clearfix」でググるといっぱい研究している人が出てくるわよ。
- ケンジ
- へぇ〜〜〜！
- 今回のポイント！
- 更新が多い箇所はどのような更新になるのか確認して、CSSを設計しましょう！
初めは頭が痛いけど、きちんと設計しておくと後の更新作業が楽になります。
clearfixとclear:bothは状況に合わせて使い分けましょう。