§09-07…上のディレクトリ内の他の下層ディレクトリへのリンク – オンライン無料パソコン教室

§09-07…上のディレクトリ内の他の下層ディレクトリへのリンク

(01) 今度は「seihin」ディレクトリ内に以下のようなソースのページ「seihinmain.htm」を作成してください。完成後はブラウジングしてください。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>イチゴ製品のご案内</title>
<link rel="stylesheet" type="text/css" href="../str.css" />
</head>
<body>
<h1>ストロベリーSHOP</h1>
<h2>主なイチゴ製品のご案内</h2>
<h3>取れたてイチゴ</h3>
<h3>イチゴジャム</h3>
<h3>イチゴゼリー</h3>
<h3>フローズンストロベリー</h3>
<h4><a href="../index.htm">HOME</a></h4>
<h4>イチゴ狩り</h4>
<h4>イチゴ製品</h4>
</body>
</html>

seihinmain

(02) さて、この中のテキスト「イチゴ狩り」のリンク先を「gari」ディレクトリの「garimain.htm」にします。上のディレクトリにあれば、「../garimain.htm」と指定するのですが、その中の「gari」ディレクトリ内に存在しているので、このような指定はできません。上のディレクトリ内の、下層ディレクトリを指定する場合には「../ディレクトリ名/ファイル名」のように指定します。今回は「../gari/garimain.htm」をリンク先に指定します。ソースを以下のように更新してからブラウジング・テストしましょう。

<body>
<h1>ストロベリーSHOP</h1>
<h2>主なイチゴ製品のご案内</h2>
<h3>取れたてイチゴ</h3>
<h3>イチゴジャム</h3>
<h3>イチゴゼリー</h3>
<h3>フローズンストロベリー</h3>
<h4><a href="../index.htm">HOME</a></h4>
<h4><a href="../gari/garimain.htm">イチゴ狩り</a></h4>
<h4>イチゴ製品</h4>
</body>

(03) 各層から他の層のファイルをリンク先と指定する場合はどのように指定するべきか、下図を見ながら確認してください。なお、ファイル名を指定せず、ディレクトリ名だけを指定した場合は指定先ディレクトリ内の「index.htm」ファイルを指定したことになります。そのため、各ディレクトリのメインページは「index.htm」としたほうがよいでしょう(今回はわかりやすさを優先して「garimain.htm」「seihinmain.htm」というファイル名を使いましたが)。

リンク元 リンク先 アドレス指定方法
01 03 map.htm
01 04 seikei/

seikei/index.htm

01 05 seikei/hiyou.htm
01 07 seikei/seiji/naiyou.htm
05 01 ../

../index.htm

05 02 ../menu.htm
07 05 ../hiyou.htm
07 02 ../../menu.htm
05 13 ../hou/hiyou.htm
10 07 ../seiji/naiyou.htm
05 15 ../hou/syouhou/naiyou.htm
07 13 ../../hou/hiyou.htm
07 15 ../../hou/syouhou/naiyou.htm

広告ブロックブラウザーではコンテンツが表示できません