<a> ハイパーリンク

文書をつなぐ、a要素

師匠

ハイパーリンク 、略してリンクとも呼ばれるな。
<a>要素を使う。
「 a 」は、(いかり)(アンカー、anchor)の「 a 」や!

<a>これが、ハイパーリンクや!</a>
弟子

これは、、、なんですか?

師匠

これやと、よーわからんから、下みたいに書き換えよう。

<a href="sample.html">これが、ハイパーリンクや!</a>
弟子

おー、ウェブで よくあるリンクですね!
さっそく、 クリック!
あれ?
ページが無いみたい。

師匠

落ち着きがないやっちゃなー。
まず、自分が何をしてるか、よー考えてみ?

弟子

は。。。

師匠

要素は、<a>やな。
これに、属性「 href="sample.html" 」を加えとるわけや。
href 属性は、リンクの移動先を指定する
今の場合、<a href="sample.html" >は、「sample.htmlファイルに移動しろ」っていう意味。

弟子

sample.html ファイルは、どこにあるんですか?

師匠

お前が作って 用意してないと、あるわけないやん。

弟子

自分で作るんですか?

師匠

あたり前田のクラッカ~!

(初心者用)2つのページ間を、往復する

師匠

今から、2つのページ ( test1.html と test2.html ) を行ったり来たりするコードを書くで。
ただし、初心者向きやから、分かる人は 下に飛ばした方が ええかもな。

test1.htmltest2.html
師匠

上の緑のリンクをクリックすると、下の画面が出るな。
矢印で示しているリンクをクリックすると、test1 と test2 を往復できる。

師匠

こういうのを作るで。

作り方

師匠

まず、sample というフォルダを作る。
どこに作ってもええ。
名前も sample 以外でもええで。別に。

師匠

その中に、test1.html と test2.html という2つのファイルを作ることが 目的や。
とりあえず。

師匠

まず、テンプレートからや。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>




</body>
</html>
師匠

これを下のように、書き換えて、test1.html の名前で sampleフォルダ内に保存する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>


<a href="test2.html">test2</a>


</body>
</html>
師匠

次に下のように、書き換えたものを作って、test2.html の名前で、同じくsampleフォルダ内に保存する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>


<a href="test1.html">test1</a>


</body>
</html>
師匠

それで完成や。
なお、<a></a>の挟まれている方のtest1とかは、自由に変えてええで。

弟子

なんでもいいんですか?

師匠

なんでもええよ。
下のコードなんて、どーでもええこと書いてあるけど、問題なかろ。

<a href="sample.html">これが、ハイパーリンクや!</a>
師匠

ただし、 href 属性の中は、存在しているファイルか、
http://fromkato.com/color/ みたいな存在しているURLを指定する必要があるな。

文中のリンク

師匠

前にやった段落の中に、リンクを作ってみるで。
下の段落を作ったとする。

<p>test2へ移動するには、ここをクリックします。</p>

test2へ移動するには、ここをクリックします。

師匠

「 ここ 」に test2.html へのリンクを作りたい場合、下のように<p>要素の中に書く。

<p>test2へ移動するには、<a href="sample/test2.html">ここ</a>をクリックします。</p>

test2へ移動するには、ここをクリックします。

師匠

上の出力結果だと、境界の補助線がでているから分かりにくいけど、境界線を無くすと、下みたいに良い感じやな。

test2へ移動するには、ここをクリックします。

復習

  • <a>要素 : ハイパーリンク
  • href 属性 : リンク先を指定