SUNSWEBLOG

少し前に、この現象に気づいたのですが、運営しているサイト内にて、アンカーリンクが意図した位置を表示していない現象がありました。(IEのみ)ローカル上では正しい位置（意図したポイント）へ移動していた為、このような不具合があることに気づくのが遅くなってしまいました。

※　本投稿記事には訂正文章が追記されています。

自身で運営するサイトと言う事もありますが、何故だかこのサイトのみの現象だった為、検証して解決する時間もなく今日まで放置していましたが、ふと何気に気になり情報収集した後にようやく解決に至りました。

現象は違いましたが、どちらかのサイトでCSSファイルへのリンクをJavaScriptで書き出したところ、問題が解決したというのがヒントになりました。

たぶん今回は特殊な？例なので同じ現象に悩まされている方はまずいないと思いますが、自身のためにメモしておきます。

【追記】9月7日
どうやらXPにIE7を入れてから自身の特定のマシーンだけがこの現象となっていたようですので、記事としては全く参考にはなりませんのでご容赦ください。記事の削除も考えましたが、現象としては事実なので訂正記事として残しておきます。どうもIE７の動作が安定しなくて困っています。（サードパーティ製ツールバーも影響して強制終了しまくり）普段はFFかsafar中心iなので検証用でしか使っていませんが・・・。

現象

「FAQページ」のディレクトリーにて「質問のリストページ」と「アンサーページ」が存在し、該当の質問と答え（アンサー）をアンカーリンクにて結んでいる部分が意図している位置に正しく飛ばない。.

アンカーリンクの不具合における主な要因

例：1　リンク自体が反応しない
これは単純なケースですがタグの記載ミスが考えられます。aタグの記載を確認。
又、最近では、お手軽に導入できる為、様々なサイトでAjaxのライブラリーが頻繁に利用されていますが、リンク自体が反応しない場合は、これが影響して不具合がでる場合などもあるので、疑わしい場合は、問題解決のために切り分けて動作確認を行ってみる。（スクリプト自体が影響している場合やid名が重複している等）

例：2　反応するがリンク先のページトップに飛んでしまう
アンカー先が設置されていないかアンカー名が間違っている事が考えられます。

例：3　意図したアンカー先に飛ばない
リンクのURLとアンカー名が正しく設定されていない（合っていない）事が考えられます。
リンクするURLとアンカー名が合っているかを確認。
よくある間違いとしてはアンカー名に対して「＃」がついていたり（＃が必要なのはリンク側のURL）その他、余計な記載がある場合、又は、アンカー名が重複している等が考えられます。

例：4　アンカー名の記載に問題がある
アンカー名をつける際は、原則として半角英数字を使用し、idに対してはアンカー名の始まりはアルファベットからとされています。といっても、おおよその場合「数字のみ」や「日本語」を使用しても動作する場合がほとんどですが、あまり好ましくはありません。又、ブラウザによっては正しく動作しない可能性も考えられますので仕様に沿った記載方法がよいかと思います。

記載する基本タグ

アンカー先へリンクするURL

（例）　<a href="linkpage#anc1">anc1へ</a>

該当のアンカー先

（例）　<a name="anc1" id="anc1">アンカー先</a>
（例）　<p id="anc1">アンカー先</p>

今回の検証結果

今回の現象に関して、上記に記載する要因等は見当たりませんでした。
普段自身が制作している他のサイトでは起こらない現象だったので、該当のサイトが特殊な事をしていないかを探り、結果としてCSSファイルへのリンク方法が原因であることがわかりました。自身のマシーン（XP+IE7）が動作不安定なのが原因だと言う事がわかりました。（ホントか？）

正直な所、なぜそうなるのか等の原因追求までは出来ていませんが、CSSを無効にした際は、アンカーリンクが正しい（意図した）ヵ所へ飛ぶ現象を確認した為、記載方法を変更した所、問題が解決しました。※XPにIE7を入れた自分の特定のマシーンだけが不安定な為に起こった現象のようです。所有する他のマシーン（Win+XP+IE7）では、この現象を再現する事はできませんでした。（ただし、この特定のマシーンによって実際に他のサイトではこの現象が起こらなかった事、又、CSSの読み込み方を変更した事で解決した事は事実です。）したがって下記の方法で表題の現象が解決する事はないとおもわれます。たぶん・・・・。

問題となった部分

<style type="text/css" media="all">@import "css/imported.css";</style>

CSSファイルへのリンクに「@import」を使用していたこと。これが原因でした。

wordpressのデフォルトテンプレート等で使われていますが、今ではこの記載方法を使用される方は少ないようです。（自身も該当サイトとwordpressでしか使用したことはありませんでした。）

丁度該当サイトを制作している当時に、クロスブラウザの問題を解決するベストな方法だと確信していた方法だった？為、年月が経った今も、この記載方法がそのまま使われていたのが原因だったようです。（たしか？JeffreyZeldmanが今のWordpress仕様に変更する前からこの記載を使っていたような・・・）

よく使われるCSSファイルへのリンク方法で

<link rel="stylesheet" type="text/css" href="css/import.css" media="all" />

のような記載方法に直した事で問題が解決しました。

最初アンカー名の記載方法にアンダーバーを使用している為、その辺を疑ったのですが、全く違う原因でした。（アンダーバー・ハイフン・半角英数字での記載なら特に問題は無いようです。）

今回のような「@import」にるリンクは、記載方法によって「ネスケ」の古いバージョンではフリーズするとかクラッシュするとか（検証したことは無いですが）と言うことなのであまり好ましくないようです。

「@import」にるリンクによってなぜこのような現象が起こるのか、又、実際に何が影響しているか等の根本的な原因まではわかりませんが、不具合はとりあえず解決という事で。

前リニューアルから３年も経過しているので、そろそろ更新しないと・・・・・

Tags: memo //