CSS でタブきりかえ
2003-08-15-2
(最新情報→[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 で表示を確認。それ以外は
使えなさそうだけど。
なにせ、今までは DOS/V POWER REPORT '98 4 月号付録の小冊子を使って
たからねえ。しかも、もらいもんだし。まあ、Web で調べれば済むんだけ
ど (ほとんどの場合はそうしてる)、オールドタイプ気味な私としては、
紙ベースのものが手元にあると安心なんだよね。
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 で表示を確認。それ以外は
使えなさそうだけど。
<html><head></head><body bgcolor="#dddddd">最近入手した「詳解 HTML & CSS & JavaScript 辞典」が役に立ちました。
<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"> </td><td>はじめに</td>
<td id="spc"> </td><td class="open">解説</td>
<td id="spc"> </td><td>おわりに</td>
<td id="spc" width="100%"> </td>
</tr></table>
</div>
</body></html>
なにせ、今までは DOS/V POWER REPORT '98 4 月号付録の小冊子を使って
たからねえ。しかも、もらいもんだし。まあ、Web で調べれば済むんだけ
ど (ほとんどの場合はそうしてる)、オールドタイプ気味な私としては、
紙ベースのものが手元にあると安心なんだよね。
この記事に言及しているこのブログ内の記事