リンクを設定する

リンクを設定する前に、ジャンプ先のサブページ（例：apple1.html）を作りましょう。

この時、index.htmlをコピーして、ファイル名だけ変えると楽です。一から作るとエンコードから再度指定しないといけないですしね。

サブページができたら、トップページからサブページへリンクで移行する仕組みを作っていきましょう。

<a href="サブページのURL">サブページへ</a>の形でリンクを作ることができます。aタグはアンカーと呼ばれています。 

<!--XHTML1.0-->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
	略
	</head>
	<body>
		<h1>果物について</h1>
			<p>果物の説明</p>
			<h2>りんごについて</h2>
				<p>りんごの説明</p>
				<h3>りんごの種類</h3>
					<p><a href="apple/apple1.html">ふじのページへ</a></p>
					<p><img src="jpg/apple.jpg" alt="りんごの画像" title="りんごの画像" /></p>
				<h3>りんごの栄養</h3>
					<p>ビタミンが豊富です。</p>
			<h2>みかんについて</h2>
				<p>みかんの説明</p>
		<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
	</body>
</html>

<!--HTML5-->
<!DOCTYPE html>
<html lang="ja">
	<head>
	略
	</head>
	<body>
		<h1>果物について</h1>
			<p>果物の説明</p>
			<h2>りんごについて</h2>
				<p>りんごの説明</p>
				<h3>りんごの種類</h3>
					<p><a href="apple/apple1.html">ふじのページへ</a></p>
					<figure>
					<figcaption>りんごの写真</figcaption>
					<img src="jpg/apple.jpg" alt="りんごの画像" title="りんごの画像" />
					</figure>
				<h3>りんごの栄養</h3>
					<p>ビタミンが豊富です。</p>
			<h2>みかんについて</h2>
				<p>みかんの説明</p>
		<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
	</body>
</html>

index.htmlからのappleフォルダの中のapple1.htmlを参照したいので、「apple/apple1.html」となります。

このように、ある階層（カレントディレクトリ）から他の階層のファイルを参照することを、相対参照と呼びます。これに対して、https://www.nkdesk.com/apple/apple1.htmlのように今いる位置関係なく指定することを絶対参照といいます。

今回のディレクトリ構造は以下のようになっているのを再度確認してみてください。

これでトップページからサブページへ移動できるようになりましたが、サブページからトップへ戻るリンクを設定するにはどうすればよいでしょうか？

トップページのりんごの画像は削除して、変わりにサブページへ移動します。（サブページの全文は下記をコピーしてお使いください） 

<!--XHTML1.0（サブページ）-->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>ふじのページ</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="ふじについて解説" />
<meta name="keywords" content="果物,りんご,ふじ" />
</head>
	<body>
		<h1>果物について</h1>
			<p><a href="../index.html">トップページへ</a></p>
			<h2>ふじ</h2>
				<p><img src="../jpg/apple.jpg" alt="りんごの画像" title="りんごの画像" /></p>
				<p>ふじの説明</p>
		<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
	</body>
</html>

<!--HTML5（サブページ）-->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ふじのページ</title>
<meta charset="utf-8" />
<meta name="description" content="ふじについて解説" />
<meta name="keywords" content="果物,りんご,ふじ" />
</head>
	<body>
		<h1>果物について</h1>
			<p><a href="../index.html">トップページへ</a></p>
			<h2>ふじ</h2>
				<figure>
				<figcaption>りんごの写真</figcaption>
				<img src="../jpg/apple.jpg" alt="りんごの画像" title="りんごの画像" />
				</figure>
				<p>ふじの説明</p>
		<p><small>Copyright © 2012 nkdesk all right reserved.</small></p>
	</body>
</html>

マーカーを引いた部分の相対参照に注意してください。サブページはトップページの下の階層なので、上の階層に移動する必要があります。

ここまでのサンプルです。

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ