「ページのトップへ戻る」とは
Ｗｅｂページに訪問して下さったお客様は、Ｗｅｂページのユーザビリティが悪いと、すぐに「×」をしたがります。ユーザビリティを良くする技の一つに、「ページのトップへ戻る」があります。
「ページのトップへ戻る」とは、「トップページ」に戻ることではなく、ページの一番上に戻ることです。このページの下の方にも、「↑ このページのトップ ↑」という所があり、クリックすると、このページの一番上にジャンプすると思います。
なぜ、このようなハイパーリンクを入れるかと言いますと、このＷｅｂページを含む多くのＷｅｂページは、上の方にナビゲータがあります。訪問者が、ページの下の方まで、文書を読んだ後に、次のページが見たい場合は、上まで戻って、ナビゲータを表示させなければ、次のページをクリックして進むことができません。
そのためには、お客様は、マウスのホイールをクルクルと回して、わざわざページの一番上まで戻ってナビゲータを捜す必要があり、手間がかかります。「ユーザビリティ（訪問者が扱いやすいＷｅｂサイト）」でも紹介したように、使い勝手の悪いＷｅｂページになってしまいます。
そこで、「ページのトップへ戻る」の登場です。ページの的確な場所に配置しておけば、お客様がわざわざマウスのホイールをクルクルと回さなくても、ワンクリックでページの最上部が表示されます。
「ページのトップへ戻る」の設置
では、具体的に「ページのトップへ戻る」の設置を行いましょう。
ページ最上部にid属性の設置
まず、ブラウザでＷｅｂページを開いて下さい。そのときに、最上部に表示される領域があると思います。例えば、このＷｅｂページでしたら、ロゴマークやサイト内検索が表示されています。
その領域をdivタグで包括していれば、そのdivタグにid属性を、次の例に示すように入れます。
●divによる領域確保の例
<div id="header">
<div id="top-logo">ロゴ</div>
<div id="top-navi">ナビゲータ</div>
<div id="top-search">サイト内検索</div>
</div>
「ページのトップへ戻る」を入れる
ページの途中や、ページ最下部に「ページのトップへ戻る」を入れます。
aタグを入れる
次の例に示すように、挿入した「ページのトップへ戻る」を、aタグで包括して下さい。このときに、href属性値は、半角で「#header」とします。
●aタグの設置
<a href="#header">ページのトップへ戻る</a>
このhref属性値の「#」は、ページ内のid属性と連動するための命令のようなものです。divタグのid属性値が「header」ですので、aタグのhref属性値は「#header」になります。id属性値は自由に決められますので、ご自由に設定して下さい。
応用で、別ページの中程にジャンプ
この技を応用して、別ページの中程にジャンプすることもできます。次の例に示すように
●別ページの中程にジャンプする例
<a href="com018.html#div-tag">divタグ（18.html、title、divの説明）</a>
●別ページの中程にジャンプする例
クリックして頂いたら判るように、「com018.html」の最上部でなく、途中にジャンプすることが判ります。これは、「com018.html」のソース中のdivタグに、id属性で「div-tag」を設定しているためです。その部分にジャンプします。
これに加えて、aタグに、title属性を加えても良いかもしれません。すると、下に示す表示結果のように、ハイパーリンクにマウスを重ねると、title属性に書かれた内容がバルーン表示されます。
●title属性を加えた例
<a href="com018.html#div-tag" title="divタグ（18.html、title、divの説明）">divタグ（18.html、title、divの説明）</a>
●title属性を加えた例の表示結果
- ← 前のページ 「22.divタグで領域確保」
- 「24.HTMLとXHTMLの違い」 次のページ →