Category: CSS

2月 26 2010

カラムの高さを揃えるCSS

divをfloat:leftなどでカラム分けする時に左右のカラムの高さが違うと困る時がある。
と言うかいつも揃えていたい!!!

そんなときは

#親要素{
overflow:hidden;
}

#カラム1, #カラム2{
float:left;
margin-bottom:-32768px;
padding-bottom:32768px;
}

と指定してやると揃います。大きくパディングを取って背景をずっと下まで拡大した後
マージンで実際の要素の高さに戻して余った部分の背景をoverflow:hidden;を使って切ってるって事のようです。そしてなぜ「32768」かはどうもその値がIEの限界らしい。

≪参考サイト≫
http://w3-info.net/post-112.html

2月 03 2010

どのブラウザでもフォントサイズを「%」で統一させる方法

font-size はpxで指定してやれば簡単なのだが・・・・・IE6やIE7で表示サイズが変えられないからと言う事でどのブラウザでもフォントサイズを統一させる方法って奴を調べてました。
いろいろ調べたがコレが一番しっくりくるかな?

body
{
     font:13px arial,helvetica,clean,sans-serif;
    *font-size:small;/*←IE6,7用*/
    *font:x-small;/*←IE6後方互換対策*/
}

table
{
    font-size:inherit;
    font:100%;
}

そしてこの様いクラスを定義しておけばフォントのサイズ指定もラクになるとのこと

.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%;  }

<<参考サイト>>
http://colo-ri.jp/develop/2008/03/css.html
http://www.dakiny.com/archives/movable-type/movable_type_50font_size/