Tips:CSSでタブウインドウを作る
これは、「とりあえずこうしてみたらこの環境ではできた」というだけの技術であり、全ての環境で動くことをお約束するものではありません。とりあえず、サンプルはこちら
WinIE6-8(IETester),Firefox10,Operaでは動作します。MacSafariにはoverflowに関してバグがあるそうなので、動かない可能性があります。Macがないため確認不可能ですが…
一応、シミュレーターのiPhone4では動作しました。
解説(のようなもの)…
仕組みはただのページ内リンクですが、ブロックレベル要素を重ねてoverflowプロパティを設定することで、タブウインドウに見せています。
高さのあるページ(右にスクロールバーが出ている状態)だと、ページ内ジャンプをした時に上部が切れる位置に移動してしまいますが、高さのないページではもちろん画面は動きません。
必要なソースはこんな感じ。
ここではボックスのサイズを400*200、リンク先はa要素にnameとid属性を指定することにします。
HTML
<div class="outline">
<a href="#box1">box1</a><a href="#box2">box2</a>
<div class="box">
<div><a name="box1" id="box1">box1</a></div>
<div><a name="box2" id="box2">box2</a></div>
</div>
</div>
<a href="#box1">box1</a><a href="#box2">box2</a>
<div class="box">
<div><a name="box1" id="box1">box1</a></div>
<div><a name="box2" id="box2">box2</a></div>
</div>
</div>
CSS
.outline {
width:400px;
}
.outline a {
display:block;
float:left;
text-decoration:none;
}
.box {
clear:both;
height:200px;
overflow:hidden;
}
.box div {
height:200px;
overflow:auto;
}
width:400px;
}
.outline a {
display:block;
float:left;
text-decoration:none;
}
.box {
clear:both;
height:200px;
overflow:hidden;
}
.box div {
height:200px;
overflow:auto;
}
赤字のところがポイントです。
<div class="box">内のdivそのものにCSSを適用させていますが、もちろんclass指定でも構いません。
name属性でしかジャンプできないブラウザを考慮しないのであれば(最近はもうほとんどid対応だと思いますが…)、divにid属性を指定すればaタグはいらなくなり、使い勝手が向上します。
なお上のソースは「必要最低限」ですので、装飾(色指定など)は省いています。
もう少し良いやり方がありそうな気もしているのですが、思いつきません…。