【WEB 入門講座】リンクタグと画面移動（相対パスを学習）
[WEB 入門講座]リンクタグと画面移動（相対パスを学習）
リンクタグ
リンクタグとは リンクタグは、ある画面から別の画面へ移動する時に利用するタグである。
Webサイトの多くは、複数の画面（ページ）で構成されている。 例えばトップ画面があり、その他にも 自己紹介画面などがあるだろう。 Webサイトが複数の画面を持つ時、ある画面から別の画面へ移動する 仕組みが必要である。 その仕組みがリンクタグである。 ユーザーがリンクタグをクリックすると、別の画面へ移動する。
本講座では、複数のHTMLファイルを作成して、 リンクタグを学習する。 リンクタグを学習するには、 複数の画面（ページ）が必要である。 こんかい、sample.htmlとnext.htmlをサンプルプログラムとして利用する。 それでは学習しよう。 まず、フォルダ構成を確認する。
フォルダ構成
iori
┃
┣ sample.html
┃
┗ next.html
sample.htmlとnext.htmlを同じフォルダ内に作成する。 とてもシンプルな構成である。 今後学習を進めていくと、フォルダ構成が複雑になるので気を付ける 必要がある。 では、sample.htmlを掲載する。
001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
014
015</body>
016</html>
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
014
015</body>
016</html>
next.htmlを掲載する。
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>1階フロア案内</p>
006 <p>
007 <a href="sample.html">
008 to TOP PAGE
009 </a>
010 </p>
011
012</body>
013</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>1階フロア案内</p>
006 <p>
007 <a href="sample.html">
008 to TOP PAGE
009 </a>
010 </p>
011
012</body>
013</html>
sample.htmlの画面
TOP PAGE
- 1階フロア案内
sample.htmlファイルを開くと、このような画面が表示する。 上部の文字列「sample.htmlの画面」は、学習用に表示している。 実際Webブラウザに表示する事はないので、ご注意下さい。
「1階フロア案内」という文字列に下線がついている。 この文字列「1階フロア案内」がリンクである。 文字列「1階フロア案内」をクリックすると、 別の画面へ移動する。こんかいは、next.htmlへ移動する。
next.htmlの画面
1階フロア案内
to TOP PAGE
sample.htmlのリンクをクリックすると、 next.htmlの画面が表示する。 この画面の「to TOP PAGE」リンクをクリックすると、 元のsample.htmlへ移動する。 これが、今回作成するWebサイトである。 では、sample.htmlから解説する。
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
007 <ol>
008 <li>
009 <a href="next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
6行目でpタグを記述して文字列「TOP PAGE」を表示する。 次にolタグとliタグを記述して、リストを表示する。 9行目でaタグを記述する。aタグがリンクタグである。 aタグはアンカーと言ったりする。 本講座では、アンカーの事をリンクと表記する。
リンク <a href="[移動先]" >[表示する文字列]</a>
[表示する文字列]は画面上に表示する文字列である。
009 <a href="next.html">
010 1階フロア案内
011 </a>
010 1階フロア案内
011 </a>
こんかい、「1階フロア案内」が画面に表示する。 この文字列の上にカーソルを合わせると、クリックできる。 クリックすると画面が移動する。 移動先画面は、href属性の値に記述したファイルである。 こんかい、href属性の値は「next.html」である。 つまり、next.htmlへ移動する（next.htmlが画面に表示する）。 next.htmlファイルを確認する。
005 <p>1階フロア案内</p>
006 <p>
007 <a href="sample.html">
008 to TOP PAGE
009 </a>
010 </p>
006 <p>
007 <a href="sample.html">
008 to TOP PAGE
009 </a>
010 </p>
next.htmlの画面
1階フロア案内
to TOP PAGE
文字列「1階フロア案内」が表示して、その下に「to TOP PAGE」リンクが表示する。
007 <a href="sample.html">
008 to TOP PAGE
009 </a>
008 to TOP PAGE
009 </a>
「to TOP PAGE」リンクをクリックすると、sample.htmlが開く。
解説は以上である。
相対パス
相対パスを学習する。
相対パス 今作業しているフォルダを始点として、 別のフォルダを指し示すパス
相対パスは、ファイルのパス（アドレス）の表示手法の一つである。 相対パスはプログラミングに関わるあらゆる場所で利用される。 こんかいは、aタグのhref属性の値に利用する。 非常に重要なので、詳細に解説する。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【Xフォルダ】
┃
┣ 始点.html
┃
┣ b.html
┃
┗ 【Yフォルダ】
┃
┗ c.html
このフォルダ構成を利用して、相対パスを学習する。 まずフォルダ構成を解説する。ioriフォルダにsample.htmlファイルと、 「Xフォルダ」が存在する。「Xフォルダ」の中に、 「始点.html」、「b.html」と「Yフォルダ」が存在する。 「Yフォルダ」の中にc.htmlが存在する。 いま、「始点.html」ファイルを開いていると仮定する。 「始点.html」ファイルを始点とした、各ファイルの相対パスを解説する。
| 対象 ファイル |
「始点.html」から の相対パス |
解説 |
| b.html | b.html | 同じフォルダ内の場合、ファイル名が相対パス |
「始点.html」とb.htmlは同じフォルダ内に存在する。 「始点.html」からb.htmlを指定する場合、 「b.html」と指定する。
<a href = "b.html" >b.html</a>
「始点.html」からb.htmlへ移動するリンクを作成する場合、 このようにaタグを記述する。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【Xフォルダ】
┃
┣ 始点.html
┃
┣ b.html
┃
┗ 【Yフォルダ】
┃
┗ c.html
| 対象 ファイル |
「始点.html」から の相対パス |
解説 |
| c.html | Yフォルダ/c.html | フォルダ内のファイルを指定する場合、 フォルダ名/ファイル名 このように記述する |
c.htmlは「Yフォルダ」の中に存在する。 「始点.html」からc.htmlを指定する場合、 「Yフォルダ/c.html」と指定する。
<a href = "Yフォルダ/c.html" >c.html</a>
「始点.html」からc.htmlへ移動するリンクを作成する場合、 このようにaタグを記述する。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【Xフォルダ】
┃
┣ 始点.html
┃
┣ b.html
┃
┗ 【Yフォルダ】
┃
┗ c.html
| 対象 ファイル |
「始点.html」から の相対パス |
解説 |
| sample.html | ../sample.html | 1つ上のフォルダ内のファイルを指定する場合、 ../ファイル名 このように記述する |
sample.htmlは「始点.html」から見て、1つ上のフォルダに存在する。 sample.htmlを指定する場合、 まずフォルダを1つ上へ移動する必要がある。
フォルダ階層が上のファイルを指定する
../ファイル名
「 .. 」は、 上の階層のフォルダを意味する。 「始点.html」は現在「Xフォルダ」の中に存在する。 ここで「..」と記述すると、「..」は、1つ上のフォルダの ioriフォルダを意味する。
sample.htmlは「ioriフォルダ」の中に存在するので、 「始点.html」から見て、「../sample.html」と指定する。
<a href = "../sample.html" >sample.html</a>
「始点.html」からsample.htmlへ移動するリンクを作成する場合、 このようにaタグを記述する。
「..」が難しい。上のフォルダへ移動する場合は、 「..」と記述する、と覚える。
リンクタグの練習
相対パスを指定する方法を、リンクタグを作成しながら学習する。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【aフォルダ】
┃
┗ next.html
ioriフォルダ内に、sample.htmlとaフォルダを作成して、 aフォルダの下にnext.htmlを作成する。 このフォルダ構成において、 sample.htmlとnext.htmlをリンクで往来する。
【sample.html】
001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="a/next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
014
015</body>
016</html>
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="a/next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
014
015</body>
016</html>
sample.htmlの画面
TOP PAGE
- 1階フロア案内
「1階フロア案内」というリンクをクリックすると、 next.htmlへ移動する。
【next.html】
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p>1階フロア案内</p>
006 <p>
007 <a href="../sample.html">
008 to TOP PAGE
009 </a>
010 </p>
011
012 </body>
013</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p>1階フロア案内</p>
006 <p>
007 <a href="../sample.html">
008 to TOP PAGE
009 </a>
010 </p>
011
012 </body>
013</html>
next.htmlへ移動した後、「to TOP PAGE」リンクをクリックすると、 もとのsample.html画面へ移動する。 では、sample.htmlを解説する。
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="a/next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
007 <ol>
008 <li>
009 <a href="a/next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
文字列「1階フロア案内」をaタグで囲んでいる。 aタグで囲まれた文字列がリンクとなる。 aタグのhref属性の値を見る。
009 <a href="a/next.html">
010 1階フロア案内
011 </a>
010 1階フロア案内
011 </a>
href属性の値は「a/next.html」である。 最初の「a」は、sample.htmlと同じフォルダ内のaフォルダを意味する。 「a/next.html」はaフォルダの中のnext.htmlファイルを意味する。 つまり、リンクをクリックすると、 aフォルダの中のnext.htmlファイルへ移動する。 next.htmlを見る。
005 <p>1階フロア案内</p>
006 <p>
007 <a href="../sample.html">
008 to TOP PAGE
009 </a>
010 </p>
006 <p>
007 <a href="../sample.html">
008 to TOP PAGE
009 </a>
010 </p>
文字列「1階フロア案内」が表示し、 その下に、「to TOP PAGE」というリンクが表示する。 「to TOP PAGE」リンクをクリックすると、どの画面へ移動するだろうか？
aタグのhref属性の値は「../sample.html」である。 最初の「..」は1つ上のフォルダを意味する。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【aフォルダ】
┃
┗ next.html
いま、next.htmlファイルはaフォルダの中にある。 1つ上のフォルダは、「iori」フォルダである。 つまり「..」は「iori」フォルダを意味する。 「../sample.html」はioriフォルダの中のsample.htmlファイルを意味する。
「to TOP PAGE」リンクをクリックすると、ioriフォルダの中のsample.htmlファイルへ移動する。 解説は以上である。
次の練習サンプルを掲載する。まず、フォルダ構成を確認する。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【aフォルダ】
┃
┗ 【bフォルダ】
┃
┗ next.html
ioriフォルダ内にsample.htmlとaフォルダがある。 aフォルダの中にbフォルダを作成し、 さらにbフォルダの中に、next.htmlを作成する。 sample.htmlからnext.htmlへ移動して、 さらに、next.htmlからsample.htmlへ戻るリンクを見る。 さくっと学習する。
【sample.html】
001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="a/b/next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
014
015</body>
016</html>
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="a/b/next.html">
010 1階フロア案内
011 </a>
012 </li>
013 </ol>
014
015</body>
016</html>
9行目でaタグを作成する。 aタグのhref属性の値を確認する。
<a href="a/b/next.html">
「a/b/next.html」は、aフォルダ内のbフォルダ内のnext.htmlを意味する。 このように、「/ （スラッシュ）」を繋げて、 下のフォルダへどんどん移動できる。 10行目の文字列「1階フロア案内」をクリックすると、 next.htmlへ移動する。 next.htmlを見る。
【next.html】
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>
006 1階フロア案内
007 </p>
008 <p>
009 <a href="../../sample.html">
010 to TOP PAGE
011 </a>
012 </p>
013
014</body>
015</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>
006 1階フロア案内
007 </p>
008 <p>
009 <a href="../../sample.html">
010 to TOP PAGE
011 </a>
012 </p>
013
014</body>
015</html>
9行目でaタグを作成する。 aタグのhref属性の値を確認する。
<a href="../../sample.html">
「../../sample.html」は、next.htmlが存在するフォルダを2つ上へ上った フォルダ内にあるsample.htmlを意味する。 「../」を繋げると、上のフォルダへ移動できる。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【aフォルダ】
┃
┗ 【bフォルダ】
┃
┗ next.html
next.htmlは「bフォルダ」の中に存在する。 「../../」は「bフォルダ」を2つ上に上ったフォルダを意味する。
| パス | フォルダ |
| 現在のフォルダ | bフォルダ |
| ../ | aフォルダ |
| ../../ | ioriフォルダ |
「../../」は「bフォルダ」から2つ上の、「iori」フォルダを意味する。 「../../sample.html」は、 「iori」フォルダ内にあるsample.htmlを意味する。 文字列「to TOP PAGE」をクリックすると、 sample.htmlへ移動する。 解説は以上である。
最後にもう一つだけ、練習サンプルを用意した。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【aフォルダ】
┃
┣ 【bフォルダ】
┃ ┃
┃ ┗ nextB.html
┃
┗ 【cフォルダ】
┃
┗ nextC.html
ioriフォルダ内にsample.htmlファイルとaフォルダが存在する。 aフォルダの中にbフォルダとcフォルダが存在する。 bフォルダにnextB.htmlファイルを作成し、 cフォルダにnextC.htmlファイルを作成する。 HTMLファイルは3つ存在する。画面の移動経路は6つ存在する。
| 移動元 | 移動先 | パス |
| sample.html | nextB.html | a/b/nextB.html |
| nextC.html | a/c/nextC.html | |
| nextB.html | sample.html | ../../sample.html |
| nextC.html | ../c/nextC.html | |
| nextC.html | sample.html | ../../sample.html |
| nextB.html | ../b/nextB.html |
このように6つの経路が考えられる。 こんかいは、 nextB.htmlからnextC.htmlへ移動するケースのみ解説する。
フォルダ構成
┗ 【aフォルダ】
┃
┣ 【bフォルダ】
┃ ┃
┃ ┗ nextB.html
┃
┗ 【cフォルダ】
┃
┗ nextC.html
nextB.htmlはbフォルダに存在する。 bフォルダにnextC.htmlファイルは存在しない。 そこで、1つフォルダを上へ移動する。
../
「..」により、1つ上のaフォルダへ移動する。 aフォルダの中にcフォルダがある。 そして、cフォルダの中にnextC.htmlファイルが存在する。
../c/nextC.html
このようになる。解説は以上である。 ここで記載したファイルと画面を掲載する。
【sample.html】
001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="a/b/nextB.html">
010 1階フロア案内
011 </a>
012 </li>
013 <li>
014 <a href="a/c/nextC.html">
015 2階フロア案内
016 </a>
017 </li>
018 </ol>
019
020</body>
021</html>
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006 <p>TOP PAGE</p>
007 <ol>
008 <li>
009 <a href="a/b/nextB.html">
010 1階フロア案内
011 </a>
012 </li>
013 <li>
014 <a href="a/c/nextC.html">
015 2階フロア案内
016 </a>
017 </li>
018 </ol>
019
020</body>
021</html>
【a/b/nextB.html】
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>1階フロア案内</p>
006 <ol>
007 <li>
008 <a href="../c/nextC.html">
009 2階フロア案内
010 </a>
011 </li>
012 <li>
013 <a href="../../sample.html">
014 to TOP PAGE
015 </a>
016 </li>
017 </ol>
018
019</body>
020</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>1階フロア案内</p>
006 <ol>
007 <li>
008 <a href="../c/nextC.html">
009 2階フロア案内
010 </a>
011 </li>
012 <li>
013 <a href="../../sample.html">
014 to TOP PAGE
015 </a>
016 </li>
017 </ol>
018
019</body>
020</html>
【a/c/nextC.html】
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>2階フロア案内</p>
006 <ol>
007 <li>
008 <a href="../b/nextB.html">
009 1階フロア案内
010 </a>
011 </li>
012 <li>
013 <a href="../../sample.html">
014 to TOP PAGE
015 </a>
016 </li>
017 </ol>
018
019</body>
020</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003<body>
004
005 <p>2階フロア案内</p>
006 <ol>
007 <li>
008 <a href="../b/nextB.html">
009 1階フロア案内
010 </a>
011 </li>
012 <li>
013 <a href="../../sample.html">
014 to TOP PAGE
015 </a>
016 </li>
017 </ol>
018
019</body>
020</html>
絶対パス
まとめ
リンクタグとは リンクタグは、ある画面から別の画面へ移動する時に利用する。
フォルダ構成
【ioriフォルダ】
┃
┣ sample.html
┃
┗ 【Xフォルダ】
┃
┣ 始点.html
┃
┣ b.html
┃
┗ 【Yフォルダ】
┃
┗ c.html
| 対象 ファイル |
「始点.html」から の相対パス |
解説 |
| b.html | b.html | 同じフォルダ内の場合、ファイル名が相対パス |
| c.html | Yフォルダ/c.html | フォルダ内のファイルを指定する場合、 フォルダ名/ファイル名 このように記述する |
| sample.html | ../sample.html | 1つ上のフォルダ内のファイルを指定する場合、 ../ファイル名 このように記述する |
