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

スポンサーリンク


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

たとえば、ここをクリックすると、一気にページの一番下に行きます。今回は、このやり方を書きます。

リンクの書き方

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

<div id=”footer”>

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に第1章から第10章まで書いてあって、その中の第5章に飛ばしたいとします。第5章の id が id=”number5″ であるならリンクは

<a href=”index.html#number5“>第5章へ</a>

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

id と class

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

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

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

<div class=”hoge”>

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

.hoge{
    background:#00f;
}

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

しかし

<div id=”hoge”>

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

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

#hoge{
    background:#00f;
}

hogeについて

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

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

なぜ hoge なのか?意味は?

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

smoothscroll.js

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

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

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


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください