はじめてのCSS:やさしさいっぱいのCSSが肌にしみこむ!カモ。

デザイン通りに組む! ~汎用性のある設計+clearfix~

トモ・リーン
今回は、内容っぽいの部分をするわよ。(下の図を見てね)
図:今回の作業箇所
ケンジ
ここは毎回新着記事が出る箇所なんだけど、画像のサイズが変わる可能性があるところで、時々画像が無いこともあるんだけど、更新が楽なように組みたいな〜!
トモ・リーン
大丈夫よ〜!
今回の作戦はこんな感じね。
タグとかスタイルを使う方向性の図
ケンジ
おけ〜。
やるぜーーー!
トモ・リーン
ちょい、まてぇーーい!
ねえ。気持ち悪くない??
ケンジ
な、なにが。
トモ・リーン
ここ、フロートしてるのに、クリアしてないわよね。
file10でも説明してるけど、フロートをしたら必ずクリアの要素をおかないといけないのよ。
クリアしていないところの図
ケンジ
う〜ん、こう?
フロートに+brにclear:both;を付けてフロート解除の図
トモ・リーン
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; /* 高さは0 */
visibility: hidden; /* 表示を隠す */
}
ケンジ
うお〜〜。
確かに今までみたいな、単純さは無いね・・・。
とりあえず、この記述も入れて今回の箇所のコードを組むぜ!
組んでみたファイル【HTML】 組んでみたファイル【CSS】
まだまだ納得出来ない人は、気になるところを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; /* 高さは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は状況に合わせて使い分けましょう。