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

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 と書くと「例文」だとプログラミングの勉強した人ならば必ずわかります。そういうものなんです。

“ページの途中にリンクする” の続きを読む

ブログの中に表を作るぞ!の巻

HTMLのタグを使ってブログの中にテーブル(表)を作ります。
最終的には、外部スタイルシートと結びつけます。

今回はブログの中に表を作ります。こんなかんじです。

商品購入金額の10%
予約1件につき3193円
入会1件につき19163
登録・稼動確認後に3500円
申込み1件につき1900円
初回来店で30000円

うわ、なんなんすかこれ。ボロもうけじゃないですか!
まだアフィリエイトをやっていない君!すぐにはじめないか?
なに、ブログを持っていない?安心しろA8.netならタダですぐにブログもはじめられるぞ!

“ブログの中に表を作るぞ!の巻” の続きを読む