リンクの設定


同じ階層のページへリンク

相対パス vs. 絶対パス

リンクを設定する場合、同じサイト内のページへリンクを張る時には相対パスを使います。

一方絶対パスは、ファイルの位置を一番元になる位置から階層構造をたどって記述する方法で 「 http:// 」あるいは「 https:// 」からはじまります。絶対パスはフルパスともいい、リンク先のファイルの完全なアドレスになります。

サイト外部へのリンクは常に絶対パスになり、リンク元がどこであったとしても記述は変わりません。

同じフォルダにあるファイルへのリンク

まず同じ階層(同じフォルダ)に含まれているファイルへのリンクを設定する方法を確認します。

今回例として同じフォルダに新規作成する「odekake.html」と既存の「report.html」という2つのファイルを使います。

同じ階層にあるファイルへのリンクは次のように記述します。

今回の例で言えば、「report.html」ファイルへリンクを設定する場合は次のようになります。

※現在のディレクトリを表す「.」を使って「./ファイル名」と記述することもできます。

サンプル

では実際に試してみます。今回は「odekake.html」から「report.html」へリンクを設定します。

「odekake.html」ファイルは新たに作成します。フォルダはhtmlファイルを保存している「text」フォルダーとします。同じフォルダには「report.html」ファイルが保存されていることも確認します。

「odekake.html」ファイルはリンクを設定する前は次のようになっています。

「report.html」へリンクを貼る場合は「odekake.html」ファイルは次のようになります。

では「odekake.html」ファイルをブラウザで表示してみます。

リンクが設定されているテキスト(今回の場合は「2019年6月 USJ」)の下には下線が引かれていてリンクが張られていることが分かります。

ではマウスでリンクが設定されたテキストをクリックして下さい。

リンク先として設定されているWebページが同じブラウザの同じタブのウィンドウ上に表示されます。