アジェンダ
- パス
- 絶対パス
- 相対パス
- HTMLのタグ
- a
- HTMLの属性
- href
- id
- 実践
パス
パスとは、ファイルの存在する場所のことである。
絶対パス
絶対パスとは、どのディレクトリからでも、対象のファイルの存在する場所がわかるように表す記法である。
相対パス
相対パスとは、今いるディレクトリを基準として、対象のファイルの存在する場所を表す記法である。
HTMLのタグ
a
アンカータグを示すタグ。他のファイルや指定したidへのリンクを示す。
anchorのa。
HTMLの属性
href
リンク先を指定する属性。値にはリンク先ファイルのパスを記載する。
リンク先をidに設定する場合、id名の先頭に # を付ける。
hypertext referenceのhref。
id
文書(またはHTMLファイル)の位置に名前をつける属性。名前をつけることによって、リンク先に指定することができる。
値にはid名を記載する。
identifierのid。
実践
上記のタグ・属性を使用し、以下のindex.htmlとmenu.htmlを作成した。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>トップページ</title>
</head>
<body>
<h1 id="top">トップページ</h1>
<p>ようこそ！何をしますか？</p>
<ul>
<li><a href="./menu.html#lunch">ランチメニューを見る。</a></li>
<li><a href="./menu.html#dinner">ディナーメニューを見る。</a></li>
</ul>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メニュー</title>
</head>
<body>
<h1 id="lunch">ランチメニュー</h1>
<ol>
<li>おにぎり</li>
<li>らーめん</li>
<li>かれー</li>
<li>ぱん</li>
</ol>
<h1 id="dinner">ディナーメニュー</h1>
<ol>
<li>すぱげてぃ</li>
<li>うなぎ</li>
<li>おむらいす</li>
<li>ぴざ</li>
</ol>
<a href="./index.html">トップへ戻る</a>
</body>
</html>
index.htmlをWebブラウザに表示させるとこんな感じ。
ランチメニュー、ディナーメニューにそれぞれリンクができている。
「ランチメニューを見る。」をクリックすると、menu.htmlのランチメニューの箇所が表示される。
「ディナーメニューを見る。」をクリックすると、menu.htmlのディナーメニューの箇所が表示される。
そして、menu.htmlの「トップへ戻る」をクリックすると、index.htmlが再び表示される。
おわりに
今回はリンクの記述の仕方について学んだ。
idを使用することで、同ページの特定の箇所にリンクを作成できる。とても便利だと感動した。
次回 >> ここ