きれいなHTMLの正体は謎の背景画像だった件

Webデザイン

商業サイトを見てWebデザインのおべんきょー！

THE IDOLM@STER２ | バンダイナムコゲームス公式サイト

http://www.bandainamcogames.co.jp/cs/list/idolmaster/im2/ranking/index.html

と思ったら予想以上に手強い相手だった。ある意味。

まずこのページに思ったこと

  • HTMLがシンプル（デザイン要素が少ない）
    余計なものがないのでSEO的にもいいでしょうし、なによりコードが短くなって見やすい。
  • CSSを無効にしてもちゃんと見えて、装飾が消えてくれる
    もともと情報量の少ないページではありますが、装飾を取っ払っても体裁が崩れず、きちんと必要な情報にアクセスできるのはいいなと思いました。
  • 悪名高いIE6（Quirksモード）でも崩れない
    いや完全に崩れないわけではないけど。コンテンツはきちんと表示されているので十分。

CSSなしだとサムネイルが消える！？

これが今日の本題。通常サムネイルを表示してLightboxを使う場合こんなHTMLを書きます。

<a href="hoge.jpg" rel="lightbox">
  <img src="hoge_thumb.jpg" width="120" height="90">
</a>

当然この場合CSSを使わなくてもサムネイルは表示されます。ところがこのページは表示されずに、文字リンクになってます。
このページのソースを抜粋するとこんな感じ。

<a href="../image/ranking/img_rnk01_01.jpg" title="ランキングに登録" class="imgRnk01" rel="lightbox[rnk]">画像1</a>

これならCSSなしだとテキストリンクですね。

じゃあサムネイルはどうやって表示してるの

  • aタグの背景

最初に思ったのは、aタグをブロック要素化して背景画像にサムネイルを指定する方法。例えばこんな感じ。

<a href="hoge.jpg" style="display:block; width:120px; height:90px; background-image:url(hoge_thumb.jpg)">画像</a>

でもそれらしき記述が見つからない。というかIEの開発者ツールで見てもaタグにbackgoundなんか指定されてない。

だったらlightbox改造してサムネを自動生成ないし自動表示してるんじゃないか。と思ったものの、imgタグ生成したりCSS設定してたら開発者ツールで見えるわけで。
謎だ・・・

秘密兵器 Firebug

こうなったらFirebugの接続タブでリソース列挙してやる！と意気込んだ結果がこちら。

ちょっと待て、なんだそのスクリーンショットみたいな画像ファイル。
直リン貼っていいのかわからないので気になる方はCSS覗くなりFirebug使うなりしてみてください。
要するに、テキストがサムネイルもろとも画像になってた。

まとめ

このページのコンテンツ部分はこんなHTMLになっていました。

<div id="box-rnk01">
  <p class="hidden">〜テキスト〜</p>
  <a href="../image/ranking/img_rnk01_01.jpg" title="ランキングに登録" class="imgRnk01" rel="lightbox[rnk]">画像1</a>
  ...
</div>

ここでサムネイルはaタグに関連づけられて独立している、と思い込んでいたのですが、実際はこう。

<div style="background-image:url(../image/ranking/img_rnk01.jpg); position:relative">
  <p style="width:0; height:0">〜テキスト〜</p>
  <a style="display:block; position:absolute; top:138px; left:71px; width:400px; height:225px">画像1</a>
  ...
</div>

サムネイルも含めた背景画像の上に、透明なリンク（ブロック化済み）がpx単位で固定されていたわけです。
これならimgタグいらないしサムネイルのレイアウトも固定できるし、なるほどねえ。。。
プロの本気というかなんというか・・・すごかった。