全国対応!まずはご相談ください 電話番号0120-55-4682

簡単ホームページ作成ツールならAMS

ホームページのページ内ジャンプするhtmlの書き方

2021/7/20

ホームページのページ内ジャンプするhtmlの書き方

1ページ内の記述が多くて縦に長いので、ページ内にジャンプしてユーザービリティをよくしたいことってありますよね。

そのやりかたと注意したいことについてお伝えします。

ページ内ジャンプするhtmlの書き方

用語集のページを想定して説明します。

用語集ページの先頭には「目次」として用語がリストアップされています。そのリストアップされた用語毎に、ページ内下部にあるその用語の説明文にページ内ジャンプするというものです。

目次の用語リストからページ内ジャンプさせるリンク元での記述は、通常のリンクの書き方でhref属性にid属性を指定します。

例)<a href="#domain">独自ドメインの意味はこちら</a>

その用語の説明が記述してある文章の見出し部分にジャンプさせるリンク先での記述は、id属性を設定します。

例)<h3 id="domain">独自ドメインとは</h3>

※リンク先のタグは以前のHTMLバージョンでは<a>タグのみでしたが、最新のバージョンHTML5では、他にも<h1~>や<p><div>などでも利用できるようになりました。

異なるページ内へのジャンプするには

ジャンプさせるリンク元での記述は、ページURL+id属性を指定します。

例)<a href="terminology.html#domain">独自ドメインとは</a>

以前のhtmlバージョンでの書き方とは異る

htmlというホームページを書くための言語の最新バージョンはHTML5です。

ページ内ジャンプについての書き方が以前のバージョンと異なっていますのでご注意ください。

以前のバージョンのhtmlでは、リンク先に<a>タグでname属性を設定し、リンク元ではそのname属性を指定するという書き方をしていました。

<a href="#domain">独自ドメインの意味はこちら</a>

<a name="domain" >独自ドメインとは</a>

ユーザーを惑わせないように配慮

ページ内ジャンプを設定するときに気をつけておきたいのがユーザーを惑わせないようにするということです。

ユーザーにとってはそのページ内ジャンプ用のリンクが、「ページ内ジャンプ」なのか通常の「別ページへのリンク」なのかはわからないなか、

リンクをクリックしたはずなのに別ページの「トップ」に飛んだつもりだったのに、なぜかどこかのページの「途中」にいると惑わせてしまう可能性もあります。

そのようなことがないように例えば、その用語の説明文の最後に「用語の目次に戻る」アンカーテキストでリンクをはっておくと良いかもしれません。

また別ページの途中にジャンプするようにしたときは、「ページタイトル+ジャンプ先の見出し」といったアンカーテキストにするとリンク先にジャンプする前に自分がどこにいくのか理解したうえで移動できるので不要な混乱をさけれてユーザービリティよいかたちにできると思います。

参考になれば幸いです。

ホームページでお困りならAMSにお任せください。

  • 制作会社の選び方がわからない。
  • どの制作会社も費用が高額で手が付けられない。
  • 今のホームページが簡単に更新できなくて困っている。

などホームページでお困りではありませんか?
弊社AMSでは効果のある高品質なホームページを格安で制作いたします。
まずは料金やプラン内容、制作実績などを下記の画像をクリックして ご覧ください。

copy1696235529_banner_agency.png
キーワードでコンテンツを検索
sidebanner_ams.gif
AMSコンテンツ
AMSニュースアーカイブ
サイトPR.png
sidebanner_manual.gif
sidebanner_contact.gif

会社概要

社名 株式会社AMS
本社 石川県金沢市問屋町2丁目99番地
代表者 代表取締役 若林 雄一郎
会社HP https://amsstudio.jp/
お気軽にご相談ください
0120-55-4682
【受付時間】月〜金9:00〜18:00 ※祝日除く