のっちメソッド: One pixel notched corners

2009 年 6 月に 改良版 を書きました。

Ask the CSS Guy の記事 One pixel notched corners as used by Google Analytics を試してみた。Google Analytics で使われてるような、四隅が 1px 欠けているボックスの表現を画像を用いず CSS のみでやってみよう、という話。上記記事に対する Simon さんて方のコメント で「もっと簡単にできんじゃね?」という例があるけど、なんだか不思議なマークアップだったので、僕なりに整理してみる。

まず、例としてナビゲーションメニューのようなものを考えてみる。マークアップはこんな感じ:

<!-- HTML -->
<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Google Analytics の場合、この a 要素の中身をなんと3重の b 要素でくるむという乱暴なマークアップらしいんだけど、ここでは上記ソースにはこれ以上手をいれない。

で、CSS。まず li 要素に 1px の上下ボーダーと 1px の左右マージンを持たせる:

/* CSS */
li {
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  margin: 0.5em 1px;
}

次に、子要素である a 要素をブロック化し 1px の左右ボーダーを持たせ、かつ左右のマージンを -1px にし、li 要素からはみ出させる:

/* CSS */
li a {
  display: block;
  border-right: 1px solid #999999;
  border-left: 1px solid #999999;
  margin: 0 -1px;
}

以上。完成版デモ をご参照されたし。色使いなんかを工夫すれば、かなり実用的なテクニックじゃないかと思う。命名、「のっちメソッド」。