ページの途中にリンクする

HTMLのチップス、同じページの別の場所にリンクする方法です。

まず、行きたい（飛びたい）場所のタグに印をつけます。たとえば、このページの一番下のタグはこうなっています。

id=”footer”が目印です。

id=”名前”の名前は別にfooterじゃなくても何でもいいのですが、そのページの中で唯一無二の名前である必要があります。これは良く考えれば当然で、そうでなければリンクして飛ばすことができません。

タクシーに乗って「山田さんちまで」とか言っても大抵はもっと詳しく説明しないと行ってくれないと思います。山田さんちはたくさんありますから。これが「東京駅まで」とか「大阪城まで」だったらタクシーもすぐに向かってくれます。唯一無二の名前を指定したからですね。

リンクさせる方には次のように書きます。

<a href=”#footer“>フッターに飛びます</a>

#印がidに飛べ！という意味だと思ってください。#に続けてid名を指定します。

これで、「フッターに飛びます」と書いてある文字をクリックすればその場所に飛んでくれるようになります。

<html>
<head>
    (省略)
</head>
<body>
    <a href="#id">idに飛びます</a>
    (中略)
    <div id="id">ここに飛びます</div>
</body>
</html>

実はこのリンク方法は同じページである必要はなく、ページの途中を指定する方法です。

例えば別のファイル、index.htmlに第１章から第１０章まで書いてあって、その中の第５章に飛ばしたいとします。第５章の id が id=”number5″ であるならリンクは

と書けば、index.htmlの第５章に飛びます。

今回、説明したかったのはidが唯一無二の存在であるということです。

これまでにスタイルシートの説明で何回か class というものが登場しました。idもclassも名前を指定するためにあると言う点は同じです。

唯一の違いは class は複数に指定できるが id はひとつにしか指定できないということです。例えば

というタグは同じページにいくつ出てきても構いません。それをスタイルシートで

.hoge{
    background:#00f;
}

と指定すれば、すべてのhogeクラスは背景色が青(#00f)になります。

しかし

というタグは絶対にひとつでなくてはならないのです。

ただひとつしか出てこないというルールさえ守れば、スタイルシートに書くことができます。その場合のidであるという指定は先ほどと同じ # で、次のように書きます。

#hoge{
    background:#00f;
}

hogeについて

このブログでも遂にhogeが登場しました。

hoge は（日本語で）プログラミングの勉強をすると必ず出てきます。これが出てきた時は例文という意味だと思ってください。

なぜ hoge なのか？意味は？

多分誰も知りません。でも hoge と書くと「例文」だとプログラミングの勉強した人ならば必ずわかります。そういうものなんです。

ここに書いてある通りやったら確かにページの途中に飛ぶけど、このブログみたいにクルクルしない。それをクルクルさせたい！という方へ。

このページのクルクルは smoothscroll.js という JavaScript （簡単なプログラム）を使っています。

smoothscroll.js は http://www.kryogenix.org/code/browser/smoothscroll/ で公開されていて、誰でも自由にダウンロードできます。

コメントを残す コメントをキャンセル