「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

順番に見ていきましょう。
まずは予備知識として

・Webページ
・Webサイト（ホームページ）
・リンク（ハイパーリンク）

について簡単に説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

Webページは「インターネットの世界で見られる文書ファイル」です。
ホームページを見るときに使うソフト（Webブラウザ）で見られます。
インターネットの世界に転がっているファイルです。



Webサイトは「Webページが集まったもの」です。
「ホームページ」とも呼ばれます。



WebページとWebサイトの関係は、本を想像するとイメージしやすいと思います。
本のページ1ページがWebページです。



本のページが集まったもの、1冊の本に相当するのがWebサイトです。



リンク（ハイパーリンク）は「ポチっと押すと別のところに移動する仕組み」です。
みなさんもホームページを見るときにポチポチ押しているはずです。



以上を踏まえて

リンク先が、同じページ内の別の場所になっているリンク

が「ページ内リンク」です。



先程、ホームページを1冊の本に例えました。



同じ本の同じページの別の行に対して張られているリンクがページ内リンクです。



ページ内リンクは

１．飛びたい場所に目印を付ける
２．リンクで目印を指定する

ことで設置できます。

例えば、そうですね。

ここにピヨ太君がいます。



この文章が、みなさんの目には

ここにピヨ太君がいます。

と見えているはずです。

ですが、実際には

ここに<span id="piyota" name="piyota">ピヨ太君</span>がいます。

と書かれています。
「<span id="piyota" name="piyota">」と「</span>」は人間様には見えなくなっているのです。

ここで

<span id="piyota" name="piyota">ピヨ太君</span>

の部分に注目してください。
「id」と「name」のところに書いてある「piyota」が、今回指定した飛びたい場所の目印です。

さて、これで飛び先の目印が付きました。

次はリンクを設置します。

……の前に、ある程度行間が空いていた方が移動が分かりやすいので、少し行を空けます。



これくらい空けば大丈夫ですかね。
それではリンクを設置します。

ここを押すと、ピヨ太君のところに移動します。

というリンクを設置しました。

このリンクは、みなさんの目には

ここを押すと、ピヨ太君のところに移動します。

と見えているはずです。

ですが、実際には

<a href="word110202.html#piyota">ここを押すと、ピヨ太君のところに移動します。</a>

と書かれています。
「<a href="word110202.html#piyota">」と「</a>」は人間様には見えなくなっているのです。

ここで

<a href="word110202.html#piyota">

の部分に注目してください。

#piyota

で飛び先の目印を指定しています。
「#」に続けて目印を指定する形です。

このリンクをポチっと押すと（普通は）「word110202.html」ページの「piyota」という目印が付いた場所に移動します。

このような

同じページ内の別の場所に移動するリンク

がページ内リンクです。

なお、環境によってはページ内リンクが機能しない場合があります。
そのときはゴメンなさい。

あと、話を単純化するために「同じページ内の」という言い方をしていますが、実際には別のページも指定できます。

【ページ名】#【目印名】

と飛び先を指定することで【ページ名】という名前のページの【目印名】が付いている場所に移動します。