タグ: CSS

CSSによるレイアウトが普及して、table要素をレイアウト用途に使うことは少なくなったけれども、純粋な表として使うことはなくならない。

で、表とセルの隙間をなくすために<table cellspacing=”0″ cellpadding=”0″>なんてするんですが、CSSでコントロールしたほうが後々修正は楽。このやり方をすぐ忘れてしまうのでメモ。

cellspacing=”0″ cellpadding=”0を使った例

<table cellspacing="0" cellpadding="0">
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

cellspacing=”0″ cellpadding=”0″を使わない例

<style type="text/css">
table {
	border-collapse: collapse;
}
</style>

<table>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

border-collapse: collapse;一発で隙間がなくなる。楽。多くの場合隙間は必要ないので、デフォルトで入れておき、例外として、cellpadding=”2″等の0以外のケースを対応する。これをCSSでやろうとすると下の通り。

table {
	border-collapse: separate;
	border-spacing: 2px;
}

ただ残念なことに、border-spacingはIEが対応していないので実質使えない。そういう時はどうするか。素直に<table cellspacing=”2″>としてやるのが正解。

CSSで font-size: 13px; なんてすると、Internet Explore (IE)で表示サイズを変えられないという問題、ではなくて、どのブラウザにも当てはまる問題。

まず大前提として、IEのフォントサイズは、最大・大・中・小・最小の5段階を指定でき、他のブラウザ (i.e., Firefox, Safari) は、ブラウザの設定でフォントサイズを自由に指定できます。

で、本題。

各ブラウザのフォントの見え方を統一する Yahoo! UI Library: Fonts CSS 等のCSSが出回っていますが、これらのCSSは基本的に、IEは small 等を、その他ブラウザには 13px 等を設定し、見た目のサイズを統一しようとしています。

ここで問題が起こるのは、IEではないブラウザ。先ほどののブラウザのフォントサイズ設定で設定した値を無視して 13px で描画するんです。。。困りました。例えば弱視の方がフォントサイズを大きく設定しても有効にならない等のケースが考えられます。

Firefox や Safari では、ページ表示中に一時的にフォントサイズを大きくしたり、小さくしたりはできますが、結局、一時的なんですよね。新しいウィンドウやタブでページを開くと、その設定はキャンセルされて元に戻ってしまっています。

以下、表示サンプル。

CSS で font-size:13px と設定

• ブラウザのフォントサイズ設定が 16px の場合
  
• ブラウザのフォントサイズ設定が 30px の場合
  

CSS で font-size:small と設定

• ブラウザのフォントサイズ設定が 16px の場合
  
• ブラウザのフォントサイズ設定が 30px の場合
  <img src="https://shinji.kawarano.net/wp-content/font-small-30.gif&quot; alt="CSS font-size:small / ブラウザ設定 30px" /

で、はやりIE以外のことを考えても、相対指定にしておこうとなる。

ここで制作者として悩ましいのが、なぜか OSX Firefox のデフォルトフォントサイズが 14px だという事 (参照: 各ブラウザのデフォルトフォントサイズ | Bowz::Notebook)に端を発する、OSX の Firefox だけ文字が小さめになってしまうこと。結局、「まぁ、いいやｗ」と相対指定にしましたが。

関連リンク

• TRANS – 【解決編】YUI Fonts CSSをモダンブラウザで最適化する。
• フォントサイズに関するCSSハック – Go my way

たまたま見かけたので、参考に。

* html .minmaxwie { width:expression(this.parentNode.clientWidth > 260 ? (this.parentNode.clientWidth > 500 ? “500px” : “100%”) : “260px”); }

また後で。