ポルカの日記 | CSSベースのHTMLレイアウト入門講座

clerafixと呼ばれるfloat解除の方法は
本やネットでたくさん紹介されているので今さらではあるけれど、
一番シンプルな方法を覚え書き程度に書いておきたいと思います。

:afterの疑似クラスを用いて、5つのスタイルシートを記述して、
さらにIE対策でzoom: 1;を記述します。

.clearfix:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
.clearfix{
zoom: 1
}


上例はclass名として「clearfix」を使っていますが、
id名でも、タグ指定でも、大丈夫です。

▽例えばこんな感じ
p:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
p{
zoom: 1;
}

#hogehoge:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
#hogehoge{
zoom: 1;
}


深い階層付けをしたセレクタでも大丈夫。

▽例えばこんな感じ
#hoge .hogehoge table.hoge th div:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
#hoge .hogehoge table.hoge th div{
zoom: 1;
}


<br />にclearをさせる方法も使いますが、
このclearfixで重宝するのは、<br />が挟めない<ol><ul>（<dl>も）です。
よく使うのは<li>をfloatで横並びさせるときに、<ol>（<ul>）にclearfixしておいたりします。

.clearfixでCSSファイルに記述しておいて、
必要時HTMLに、<div class="clearfix">とかでclass名を付与するもよし、
特定の箇所にだけ、局所的にclearfixさせるもよし。

ハックなんて変則的なことは絶対いやだーーーって方には、おすすめはしませんが、
一度使うとあまりの便利さに、きっと逃れられなくなると思います。

最近、カラーミーショップとMakeShopのカスタマイズ案件をご依頼いただきました。
使いやすい部分・使いにくい部分を感じたことを
忘備録的に止めておきたいと思います。...続きを読む

ページタイトル用の<div></div>の中に
<h1>と<p>を左右にフロートさせ、
そのやや下側に10pxの余白をあけて、
3pxのボーダーをつけるデザインをしていたところ、
意図しないくらい大きな余白（50pxくらい）になってしまいました。

▽こんな感じです。
<div>
<h1>左：タイトル画像</h1>
<p>右：説明テキスト</p>
<br style="clear: both;" />
</div>

（確認 Windows IE6）


...続きを読む

掲示板用のデザインで、
スレタイトルテキストの下部に少し余白とボーダーをつけ、
その下側に10pxほどの空白、
で、カテゴリー名や投稿日時などの細かい文字を
で並べるレイアウトをしていました。

が、

なぜか内のテキストの上部1〜2pxだけ
削れたように見えなくなる事例が発生。

（確認 windows IE6）


...続きを読む

Seesaaブログ