Endless Dream!-超〜簡単ＨＰ作り １５．ページ内リンク たくさんの項目を見やすくしよう！

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

＜ページ内リンクとは？＞

「９．リンク」のところでページとページをつなぐ方法は教えたけど、１ページの中の中身が多くなってくると、上からスクロールして全部見るのも大変になってくる。 　そんな時は、別のページに分けてリンクを張るのも１つの手だけど、ページの途中にリンクで飛べるようにする方法がある。それがページ内リンク。 　文章で説明するより見てもらったほうが早いので、ここをクリックしてみて。（ちなみに「話の種」の「オリジナルネタ系」というページね。） 　新しいウィンドウでページが出てきたよね。上のほうに、タイトルがリンクされてるでしょ？それをクリックしてみて。そうすると、そのタイトルが一番上に来るはず。これがページ内リンクの仕組み。 　分かったかな？簡単に言うと、普通のリンクはページの一番上に飛ぶけど、このページ内リンクはページの途中に飛ぶものなんだ。

＜ページ内リンクのタグ＞

さきほどのページに戻ってみて。ソースを見ちゃったほうが分かりやすいと思うので、「表示」→「ソース」と順にクリック。 　そうすると、上から２０行目ぐらいのところに、リンクを張る時に使う<a href="〜">タイトル</a>というのがあるはず。そこからサブタイトルの前（５行目ぐらい下のが一番最初）には、<a name="〜">というのがある。 　この２つのタグが、ページ内リンクの時に使うタグ。<a href="〜">から<a name="〜">に飛ぶようになってるんだ。 　普通のリンクとちょっと違うのは、「"」ではさまれたリンク先の部分。ページのリンクの時は "〜.html" になってたでしょ？でもこのページ内リンクの場合は、"#〜" になっている。 　ページ内リンクのタグを使うときに一番大事なのは、"#〜" の部分を同じにすること！そうすれば、正しい箇所に飛ぶことができる。そしてこの "#〜" の部分を変えれば、いろいろな場所に飛べるようにできる。

＜ポイント＞

さっきの僕のページのように、上のほうにタイトルの一覧を作り、そのタイトルの１つ１つを<a href="#〜">と</a>で囲み、そこからページの該当箇所の最初に<a name="#〜">のタグを書いて、飛べるようにすると見やすいよ。 　タイトルは５０音順で、ページの中身は新しいもの順にする、とか工夫するといいね。また、見終わった後にまた一番上に戻れるように、<a href="〜">「上の戻る」</a>（〜はページのアドレスにする）とかのリンクのタグを加えるともっと見やすいと思う。ちなみにここ（「上に戻る」）をクリックしてみて。上に戻ったでしょ？（ブラウザーの戻るボタンで上に戻れるから、僕はあんまりやってないけどね。） 　また同じタグを使って、まったく別のページの途中にリンクすることもできる。別のページのある部分を参照して欲しいときなどに使うんだ。例えばここをクリックして！「９．リンク」のトップページに飛べたでしょ？じゃあ次に、ここをクリックしてみて！！今度は「９．リンク」の一番上じゃなくて、＜リンクのタグ！＞のところに飛べたよね。こういう風にも使えるんだ。 　同じページの時は<a href="〜">の〜を "#〜" と書けばよかったけど、別ページの途中に飛ばしたい時は "〜.html#〜" と書けばいい。（最初の〜の部分にはリンクしたいページのアドレスを、２番目の〜の部分にはその該当箇所の名前を書く。もちろんその該当箇所に<a name="#〜">を作るんだよ。） 　それとこれは僕の個人的な好みなんだけど、ページの途中に飛ぶときに、タイトルが一番上だと見づらい。だから僕は<br><a name="#〜">って書いてる。これだと一番上が<br>のおかげで１行空くんだ。 　このタグはいろいろな時に使えるので、覚えておくとぐんと見やすくなるよ。最初は戸惑うかもしれないけど、慣れてくれば簡単だからいろいろ使ってみてね！