はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
デザイン通りに組む！　～汎用性のある設計＋clearfix～
2008/09/22
トモ・リーン
今回は、内容っぽいの部分をするわよ。（下の図を見てね）
図：今回の作業箇所
ケンジ
ここは毎回新着記事が出る箇所なんだけど、画像のサイズが変わる可能性があるところで、時々画像が無いこともあるんだけど、更新が楽なように組みたいな〜！
トモ・リーン
大丈夫よ〜！
今回の作戦はこんな感じね。
タグとかスタイルを使う方向性の図
ケンジ
おけ〜。
やるぜーーー！
トモ・リーン
ちょい、まてぇーーい！
ねえ。気持ち悪くない？？
ケンジ
な、なにが。
トモ・リーン
ここ、フロートしてるのに、クリアしてないわよね。
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; /* 高さは０ */
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; /* 高さは０：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は状況に合わせて使い分けましょう。
トラックバック(0)
このブログ記事を参照しているブログ一覧：デザイン通りに組む！　～汎用性のある設計＋clearfix～
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/102
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4