今回は、FrankuLで活動していく中でぶつかった問題点とその解決策をご紹介したいと思います！
名付けて『ID重複問題』
いまや、Webサイトの制作でレスポンシブ対応は必須ですよね。
そのなかで、ハンバーガーメニューを利用することも多くあると思います。
今回は、ハンバーガーメニューを使用したときにクリックしても目的のメニューに飛ばなかった時にどうやって解決したのか。をシェアしたいと思います！
ハンバーガーメニューが飛ばない
ハンバーガーメニューを作成し、よし！形になったと一安心。
も束の間、代表の川角から「PCでは問題ないけど、SPでハンバーガーメニューだと〇〇には飛ぶけど△△には飛ばないですよ。原因わかります？」の声。
今回のWebサイトの制作では、以前作成したサイトをベースに別のサイトを作成していくという形でスタートしました。
前回はハンバーガーメニューを使用しなかったので、ハンバーガーメニューは今回新たに追加しました。
どこに、ミスがあるのか…ハンバーガーメニューの作り方？
でも、飛ぶところと飛ばないところがある。どうしてか？？？？
これでもかというくらい調べました。
「ハンバーガーメニュー 効かない」「ハンバーガーメニュー 飛ばない」「ハンバーガーメニュー 動かない」「ハンバーガーメニュー 同一ページ遷移しない」
などなど思いつく限りネットで検索。
しかし、どこにも求めている答えはありません。
どれをみても、記述ミスという文字が浮かび上がります。
どこを記述ミスしているのか、ひたすらコードをみますが記述ミスの場所がわかりませんでした。
飛ばない原因？？パソコン用とスマートフォン用のソースを利用
以前のサイトを作成する際、細かい部分でレスポンシブ がうまくいかずに、パソコン用のソースとスマートフォン用のソースに分けて作成していました。
↓こんな感じに。
<!-- for PC -->
<div class="pc-container">
<div id="top-main">
<h2 class="main-text page-title">
必見！<br>
美味しいランチ特集
</h2>
</div>
</div>
<!-- for SP -->
<div class="sp-container">
<div id="top-main">
<h2 class="main-text page-title">
必見！<br>
美味しいランチ特集
</h2>
</div>
</div>そして、レスポンシブ で pc-container や sp-container を見え隠れさせていました。
ハンバーガーメニューが飛ばない理由・・・HTMLのお作法＝IDは“ひとつ”だけ
サイトを作成するにあたって、最初に作成したソースをそのままコピペしてPC用のソースコードとSP用のソースコードにしていました。
そうです！コピーしてしまったので、各ブロックに同じIDをつけてしまっています(^◇^;)
このとき、HTMLのお作法にある、CLASSは重複OK。
IDは重複させない！というものをすっかり忘れていました(>_<)
IDが被ってしまったため同ページ内で遷移させたいものだけがハンバーガーメニューで飛ばない、他ページへ遷移するものは普通に飛ぶという現象が起きていました。
IDはソースコードの上から順に見ていき、最初に見つけたものに反応します。
ソースを書く際に、上に <pc-container>、下に<sp-container>がありました。
レスポンシブ で display: none; を設定していても、隠しているだけでソースコード上は存在しているので、ID重複になってしまいます。
PC版のメニューでは設定したIDの箇所に遷移するけど、SP版のハンバーガーメニューからはIDがPC版と重複し、内部エラーになってしまい、offsetトップからの位置を取得できずに、 0 return になって、目的の場所に飛ばないという現象が起きました。
もうひとつのIDでハンバーガーメニュー無事解決！
問題点は見つかったものの、すでにサイトは完成に近づいています。
ここで別のID名に変更したらCSSとの繋がりで、CSSにも大きな改修作業が必要になってしまいます。
そこで、解決策としてハンバーガーメニューから遷移させる場所に、空のリンクでもうひとつのIDを設定しました。
<!-- for PC -->
<div class="pc-container">
<a id="top-main">
<h2 class="main-text page-title">
必見！<br>
美味しいランチ特集
</h2>
</a>
</div>
<!-- for SP -->
<div class="sp-container">
<a id="top-main-sp"> ←コレ
<div id="top-main">
<h2 class="main-text page-title">
必見！<br>
美味しいランチ特集
</h2>
</div>
</a>
</div>もうひとつのIDを設定してハンバーガーメニューで飛ばす部分を新たに付け加えたIDに設定することで、同ページ内でも遷移させたい場所へ飛んでくれるようになりました！
別のIDをつけたことで、CSSの改修も必要ありませんでした！
【おまけ】 問題点の見つけ方
『ID重複問題』が発覚するまで、何が問題なのかを見つけるために結構な時間を費やしました。
その中で問題点に到達するまでに問題の切り離しを行いました。
- ハンバーガーメニューに問題があるかどうか？
- 他サイトで使用して、問題なく動いているハンバーガーメニューを一度当てはめてみる。
- ↑このハンバーガーメニューで問題なく動けばハンバーガーメニューに問題がある。
もし、動かなければハンバーガーメニューには問題はない。 - 動かなかったので、ハンバーガメニュー以外の部分に問題がある。
- IDに問題があると判明！
まずは、当てずっぽうに調べたりいじったりするのではなく、「ここは大丈夫。」「ここは問題がある。」など、わかる範囲で絞っていきます。
そして、最終的に問題はこの辺りと目星をつけてみていきます。
そうすることで、問題点に費やす時間を最小限にすることができます。
まとめ
HTMLやCSSなど、お作法が決まっていることがあります。
学習し始めた頃に聞いたお作法。
Webサイトを作るのに夢中になってしまい、お作法がすっかり抜けてしまっていました。
前回作成したサイトでは、ハンバーガーメニューにしていなかったこともあり、発覚しなかった部分でした。
今回、ベースから変えていくという方法をとったために気づけたことでもあります。
そしてこの記述ミス、お作法ミスに気づいてくれたのも、問題点を見つけてくれたのも、解決策を見出してくれたのも、全て代表の川角です。
私ひとりでは、気づけなかったなぁと思いました。
本当に、チームで活動していく大切さ有難さを実感しました！