リンク先のファイルがリンク元のファイルがある階層よりも上の階層にある場合のリンクを設定する方法を確認します。
今回例としてリンク元のファイル「odekake.html」と、同じディレクトリに「diary」と言うディレクトリを作成しその中に「zoo2.html」と「park.html」という2つのファイルを用意しました。
前ページの例とは逆に「zoo2.html」や「park.html」から「odekake.html」へのリンクを設定する方法を確認します。
すなわち、上の階層のファイルへのリンクとなります。
上の階層のファイルへのリンクは次のように記述します。
1つ上の階層は「..（ドットドット）」で表します。2つ以上の上の階層も同じように「../../ファイル名」など「..」を階層の分だけ「/」でつなげて記述します。
今回の例で言えば、「zoo2.html」ファイルから「odekake.html」へリンクを設定する場合は次のようになります。
では実際に試してみます。今回は「odekake.html」は前ページのサンプルから変更せず、「zoo2.html」及び「park.html」から「odekake.html」へリンクを設定します。
zoo2.html :
park.html :
report.html:
同じようにreport.htmlにも、odekake.htmlへ戻るリンクを貼ります。 但しこの場合は、両htmlとも同じフォルダーすなわち階層に居りますので、 戻るリンクは
となります。
では「odekake.html」ファイルをブラウザで表示してみます。
リンクが設定された「2017年10月 公園」と書かれた部分をクリックして下さい。
リンク先である「park.html」が表示されます。表示されたページには目次へ戻るためのリンクが最下部に設定してありますので「お出かけ日記へ戻る」と書かれた部分をクリックして下さい。
リンク先である「odekake.html」が表示されます。
リンクが設定された「2018年12月 動物園」と書かれた部分をクリックして リンク先の「zoo2.html」が表示されます。
表示されたページには目次へ戻るためのリンクが最下部に設定してあるので「お出かけ日記へ戻る」と書かれた部分をクリックします。
リンク先である「odekake.html」が表示されます。
リンクが設定された「2019年6月 USJ」と書かれた部分をクリックして リンク先の「report.html」が表示されるのを確認します。
表示されたページには目次へ戻るためのリンクが最下部に設定してあるので「お出かけ日記へ戻る」と書かれた部分をクリックします。
リンク先である「odekake.html」が表示されます。