あるクライアントのサイトのリニューアル案件。スマートフォンでのアクセスが増えて来たので、スマートフォンでもある程度見やすくするように、と。
元々、メニューボタンが小さめのサイトだった。
それで最初、メニューボタンを大きくするだけで、あとはスマホで拡大しながら見ればいいだろうと思っていたけれど、それもどうかなと思って。やっぱりスマホでは文字がある程度大きくないと見づらいだろうと。で、色々悩んだ末、ちゃんと作り直すことに。
元はテーブルレイアウト。９年前に作った。その時に使ったページ内リンクは、
<A href=”hoge”>hogeへ</A>
と、
<A name=”hoge” id=”hoge”></A>
の組み合わせで、「hogeへ」をクリックするとアンカーポイントに飛ぶ、というものだった。
それが、TABLEレイアウトをやめてCSSでレイアウトするようにした途端、あるリンクは有効（ちゃんと飛ぶ）で、あるリンクは無効（飛ばない）という現象が発生。
で、Googleで「ie ページ内リンク 飛ばない」で検索して調べて見ると、アンカーポイントの直前に<br>タグを記述すると飛ぶようになるらしい・・・という訳で、そうしてみた（<a name=”hoge” id=”hoge”></a>の前に<br />を記述）。
ところが、それでも問題が解決しなかった。あるリンクは正常に機能し、あるリンクは機能しない（飛ばない）。
で、凄く困ったのだけれど、ふと、<A name=”hoge” id=”hoge”></A>を止めてみたらどうなるか試してみた。CSSレイアウトなので<div classs=”xxx”>が沢山あった訳だが、その<div classs=”xxx”>にidを書き足して、<div classs=”xxx” id=”hoge”>と記述して、<A name=”hoge” id=”hoge”></A>は削除してみた。
すると、ページ内リンクが正常に機能するようになった。
IE9で確認。
折角TABLEレイアウトを卒業するのだから、アンカーポイントを使うのではなく、<div>タグにidを記述するようにすればいいらしい、という結論に達した。
今日はこれで数時間苦しんだ。
今日、折角指圧に行ったのに、また酷い肩こりになってしまった。