center-circle.net

今まで、特に意識をしていなかった「line-height」。
意識をしてなかったというのは、誤解があるかもしれないが、、、

ただ、案件をこなしていくなかで、どうも腑に落ちないことがあったので、
いろいろ検証してみた結果、ちょっとした法則を発見。

とても、当たり前な話なんですがｗ

WEB制作者にとっては、特にコーダーにとっては、
この問題は、しっかりと頭に入れておくべきだと思う。

ということで。
「俺流 line-heightの求め方」をご紹介。

▼俺流公式
———————————————————
line-height = ( FontSize + Font間余白 ) / (FontSize)
———————————————————
と言う具合になる。

具体的に数値を当てはめてみると。。。
———————————————————
●FontSize = 12px
●Font間余白 = 8px
———————————————————

上記の場合
———————————————————
●line-height
= ( 12px + 8px ) / 12px
= ( 20px ) / 12px
= 1.666666667
※小数点第三位以下を切り捨て。

∴
line-height = 1.66
———————————————————
これで、line-heightを簡単に求めることができる。

みなさんも試してみてください。

【余談】
「line-height」と「font-size」の関係って、意外と難しいと思ってた。
だけど、理屈が分かれば、なんてことはない。

IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
まだベータ版らしいのですが、ちょっと試してみる価値あるかも。
IE6で使えなかった透過pngが表示できたり、使えなかったプロパティが使えたり。
色々、サンプルもあるのでご覧ください。

詳細はこちらをどうぞ。

■IE7.js
http://code.google.com/p/ie7-js/

■サンプル
http://ie7-js.googlecode.com/svn/test/index.html

いつも、ボックスのレンダリング具合を確認するときにしている方法。
大したことではないのですが、ちょっとした気遣いというか、後々見返すときに分かりやすいというか。

■サンプル

.box {
    float:left;
    width:100px;
    margin:10px;
    padding:10px;
}


みたいなソースがあったとき。
たいていの人が、こいつのレンダリング具合をボーダー引いて確認すると思いますが。
みなさんは、どうしてますか？

.box {
    float:left;
    width:100px;
    margin:10px;
    padding:10px;
    border:1px solid #ff0000;
}


こんな具合でしょうか。

ぼくはこんな感じ。

.box { border:1px solid #ff0000;
    float:left;
    width:100px;
    margin:10px;
    padding:10px;
}


「{」の直後にボーダーを指定しています。
これだと、確認用の設定だというのが一目瞭然で分かるわけです。
納品時に一括で置換して、消すことも可能ですし。

どうでしょうか。

俺流 -ボックスのレンダリングを確認するときの方法-でした。