リンクしよう

目次

他のサイト(例えば https://www.google.com/) にリンクを張るには、<a> を用いて次のようにします。

HTML
<a href="https://www.google.com/">Google</a>

Google の部分が下線付きの青色で表示され、そこをクリックすると、そのページにジャンプできるようになります。

表示
Google

https://www.example.com/foo/baa/baz.html という URL は www.example.com という名前のサーバーの、foo フォルダの中の baa フォルダの中の、baz.html という名前のファイルを意味しています。

HTML
<a href="https://www.example.com/foo/baa/baz.html">Link</a>

ページが同じサーバー内にある時は https://~/ を省略することができます。

HTML
<a href="/foo/baa/baz.html">Link</a>

さらに、ページが同じフォルダにある場合は /~...~/ も省略することができます。

HTML
<a href="baz.html">ページ</a>

たとえば、作成した HTML ファイルが次のようなフォルダに置かれているとします。

folderWebPages
   folder folderA
      file aaa.html
      file bbb.html
      folder folderB
         file ccc.html
   folder folderC
      file ddd.html

aaa.html から bbb.html にリンクするには次のようにします。

HTML
<a href="bbb.html">ジャンプ</a>

aaa.html から ccc.html にリンクするには次のようにします。

HTML
<a href="folderB/ccc.html">ジャンプ</a>

aaa.html から ddd.html にリンクするには次のようにします。ドットドット(..)は「ひとつ上のフォルダ」を意味します。

HTML
<a href="../folderC/ddd.html">ジャンプ</a>

リンク先にフォルダを指定する

WebページをローカルPCではなく、Webサーバーにアップロードしてから参照する場合は、リンク先にファイル名ではなくフォルダ名を指定することもできます。

HTML
<a href="../folderC/">ジャンプ</a>
<a href="http://www.example.com/folderC/">ジャンプ</a>

この場合、通常、そのディレクトリの中にある「省略時ファイル(通常 index.html)」が表示されます。また、省略時ファイルが存在しない場合は、そのフォルダ内のファイルの一覧が表示されます。(サーバーの設定によっては表示できない場合があります。)

ページ中の特定場所へのジャンプ

ページの途中の特定の場所にジャンプすることもできます。まず、ジャンプ先の個所に id 属性で名前をつけておきます。ブラウザ上では何の変化もありません。<a href="#名前">~</a> のリンクをクリックすると、その名前の場所にジャンプします。

HTML
<h4 id="LocalLink">自サイト内のリンク</h4>
     :
→ <a href="#LocalLink">自サイト内のリンク</a>

次のリンクをクリックしてみてください。

表示
自サイト内のリンク

他サイトや他フォルダ、他ファイルの特定個所へのリンクは次のようにします。

HTML
<a href="https://www.example.com/aaa.html#Link">ジャンプ</a>

別ウィンドウで表示する

target 属性を指定することにより、リンク先を別タブで表示することができます。

HTML
<a target="_blank" href="http://www.yahoo.co.jp/">Yahoo!</a>

下記のリンクをクリックしてみてください。

表示
Google