ラジオボタンやチェックボックスのベースライン
見易さを考慮すると、日本語の場合フォントサイズを12ピクセルぐらいにすると見やすいです。奇数数値のピクセル値はあまり日本語には合わないそうです。多くのサイトでfont-size: 12px;というスタイルが用いられているでしょう。
ただし、フォームのデザインやレイアウトをしだすとどうにもうまくいかないことも出てきます。私がよくぶち当たるのはラジオボタンやチェックボックスと文字のベースラインです。このたび、それを何とかする方法を考えました。
結論から言うと、CSSの醍醐味でもあるpositionプロパティを使って、ズレた分をピクセル単位で修正していきます。
ラジオボタンやチェックボックスの場合、labelを対応する文字につけると思いますので、それを利用します。ここでは簡易的にlabelタグそのものに対してスタイルをつけていくことにします。図と照らし合わせご覧ください。
まずいかのようなコードを用意しました。
<form name="form1">
<div id="item">
<input type="radio" name="item1" id="item1" value="0" /><label for="item1">ラジオボタンの項目</label><br />
<input type="checkbox" name="item1" id="item1" value="0" /><label for="item1">チェックボックスの項目</label><br />
</div>
次に以下のようなCSSを定義します。
label{
font-size: 12px;
}
これだとベースラインにズレが生じてしまいますので、labelのスタイルに以下の2つのプロパティを追加します。
label{
font-size: 12px;
position: relative;
top: -3px;
}
これでいい感じになる・・・と思いきや、Operaでは元々いい感じになるような仕様らしく、逆にこれをするとベースラインが上にズレてしまいます。なので、Operaはこの設定をしないようにします。IEでよく使われるCSSハックですが、Operaにもハックがあるみたいなので、それを利用します。以下のCSSを定義しておきます。
body:first-of-type label{
font-size: 12px;
}
これはOperaにしか反応しないCSSです。
<%image(blog/20081225001.png|412|481| title="ラジオボタンやチェックボックスをレイアウトするときのCSS"alt="ラジオボタンやチェックボックスをレイアウトするときのCSS")%>
ここまで紹介してきた内容ですが、もちろん問題点もいくつかあります。まぁ最大の問題点というのはpositionプロパティを使っているので、レイアウト次第でレイアウト崩れが発生してしまうかもということです。
でもまぁずっと悩んでいたことが解消したので、すっきりです。検索しても見つけられなかったので。