The Trap of Web Design

今日ちょいと修正作業で、ページの上んとこに画像で「TOP」ってサイトホームに戻るリンクボタンつけるというのをやったんす。で、まぁ昔のテーブルレイアウトで画像切り出してはめ込むなんてことは最初からやっていない（自分の担当でないサイトのメインの各ページはそういう仕様になっている）ので、PHP で作ってて共通ファイルにしてインクルードしているフッターに、a 要素を内容カラで書いて、display: block; position: absolute; ってかましたのです。内容がカラであろうと、あと幅や高さ指定すれば、そのリンクはちゃんとリンクするブロックとして生成されます。内容がカラなんで、なにやら怪しげな方法使って内容を隠す処理自体がいらないいわゆる「隠しリンク」になるのです。

---

そのワザは自分がレイアウトデザインするときはあんまり使いませんが、他の方がデザインして、構造的にうまいことハマるものが無いような場合、はたまた普通だったら areamap 使うような時に使います。HTML 上で ul リストにして li や a を position: absolute; にするっていうのもやりますが、今回は自分がデザイン考えてる状況だったらイラネーんじゃないの？というたいした必要性を感じないモノだったので、例えばスタイルシートをきっちゃった場合には「なくなってしまっても良い」ので、こういうワザを使うのです。

ところがですね、ディレクティングしてるウチのボスがいるんですけど、その会社のチェックマシンの IE7 で見たら「リンクボタンの画像見えてるけどおせねーよ」って知らせてくれました。自分はチョチョイって作って、Safari と IE6 それに Firefox なんかでは position: aboslute; 使ったときに状況によって位置ズレを起こすことがあるのでそういう意味でチェックしてたんですけど問題なかったからそのまま公開してたんですよ。なんで、それキッカケで IE7 チェック（Parallels Desktops の XP に IE6 と IE7 を共存させてます）したら、確かにリンクボタンがいにゃい。ボタンの画像自体は、今回の a 要素となんにも関係ない場所の背景画像にかいてあるものだから「ボタンはあるけどマウスをかざそうとなにもおこらない。試しにクリックしてもなにもおきない」という状態になってました。

こういうことあると以前は「また IE かよぅ！んもう！」と苛つくことがよくあったわけですが、最近問題回避策がだいたい出揃ってしまって「ハイハイ」ってニヤケながら修正をできるようになってます。で、タマに結構いうこと効かない状況はあって、だいたいそれが今は IE7 なんですね。本当にもう、デキの悪いモノしか作れない某にはすでに飽きれている訳ですが。

さてそれで今回上記対応は、実は結構ハマりました。こういう作り方自体あまりやってる方はいないかもしれませんが、おそらく暫くしたらスタイルシートのなんらかのテクニックとかで日の目を浴びて、でもってその IE7 対策とかもすぐその後に出るんでしょう。なので最近はあんまりここでも書かなくなったりしてたわけで。

• ウンともスンとも云わない状態の IE7 で、一体記述された要素がドコにいっちゃったのか、それをまず調べるために、該当要素に background 指定をしました。そしたら、ちゃんと他と同じ位置にいるし、ついでにリンクも効きます。で、background 記述を消すと、透明になるのではなく、ブロックそのものがやっぱりいなくなります。
• だったら、background: transparent とすると、反映してくれないかな、と思ったらやっぱりいなくなります。
• そういや IE6 だったか、ボーダーを出してみたら内容カラの要素をブロックとして扱ってくれる、なんてのがなかったけ？と思って試しにボーダー指定してみたら、そのボーダー自体はリンク要素としてマウスオーバーしたり、リンクできたりします。ちょっと待て、ボーダーだけってあんた（笑）
• 基本的にいわゆる「隠しボタン」であって「透明」が必須なので、背景色やボーダーが使えてもそれでは済まないのですが、状況は確認した、と。
• 面倒臭いけど、a っていうインライン要素を display: block; にするのが気に入らないのか、ということで、a 要素を p 要素でかこって、それを絶対配置にしてみたけど、てんでダメ。
• IE6 では必要なことがあるから、a をカラ要素ではなく、コメントアウトした情報をいれてみたり「.」をいれてみたり「 」なんていれてみたりして、ついでに文字に対する高さを教えるために（ちゃんと要素に height 指定はしてるんだけどね）line-height いれたり、display: block; を位置指定より後にしてみたり、z-index いれたり、min-height いれたり。。。。てんでダメ！
• これが効いたらすげーハックだなぁ、とか考えながら content プロパティなんぞも使ってみたけど、なんもおこらん（他のブラウザも）
• そこで最初に立ち返って background でなんか考えたらどうにかならんか、ってことで。。。

最終的にタイトルにあるように、clear.gif 作ってね、background-image にしたら出た！

ちなみにその画像、指定した先の画像がなくてもでます。つまり「background」って指定がされていて、transparent で無い場合だとブロック指定をブロックとして「面を持つ要素」として判断しますが、それ以外はなくなっちゃいます。ただし、background: transparent url(./clear.gif) でも出る。

あぁ疲れた。こういう手法は正攻法ではないかもしれないので一概にバグだぞぉ、とはいいませんけど、でも、display: block 指定して高さと幅を与えたら、そのカタチが出てきてほしいわけです。「中身がなければナニモナイものとみなす」っていうのは正しい動作のような気もしないわけではないけれど、昨今の Ajax 利用時にはカラブロック用意して、スクリプトでそこに内容をあとから突っ込む、なんてことはよくあるハナシで、内容が無いときに背景色指定をいれないと要素そのものがなくなるなんて、そんなのなんかおかしくないですかね。位置固定で幅と高さを先に準備しておいたほうが、描画上も狙った位置にハメこまれるって感じになるし。

まぁ、直せたのでいいことにします。