古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた(3日目)

JavaScript CSS

静的なデモばかりだとつまらないので、動的なデモを作りました。
お題は、CSS3 の :target 擬似クラスを使ったタブメニューです。
Opera10 で タブメニューA が動かない問題について追記しました。@os0x さん @edvakf さん、ありがとうございます。

Opera10 で何が起きているかは http://orera.g.hatena.ne.jp/edvakf/20090627/1246061579 をどうぞ。


タブメニューA

:nth-child, :last-child, :target などのセレクタをふんだんに利用しています。

<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:target</title>
<style>
body { background-color: #ddd; }

/* tab gimmick */
div.tab {}
div.tab > ul:first-child { list-style: none; margin: 0; padding: 0 }
div.tab > ul:first-child > li { display: inline; }
div.tab > ul:first-child > li > a { text-decoration: none; }
div.tab > div:nth-child(2) > div { display: none; }
div.tab > div:nth-child(2) > div:target { display: block; }

/* tab design */
div.tab {
  position: absolute;
  top: 20px; left: 20px;
  width: 400px;
}
div.tab > div:last-child { /* footer */
  color: #ccc;
  background-color: #888;
  text-align: center;
  border-top: 30px solid #ccc;
  -moz-border-radius: 0 0 7px 7px;
  -webkit-border-bottom-left-radius: 7px;
  -webkit-border-bottom-right-radius: 7px;
}
div.tab > ul:first-child > li > a {
  border: 1px solid black;
  border-top: 4px solid #7a7a7a;
  background-color: #101010;
  color: #ccc;
  margin: 0 2px 0 0;
  padding: 4px 10px 0 10px;
  font: 9pt arial;
  -moz-border-radius: 7px 7px 0 0;
  -webkit-border-top-left-radius: 7px;
  -webkit-border-top-right-radius: 7px;
}
div.tab > ul:first-child > li > a:hover {
  background-color: navy;
}
div.tab > div:nth-child(2) > div { /* tab body */
  border: 1px solid #4F4F4F;
  background-color: #111;
  color: #ccc;
  height: 200px;
  padding: 5px;
}
</style>
<script src="../uuAltCSS.js"></script>
</head><body>

<div class="tab">
<!-- opera10beta problem. see: http://orera.g.hatena.ne.jp/edvakf/20090627/1246061579
  <ul>
    <li><a name="tab1" href="#tab1" onclick="uuCSSBoost()">Head1</a></li>
    <li><a name="tab2" href="#tab2" onclick="uuCSSBoost()">Head2</a></li>
    <li><a name="tab3" href="#tab3" onclick="uuCSSBoost()">Head3</a></li>
    <li><a name="tab4" href="#tab4" onclick="uuCSSBoost()">Head4</a></li>
  </ul>
-->
  <ul>
    <li><a href="#tab1" onclick="uuCSSBoost()">Head1</a></li>
    <li><a href="#tab2" onclick="uuCSSBoost()">Head2</a></li>
    <li><a href="#tab3" onclick="uuCSSBoost()">Head3</a></li>
    <li><a href="#tab4" onclick="uuCSSBoost()">Head4</a></li>
  </ul>
  <div>
    <div id="tab1"><h2>tab1</h2>Body1</div>
    <div id="tab2"><h2>tab2</h2>Body2</div>
    <div id="tab3"><h2>tab3</h2>Body3</div>
    <div id="tab4"><h2>tab4</h2>Body4</div>
  </div>
  <div>
    <span>[footer]</span>
  </div>
</div>

</body></html>

この HTML + CSS は、最新のブラウザ(Firefox3.5, Safari3.27+, Chrome2+)なら、uuAltCSS.js が無くても動作します。

古いブラウザ(IE6, IE7, IE8, Firefox2, Firefox3)でも動かすために、a 要素に onclick="uuCSSBoost()" を設定しクリックで CSS を再評価させています。

タブメニューB

IE6, IE7 のレンダリングの問題を解決するため、コンディショナルセレクタを利用しています。
また、:target を利用しています。

<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>:target</title>
<style>
/* conditional selector for IE6, IE7 */
body.ie6 #menu,
body.ie7 #menu { top:13px; }

#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>
<script src="../uuAltCSS.js"></script>
</head><body>

<p id="menu">
  <a href="#text1" id="menu1" onclick="uuCSSBoost()">text1</a>
  <a href="#text2" id="menu2" onclick="uuCSSBoost()">text2</a>
  <a href="#text3" id="menu3" onclick="uuCSSBoost()">text3</a>
  <a href="#text4" id="menu4" onclick="uuCSSBoost()">text4</a>
  <a href="#text5" id="menu5" onclick="uuCSSBoost()">text5</a>
</p>

<div id="text1"><h2>text1</h2><p>text1 body</p></div>
<div id="text2"><h2>text2</h2><p>text2 body</p></div>
<div id="text3"><h2>text3</h2><p>text3 body</p></div>
<div id="text4"><h2>text4</h2><p>text4 body</p></div>
<div id="text5"><h2>text5</h2><p>text5 body</p></div>

</body></html>

あと10年ガマンしなくても CSS3 が使えるようになる日も近いかもしれませんね。

反省会

  • 「jQuery ならもっと見栄えのいいタブメニューが使えるのに」って意見ならいらんがな