↑簡単にお小遣いがかせげるサイト↑

Endless Dream!-超〜簡単HP作り
15.ページ内リンク
たくさんの項目を見やすくしよう!

 このページではページ内リンクについて書きます。これはあまり頻繁に使うものではないのだけど、ページの中に項目(サブタイトル)が多いときに効果的に使うととっても見やすいページになるので、試してみよう!


<ページ内リンクとは?>

 「9.リンク」のところでページとページをつなぐ方法は教えたけど、1ページの中の中身が多くなってくると、上からスクロールして全部見るのも大変になってくる。

 そんな時は、別のページに分けてリンクを張るのも1つの手だけど、ページの途中にリンクで飛べるようにする方法がある。それがページ内リンク

 文章で説明するより見てもらったほうが早いので、ここをクリックしてみて。(ちなみに「話の種」の「オリジナルネタ系」というページね。)

 新しいウィンドウでページが出てきたよね。上のほうに、タイトルがリンクされてるでしょ?それをクリックしてみて。そうすると、そのタイトルが一番上に来るはず。これがページ内リンクの仕組み。

 分かったかな?簡単に言うと、普通のリンクはページの一番上に飛ぶけど、このページ内リンクはページの途中に飛ぶものなんだ。


<ページ内リンクのタグ>

 さきほどのページに戻ってみて。ソースを見ちゃったほうが分かりやすいと思うので、「表示」→「ソース」と順にクリック。

 そうすると、上から20行目ぐらいのところに、リンクを張る時に使う<a href="〜">タイトル</a>というのがあるはず。そこからサブタイトルの前(5行目ぐらい下のが一番最初)には、<a name="〜">というのがある。

 この2つのタグが、ページ内リンクの時に使うタグ。<a href="〜">から<a name="〜">に飛ぶようになってるんだ。

 普通のリンクとちょっと違うのは、「"」ではさまれたリンク先の部分。ページのリンクの時は "〜.html" になってたでしょ?でもこのページ内リンクの場合は、"#〜" になっている。

 ページ内リンクのタグを使うときに一番大事なのは、"#〜" の部分を同じにすること!そうすれば、正しい箇所に飛ぶことができる。そしてこの "#〜" の部分を変えれば、いろいろな場所に飛べるようにできる。


<ポイント>

 さっきの僕のページのように、上のほうにタイトルの一覧を作り、そのタイトルの1つ1つを<a href="#〜">と</a>で囲み、そこからページの該当箇所の最初に<a name="#〜">のタグを書いて、飛べるようにすると見やすいよ。

 タイトルは50音順で、ページの中身は新しいもの順にする、とか工夫するといいね。また、見終わった後にまた一番上に戻れるように、<a href="〜">「上の戻る」</a>(〜はページのアドレスにする)とかのリンクのタグを加えるともっと見やすいと思う。ちなみにここ(「上に戻る」)をクリックしてみて。上に戻ったでしょ?(ブラウザーの戻るボタンで上に戻れるから、僕はあんまりやってないけどね。)

 また同じタグを使って、まったく別のページの途中にリンクすることもできる。別のページのある部分を参照して欲しいときなどに使うんだ。例えばここをクリックして!「9.リンク」のトップページに飛べたでしょ?じゃあ次に、ここをクリックしてみて!!今度は「9.リンク」の一番上じゃなくて、<リンクのタグ!>のところに飛べたよね。こういう風にも使えるんだ。

 同じページの時は<a href="〜">の〜を "#〜" と書けばよかったけど、別ページの途中に飛ばしたい時は "〜.html#〜" と書けばいい。(最初の〜の部分にはリンクしたいページのアドレスを、2番目の〜の部分にはその該当箇所の名前を書く。もちろんその該当箇所に<a name="#〜">を作るんだよ。)

 それとこれは僕の個人的な好みなんだけど、ページの途中に飛ぶときに、タイトルが一番上だと見づらい。だから僕は<br><a name="#〜">って書いてる。これだと一番上が<br>のおかげで1行空くんだ。

 このタグはいろいろな時に使えるので、覚えておくとぐんと見やすくなるよ。最初は戸惑うかもしれないけど、慣れてくれば簡単だからいろいろ使ってみてね!