古い記事
ランダムジャンプ
新しい記事
(最新情報→[2003-08-23-2])
HTML でタブを切り替えるインターフェースをいろいろ調べる。

<http://unraveled.com/projects/css_tabs/>
(via <http://artifact-jp.com/mt/archives/200308/csstabs.html>)
ここのは「padding: 24px」などのサイズ決め打ちしている。ちょっと使
いづらいな。

<http://diveintomark.org/public/tabs-example.html>
フォントサイズを大きくするとタブの見出しの下が切れるしなあ。li で
「top: -1.32em;」とかやってるからか。

<http://nontroppo.org/test/tab2.html>
W2K 上の IE だとフォントが小さすぎて読めなかった。単にフォント指定
の問題かな。

まあ、いろいろとなんなので、table タグで作ってみました。枠だけなの
で、いろいろいじってご利用ください。IE6, N6 で表示を確認。それ以外は
使えなさそうだけど。

IMG

<html><head></head><body bgcolor="#dddddd">
<style type="text/css">
.tn table {border-collapse: collapse; /* for IE */
  border-spacing: 0; /* for N6 */}
.tn td {border: 1px solid #000; padding: 0 0.5em 0 0.5em;
  white-space: nowrap;}
.tn td.open {border-width: 1px 1px 0 1px;}
.tn td#spc {border-width: 0 0 1px 0;}
</style>
<div class="tn">
<table><tr>
<td id="spc">&nbsp;</td><td>はじめに</td>
<td id="spc">&nbsp;</td><td class="open">解説</td>
<td id="spc">&nbsp;</td><td>おわりに</td>
<td id="spc" width="100%">&nbsp;</td>
</tr></table>
</div>
</body></html>
最近入手した「詳解 HTML & CSS & JavaScript 辞典」が役に立ちました。
なにせ、今までは DOS/V POWER REPORT '98 4 月号付録の小冊子を使って
たからねえ。しかも、もらいもんだし。まあ、Web で調べれば済むんだけ
ど (ほとんどの場合はそうしてる)、オールドタイプ気味な私としては、
紙ベースのものが手元にあると安心なんだよね。
IMG