HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

  • HTMLタグボードのトップへ戻る
  • ゼロから始めるホームページ作成講座
  • 訪問者優位のWEBデザインTips
  • インターネットで小遣い稼ぎ
  • 今すぐ使える!便利ツール(HTMLタグ辞典など)

バックページトップ (BPTリンク)

バックページトップとは

ページを作成する際、見やすさを重視して横にスクロールをしないように横の幅を調整すると、どうしても縦長の画面になってしまいます。このような縦に長い画面で構成されるページの本文を読んでいく場合、本文の一番下までスクロールした後、再度画面の最初のメニューが見える位置までスクロールをしながら戻るのは大変です。

一発で画面の最初に戻れるようにするには

そこで一発で画面の最初に戻れるように考えられたのが、このBPT(バックページトップ)リンクです。これを実現するのは意外と簡単です。リンクのターゲット指定を用いて、画面の最初にリンクラベルを書き、本文の最後に「最初の画面に戻る」というようなリンクを付け足せば良いのです。

記入例

画面の最初に戻るには、ページの最初にラベルを付ける必要があります。また、総合メニューが最上位にある場合には、メニュー付近にラベルを追加しても良いでしょう。以下の2つの操作が必要です。

1. ラベル付け

<a name="top"><img src="spacer.gif" width="0" height="0" border="0" alt=""><br></a>

具体的な挿入場所は、<body>タグの直下、もしくはメニュー付近が良いでしょう。リンクタグの間は必ず何か書かなければならないので(<a name="top"></a>はダメ)、上の例では、透明な画像(スペーサーGIF)で代用しています。

2. ターゲットでページ内リンク

<a href="#top">画面の最初に戻る</a>

途中途中で

本文の最後だけにこのBPTリンクを入れても、本文途中で最初の画面に戻りたい場合には対応できないので、本文の途中、段落や大きな項目毎に入れておくのも良いかもしれません。

☆ココがポイント!

訪問者へのちょっとした気配りが、サイト全体の使いやすさをぐっと向上させます。バックページトップは特に難しい機能ではないので、出来る限りページにつけるようにしましょう。

こんな時どうする?

リンクの指定方法は?

リンクの挿入