ページからページへ移動するのはホームページの基本かつ絶対に必要なこと。ミスの多い部分でもありますからじっくりしっかり…
リンクを作って別のページに移動させよう
テキストリンクを作る
メニューや、文中のテキストをクリックして別のページに移動させるリンク。これが無いとホームページは成り立ちませんね。 以下のように書いてみましょう。ファイルの構成は下の図のようにします。
さて、がんばってHTMLを書いてみましょう。
index.html
<html><head>
<title>私のホームページのタイトル</title>
</head><body>
これはトップページです。<br>
<a href="page1.html">Page１にジャンプします。</a><br>
<a href="category/index.html">categoryフォルダのトップページにジャンプします。</a><br>
<a href="category/page2.html">categoryフォルダのPage2にジャンプします。</a>
</body></html>
これを「index.html」という名前で保存しましょう。
page1.html
<html><head>
<title>私のホームページのタイトル</title>
</head><body>
これはPage1です。<br>
<a href="index.html">トップページにジャンプします。</a><br>
<a href="category/index.html">categoryフォルダのトップページにジャンプします。</a><br>
<a href="category/page2.html">categoryフォルダのPage2にジャンプします。</a>
</body></html>
以上のように記述して、上の「index.html」と同じフォルダに「page1.html」という名前で保存します。
そしてこの２つのHTMLファイルと同じフォルダに「category」というフォルダを作ります。
category/index.html
<html><head>
<title>私のホームページのタイトル</title>
</head><body>
これはcategoryフォルダのトップページです。<br>
<a href="page2.html">Page2にジャンプします。</a><br>
<a href="../index.html">トップページにジャンプします。</a><br>
<a href="../page1.html">トップフォルダのPage1にジャンプします。</a>
</body></html>
以上のように記述して「category」フォルダの中に「index.html」という名前で保存。
category/page2.html
<html><head>
<title>私のホームページのタイトル</title>
</head><body>
これはcategoryフォルダのPage2です。<br>
<a href="index.html">categoryフォルダのトップページにジャンプします。</a><br>
<a href="../index.html">トップページにジャンプします。</a><br>
<a href="../page1.html">トップフォルダのPage1にジャンプします。</a>
</body></html>
以上のように記述し「category」フォルダ内に「page2.html」という名前で保存します。
いかがでしょうか？こちらのように４つのページがすべてリンクでつながって表示されましたか？フォルダの階層が異なる場合に注意して書きましょう。リンク先のファイルの指定は、階層が下に行くほど
<a href="catrgory/category_sub/category_subsub/・・・/index.html>～～</a>
というようにスラッシュで区切ります。
上の階層に行く場合は、
<a href="../../../../index.html>～～</a>
というように、また上の階層に行ってそこから下の階層にという場合は順序をたどっていけばよいです。例えば、
<a href="../../../category/category_sub/index.html>～～</a>
という感じです。それでは次に写真などをクリックすると別のページに移る方法です。
