HTMLでのリンクの作成方法です.

目次

  1. 絶対パスと相対パス
  2. 絶対パス
    1. 相対パス
    2. 階層を戻る例
  3. IDを使う例
    1. ページ最上部へのリンク
  4. リンク先の開き方を指定する
  5. リンク先にジャンプせずダウンロードを実行

絶対パスと相対パス

絶対パス

a要素による基本的なテキストのリンクは次の形式で記述します.

<a href="URL">リンク先名称</a>

リンク先はURLとして,絶対的なパスで指定されています.

相対パス

URLに代えて,ディレクトリの階層という見方から相対的なパスを記述することができます.

カレントディレクトリは.で表します.
トップレベルにいれば,

<a href="./foo/bar/baz.html">リンク先名称</a>

または./を省略して

<a href="foo/bar/baz.html">リンク先名称</a>

と書けます.

barの階層のファイルから張ったリンクなら,

<a href="./baz.html">リンク先名称</a>

または

<a href="baz.html">リンク先名称</a>

です.

階層を戻る例

foo/index.htmlfoo/bar/baz.htmlがあるとします.
前者から後者へ相対パスでリンクするには,一度fooまで遡るため,「1階層上に(../)」を使います.
つまり,リンクには

<a href="../bar/baz.html">リンク先名称</a>

とします.

逆にfoo/bar/baz.htmlからfoo/index.htmlへリンクする場合,2階層戻ったディレクトリ(fooディレクトリ)にindex.htmlがあるため,

<a href="../../index.html">リンク先名称</a>

となります.

IDを使う例

次のように同一ページ内でなんらかのIDが指定されているとします.

<div id="ID">テキスト<div>

このとき,

<a href="#ID">テキスト<div>

の形で,そのIDのある位置へのリンクが作成されます.

ページ最上部へのリンク

そのページのトップに戻すリンクを作るには,href="#"を指定します.

<a href="#">リンク先名称</a>

リンク先の開き方を指定する

target属性によりリンク先の開き方を指定できます.

target="_blank":新しいタブかウィンドウ
target="_top":現在ウィンドウ

リンク先にジャンプせずダウンロードを実行

同一ドメインにあるファイルをリンク先へジャンプすることなくダウンロードできます.

<a download href="URL">リンク先名称</a>