KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > CSSハック：clearfix

CSSハック：clearfix

CSSによるレイアウトをおこなった場合、floatを利用することはスタンダードな手段だ。ところが親コンテナの中で子コンテナをfloatしてやると親コンテナの高さがおかしなことになる。

サンプル

id="clearFix"

id="cfLeft"

clearfixのテスト。左側に寄せるコンテンツ

id="cfRight"

clearfixのテスト。右側に寄せるコンテンツ

親コンテナに背景がある場合、背景が切れることになりその対策として下記のような.clearクラスをbrなどにくっつけてfloat解除をしていた。

サンプル

CSS
  1.  .clear {
  2.   clear: both;
  3.  }
HTML
  1.  <div id="clearFix">
  2.   <p>id="clearFix"</p>
  3.   <div id="cfLeft">
  4.   <p>float: left;</p>
  5.   <p>clearfixのテスト。左側に寄せるコンテンツ</p>
  6.   </div>
  7.  
  8.   <div id="cfRight">
  9.   <p>float: right;</p>
  10.   <p>clearfixのテスト。右側に寄せるコンテンツ</p>
  11.   </div>
  12.  
  13.   <br class="clear" />
  14.  
  15.  </div>

実行結果

id="clearFix"

float: left;

clearfixのテスト。左側に寄せるコンテンツ

float: right;

clearfixのテスト。右側に寄せるコンテンツ


floatがクリアされ、背景が表示されるので結果としては問題ないが、(x)HTMLに余分なソースを記述することになりちょっと気持ちが悪い。

そこでclearfixというCSSハックを利用する。

clearfixサンプルソース
CSS
  1.  clearFix {
  2.   zoom:1;/*for IE 5.5-7*/
  3.  }
  4.  
  5.  clearFix:after {/*for modern browser*/
  6.   content:".";
  7.   display: block;
  8.   height:0px;
  9.   clear:both;
  10.   visibility:hidden;
  11.  }

clearfix実行結果

id="clearFix"

float: left;

clearfixのテスト。左側に寄せるコンテンツ

float: right;

clearfixのテスト。右側に寄せるコンテンツ

上記以外にも書き方は多数ある模様。

cleafix参考サイト
見た目だけに頼らない本物のWebデザイン 業績アップのための最重要テクニック
作者:玉井 昇 | 価格:￥ 2,415
投稿日 2007年10月29日 21:39
カテゴリ HTML/CSS
タグ CSSハック
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1125

トラックバック(0)

コメント

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.08

[Ubuntu11.10]Winows XPユーザーがUbuntuを使ってみて

Windows XPとUbuntuのデュアルブート環境にしてみておもったこと。

2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

Tags