« Web 2.0 に重大な脆弱性 | トップページ | 坂村健氏が12万字フォントを無償公開 »

2005-12-10

CSS(:target 疑似クラス)だけでタブ効果

対応ブラウザ: Mozilla Firefox Safari Konqueror (CSS Level 3

なんか意外とページの整形に手間取ってしまいました。Seesaa って HTML ファイルのアップもできるんですね〜。これで Unicode さえ通れば文句ないんだけどな..。 さて、今回は表題にあるように CSS 3 の :target 擬似クラスだけでタブ効果を演出してみようという試みです。CSS 3 のセレクタ部分が予定では先月中に正式な勧告がリリースされるはずだったんですが、まだ出てないようですね。見切り発車気味ですけど、Firefox とか一部のブラウザが既に CSS 3 の一部を実装しつつあるので、まっ、いっかってことで。(笑) 2001年に勧告候補がすでに出ているとはいえ、IE 7 に反映してもらうためにも一日も早くリリースにこぎつけてもらいたいものですね。

Reference

The ':target' pseudo-class - Bert Bos @ W3C

ここで紹介している display:block | none; 切替手法とは別に、より完成度の高い z-index を使ったサンプルも置いています。

サンプル

サンプルページ

HTML ソース

<body>
<h1>Tabs using :target pseudo-class in CSS 3<h1>
<div class="contents">

<div id="tab1" class="tab">
<p>このページは <strong>CSS だけで</strong>タブ UI を実現しています。</p>
<p>The tabs in this page are working <strong>only by CSS</strong>.</p>
</div>

<div id="tab2" class="tab">
<p>ページ推移もしていませんし、JavaScript も使ってません。実際、ローカルで試してみるといいでしょう。(^-^)</p>
<p>There ain't no pages to jump, nor JavaScripts moving in background. Save it, and try it in your local machine.
(Of course in offline mode.) :-)</p>
</div>

<div id="tab3" class="tab">
<p>けれども残念ながら CSS の :target 擬似クラスが実装されていない IE6 以前では動作しません。(- -;)</p>
<p>But, these tabs doesn't work in IE, since CSS 3 ("target" pseudo-class) is not implemented yet competitively.
:-(</p>
</div>
<div id="tab4" class="tab">
<p>ちょっと残念ですね〜。</p>
<p>It's a quite a shame, isn't it?</p>
<div>
<h2>Reference</h2>
<p><a href="http://www.w3.org/Style/Examples/007/target.html">The ':target' pseudo-class - Bert Bos @ W3C</a></p>
</div>
</div>
</div>
</body>

CSS

/* :target 擬似クラス(CSS3)による タブ切替効果の処理
----------------------------------------------------------------- */
div.tab:target {
display: block;
}
:target div.tab {
display: block;
border-bottom: none;
}
:target div.tab + div.tab{
display: none;
}

/* 汎用要素スタイル
----------------------------------------------------------------- */
h2 {
font-size: 0.9em;
}
strong { /* 英文の強調個所を大文字化する */
text-transform: uppercase;
}

/* 文書構造スタイル
----------------------------------------------------------------- */
body {
margin: 0;
padding: 0;
text-align: center; /* IE 用センタリング処理 */
}
div#page {
margin: 2em auto; /* non IE ブラウザ用センタリング処理 */
text-align: left; /* IE 用センタリング処理の後始末 */
width: 20em;
}
/* タブ部分のスタイル
----------------------------------------- */
div.tabs a {
font-family: Tahoma, sans-serif;
font-size: 0.8em;
color: #000;
border: 1px solid #000;
margin-right: 2px;
padding: 0px 2px;
text-decoration: none; /* アンダーラインを消す */
}
div.tabs a:hover {
/* マウスオーバーした時のタブの色 */
/* セレクタ部分を a[href="#tab1"]:hover のようにすれば、個別のタブごとにマウスオーバー効果を指定することもできる。*/
background-color: #000;
color: #fff;
}
/* 各タブの色を指定 */
a[href="#tab1"] {background-color: #9cc;}
a[href="#tab2"] {background-color: #9c9;}
a[href="#tab3"] {background-color: #cc9;}
a[href="#tab4"] {background-color: #c99;}

/* 各タブページのスタイル
----------------------------------------- */
div.tab {
display: none;
height: 250px;
border: 1px solid black;
text-align: left;
padding: 1em;
}
#tab1 {background-color: #9cc;}
#tab2 {background-color: #9c9;}
#tab3 {background-color: #cc9;}
#tab4 {background-color: #c99;}

|

« Web 2.0 に重大な脆弱性 | トップページ | 坂村健氏が12万字フォントを無償公開 »

[Web]XHTML」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/139030

この記事へのトラックバック一覧です: CSS(:target 疑似クラス)だけでタブ効果:

« Web 2.0 に重大な脆弱性 | トップページ | 坂村健氏が12万字フォントを無償公開 »