HTMLでページ内リンクがずれる原因を解消する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでページ内リンクがずれる原因を解消する方法について解説しています。ページ内リンクは同じページ内で指定の位置にジャンプさせることです。ずれが起こる原因と対処法、レスポンシブデザインの場合の注意点について覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLでページ内リンクがずれる原因を解消する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ページ内リンクがずれる原因を解消する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ページ内リンクとは

ページ内リンクとは、webサイトの同一ページ内で画面表示を移動させるリンクのことを指します。

ボタンなどの表記を押した際に同じページ内でジャンプをし、閲覧箇所を変えることも可能です。

このリンクはボタンやバナー、タイトル行などに紐づけられており、ジャンプ先へのコーディングのことをアンカーと呼びます。

このアンカーを目印に閲覧箇所へジャンプできるようになります。

以前は空のa要素にname属性で名前をつけることでアンカーとしていたものの、HTML5以降はid属性を使用することで、アンカーとしてジャンプ先を指定できるようになりました。

 

活用場面とずれる例

アンカーをつけることで適宜に閲覧箇所へジャンプをすることが可能です。

ユーザーは閲覧したい箇所へすぐに移動させることができるものの、ジャンプ先がずれてしまうケースもあります。

こうなる原因はヘッダー位置を固定しているため、要素の回り込みが起こっているためです。

ヘッダー位置を上部に固定してあるwebサイトでは、z-indexプロパティを使いヘッダーを一番手前の表示にしています。

また、固定するためにpositionプロパティで値をfixedとした場合、ページ内リンクを押したことによる閲覧表示はヘッダーで上部が隠れてしまうことになるでしょう。

 

回避をするためにはヘッダーを固定表示しないようにするか、ヘッダーの高さ分だけ下方向に移動するように表示をするかを選択します。

ヘッダーの高さ分だけ下に表示する場合にはヘッダーのheightとmarginを足した数値を確認し、その分だけジャンプ先の要素をmargin-topで高さをあけるように表示をするクラスを作成することが必要です。

ページ内リンクを複数設置する場合には、margin-topを記述したクラスを毎回使用することでジャンプ先のページがずれたような表示を避けることが可能です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

レスポンシブデザインに注意

注意が必要なのは、レスポンシブデザインで作成しているサイトの場合です。

それぞれのデバイスごとにヘッダーの高さを変えていることもあり、タブレットではヘッダーがあるがスマホ表示ではヘッダー自体がない場合もあります。

この場合には@madiaでデバイスごとにジャンプ先の要素のmargin-topの高さを指定する必要があります。

パソコン、タブレット端末、スマホ画面の3パターンを表示できるレスポンシブデザインの場合には、前述のmargin-topもそれぞれのデバイスのヘッダーの高さ分の記述をする必要があるといえます。

これらのmarginでの高さの打ち消しはネガティブマージンと呼ばれ、一度classを作成することで汎用性のある使い方が可能となるため、最初に検討することが必要です。

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLでページ内リンクがずれる原因を解消する方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。