— fixture.jp

Appleサイトに見るグローバルメニューの画像置換手法

ここ2年ぐらいで、Appleのサイトは積極的にCSSとかAJAXとか新しい技術を採り入れ始めていて、最近はCSS関連のイベントで「AppleサイトのCSSを解析する」みたいなスピーチをされた方もいるらしく、サイトの存在自体がおもしろくなってきたと思う。特に個人的にスゴイと思うのは、全体一発リニューアル！とかやらずに「少しづつ、かつ抜け目なく」新しい技術をサイトに注入して、まるで生物が進化するかのようなアップデートをしているところ。一発リニューアル！が難しい大企業系サイトとして、ここまで柔軟かつデザインドリブンな運営方法は学ぶべきところが大きいと思う。

とはいってもAppleではiPhone登場時、アップルジャパンでは新iMac登場時に、10年近く使い続けたタブデザインを新しくし、珍しく全ページに渡る更新を敢行。早速Firebugなんかで構造をチェックしていると、グローバルメニューの画像置換に、あまり見ないCSS指定を使っているのを発見。

基本的には、li要素の中にa要素、liをdisplay:inline; にして横並びにする方法なんだけど、内部のa要素に

#globalheader #globalnav li a {
    float: left;
    width: 117px;
    height: 0;
    padding-top: 38px;
    overflow: hidden;
}

みたいな指定をしてる。

まあ見てしまえば簡単だけど、なぜ今まで思いつかなかったんだろうと自戒。この手法は結構一般的なのかな？「height:0;」を思いつくかどうかが肝なんだな、きっと。。。

text-indentに大きなマイナス値を入れる方法だと、firefoxなどでクリック時にその大きさの点線が出現する（本当はa要素にoutline属性を使うか、onfocus=”this.blur();” と書けば消えるんだけど、横に2000pxとかずれてるのを想像するとなんか気持ち悪い）し、span要素などを入れ子にしてdisplay:none;する方法だとHTMLに視覚要素を一つ増やしてしまう。ということで、Apple様大変勉強になりました。