Google の 角丸

Google の角丸画像を使わない角丸を実現させるためにJavaScriptのライブラリがはやっていて、お手軽に使えるのはいいけど実際にJavaScriptが実現しているコードを見てみるとdivの信じられない数の入れ子だったりしてびっくり。

ふと、Google Analyticsを見ていると1ピクセルの画像を使わない角丸を実現しているので、おもしろそうなので見てみた。

デモ

Google の角丸

HTML


<ul id="nav">
<li><a href="list1.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list2.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list3.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list4.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
<li><a href="list5.html" class="current"><b><b><b>アクティブ</b></b></b></a></li>
<li><a href="list6.html" class=""><b><b><b>非アクティブ</b></b></b></a></li>
</ul>


CSS


*{ 
  zoom:1; /* haslayout 対策 */
}
#nav a {
  color: gray;
}
#nav a:link,a:visited {
  text-decoration: none;
}
#nav a:active,a:hover {
  text-decoration: underline;
}
#nav a.current:active,a.current:hover {
  color: white;
  text-decoration: underline;
}
#nav a b {
  font-weight: normal;
  cursor: pointer;
  position: relative; /* ボックス内を基準に相対位置で表示(内包するbにも継承) */
  display: block; /* インライン要素のb要素をブロック要素に(内包するbにも継承) */
}
#nav a b b b {
  padding: 1px 6px;
}
#nav li {
  list-style: none;
  width: 200px;
  font-size: 12px;
  margin: 3px 0;
  padding: 2px 0px 3px;
  border-width: 0px 0px 1px;
  border-color: grey;
  border-style: solid;
}
#nav .current {
  background: gray; /* 基調色 */
  border-color: gray; /* ボーダー両端の色(左右にはみ出す部分の色) */
  border-style:solid; /* ボーダー両端のスタイル */
  border-width: 0pt 1px; /* ボーダー両端の幅(左右にはみ出す大きさ) */
  margin:0pt 0pt 3px; /* リスト区切り線との間隔 */
  display: block; /* インライン要素のa要素をブロック要素に */
  color: white;
}
#nav .current b {
  top: -1px; /* 基準ボックスから上に1pxはみ出させる */
  border-color: gray; /* ボーダー上端の色(上にはみ出す部分の色) */
  border-style: solid; /* ボーダー上端のスタイル */
  border-width: 1px 0pt 0pt; /* ボーダー上端の幅(上にはみ出す大きさ) */
}
#nav .current b b {
  top: 2px; /* 基準ボックスから下に2pxはみ出させる(自身の1px分+上記の1px分) */
  border-color: gray; /* ボーダー下端の色(下にはみ出す部分の色) */
  border-style: solid; /* ボーダー下端のスタイル */
  border-width: 0 0 1px; /* ボーダー下端の幅(下にはみ出す大きさ) */
}
#nav .current b b b {
  top: -1px; /* 内包する要素をボックスをずらしている分だけ補正をかける */
  border: 0; /* ボーダーを表示させない */
}


「Web標準で文書構造が!」とか「tableでレイアウトなんて!」とか言っている割には、divが大好きなんです。みんな。

でも、「B、気持ち悪い!」とか言われそう