CSS 3のセレクタ「:target」でタブメニューをつくる

エ・ビスコム・テック・ラボ
2009-02-06 20:14:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

 エ・ビスコム・テック・ラボが手がける連載「FirefoxとSafariのCSS徹底検証」では、5回に渡ってCSS 3のセレクタを紹介してきた。本日掲載した第51回「CSS 3のセレクタ解説::root、:not、:empty、:target」でセレクタの解説は終わったが、エ・ビスコム・テック・ラボが「:target」を利用してタブメニューを作る方法を教えてくれたので、それを紹介しよう。(編集部)

CSS 3のセレクタ「:target」でタブメニューをつくる

 CSS 3のセレクタ「:target」を利用すれば、リンクをタブメニューの形で表示して、1ページ内に記述したコンテンツを切り替えて表示するように指定することが可能だ。HTMLとCSSだけでタブメニューを作成する場合、これまではコンテンツごとにページをわけて作成する必要があったため、1ページで実現できるメリットは大きいと言える。

 ここでは、positionプロパティを指定して「テキスト1」から「テキスト5」を同じ位置に重ねて表示している。その上で、リンクをクリックしてターゲットとして表示されたときにだけz-indexプロパティを適用して、手前に表示するように設定した。

図1(画像をクリックすると拡大します) 図1(画像をクリックすると拡大します)
図2(画像をクリックすると拡大します) 図2(画像をクリックすると拡大します)
図3。タブメニューのリンクをクリックするとコンテンツの表示が切り替わる(画像をクリックすると拡大します) 図3。タブメニューのリンクをクリックするとコンテンツの表示が切り替わる(画像をクリックすると拡大します)
div{
position: absolute;
top: 17px;
left: 20px;
}

#text1:target{
z-index: 2;
}

#text2:target{
z-index: 2;
}

#text3:target{
z-index: 2;
}

#text4:target{
z-index: 2;
}

#text5:target{
z-index: 2;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>SAMPLE</title>
<style type="text/css">

#menu{
position: absolute;
top:0;
left:20px;
font-size: 12px;
}

#menu a{
display: block;
text-decoration: none;
text-align: center;
width: 55px;
height: 20px;
border-bottom: none;
padding: 5px 0 0;
margin-right: 5px;
float: left;
color: black;
}


div{
width: 400px;
height: 180px;
padding: 10px;
margin: 20px 0;
background-color: white;
}

#text1{
z-index: 2;
}

#text1, #menu1{
background-color: pink;
}

#text2, #menu2{
background-color: orange;
}

#text3, #menu3{
background-color: limegreen;
}

#text4, #menu4{
background-color: skyblue;
}

#text5, #menu5{
background-color: cornflowerblue;
}


div{
position: absolute;
top: 17px;
left: 20px;
}

#text1:target{
z-index: 2;
}

#text2:target{
z-index: 2;
}

#text3:target{
z-index: 2;
}

#text4:target{
z-index: 2;
}

#text5:target{
z-index: 2;
}


</style>
</head>
<body>

<p id="menu">
<a href="#text1" id="menu1">テキスト1</a> 
<a href="#text2" id="menu2">テキスト2</a>
<a href="#text3" id="menu3">テキスト3</a>
<a href="#text4" id="menu4">テキスト4</a>
<a href="#text5" id="menu5">テキスト5</a>
</p>

<div id="text1">
<h2>テキスト1</h2>
<p>
テキスト1の本文です。テキスト1の本文です。テキスト1の本文です。テキスト1の本文です。テキスト1の本文です。テキスト1の本文です。テキスト1の本文です。テキスト1の本文です。テキスト1の本文です。</p>
</div>

<div id="text2">
<h2>テキスト2</h2>
<p>
テキスト2の本文です。テキスト2の本文です。テキスト2の本文です。テキスト2の本文です。テキスト2の本文です。テキスト2の本文です。テキスト2の本文です。テキスト2の本文です。テキスト2の本文です。</p>
</div>

<div id="text3">
<h2>テキスト3</h2>
<p>
テキスト3の本文です。テキスト3の本文です。テキスト3の本文です。テキスト3の本文です。テキスト3の本文です。テキスト3の本文です。テキスト3の本文です。テキスト3の本文です。テキスト3の本文です。</p>
</div>

<div id="text4">
<h2>テキスト4</h2>
<p>
テキスト4の本文です。テキスト4の本文です。テキスト4の本文です。テキスト4の本文です。テキスト4の本文です。テキスト4の本文です。テキスト4の本文です。テキスト4の本文です。テキスト4の本文です。</p>
</div>

<div id="text5">
<h2>テキスト5</h2>
<p>
テキスト5の本文です。テキスト5の本文です。テキスト5の本文です。テキスト5の本文です。テキスト5の本文です。テキスト5の本文です。テキスト5の本文です。テキスト5の本文です。テキスト5の本文です。</p>
</div>


</body>
</html>
ブラウザで表示を確認する
  • コメント(1件)
#1 anonymous   2010-12-04 21:40:43
エクスプローラーでは使用できないのでしょうか?
どうしても反応しません。
  • 新着記事
  • 特集
  • ブログ