HTML 入門

基本的なタグをマスターしよう

リンクを設定する

リンクを設定するには <a> タグを使います．この a は anchor の略です．

目次に戻る

外部サイトへのリンクを設定する

外部サイトへリンクを設定するには <a> タグの中にリンク先のURLを記述します．例えば，神戸学院大学のトップページや，経営学部の教員紹介ページにリンクを設定するには次の通り記述します．さらに，target="_blank" を指定すれば，別のウインドウでリンクを開くこともできます．

index.html（抜粋）
<p>
  例えば，<a href="https://www.kobegakuin.ac.jp/">神戸学院大学</a>のトップページへリンクを設定します．
  また<a href="https://kobegakuin-biz.jp/staff/" target="_blank">教員紹介</a>を別ウインドウで開きます．
</p>

目次に戻る

相対リンクを設定する

自身のサイトの別のページへのリンクを設定するには，同じフォルダにファイルがあればファイル名だけを指定します．例えば， 編集中のこのファイル（03-07.html）と同じ階層には「index.html」と「02-01.html」「tissot.jpeg」があり，「abc」フォルダの中に「link.html」があるとしよう．

このとき，次の通り記述すれば同じフォルダ内のファイル (02-01.html) にリンクを設定することができます．

index.html（抜粋）
<p>
  例えば，<a href="02-01.html">HTML の雛形</a>へのリンクを設定します．
</p>

次に，フォルダを含んだリンクについて考えます．このファイル（03-07.html）から link.html にリンクするには abc フォルダの中の link.html を参照すれば良いので，abc/link.html と指定します．

index.html（抜粋）
<p>
  abcフォルダの中にある，<a href="abc/link.html">link.html</a> へのリンクです．
</p>

このようにフォルダの区切りはスラッシュ（/）で記述します．また，一つ上の階層は ../ で指定することを覚えておこう．例えば，link.html から 03-07.html へリンクするには，一つ上の階層に移動する必要があるので，../03-07.html で指定できます．さらに ../../ で2つ上の階層に移動したり，../フォルダ名/ のように，一つ上の階層に移動してその階層にある別のフォルダに移動するなど，様々な組み合わせで利用できます．（これらの方法が理解できたら，別のフォルダに保存した写真を表示することもできるようになるでしょう．）

同じページの別の場所にリンクを設置することも可能です．例えば，このページの目次部分に戻るためのリンクを設定する手順を示します．まず，目次部分の <h3>に id を指定します．この id は同じページ内で重複しない名前を設定する必要があります．目次 (Table of Contents) には次の通り toc という名前の id を付けました．

index.html（抜粋）
<h3 id="toc">HTML 入門：目次</h3>

上のように id を付けたら，その id にリンクを設置できるようになります．リンクを作成するときには指定したい id の直前に # を追加します．なお，下のリンクを辿ると目次の箇所に戻ることができますが，ブラウザに表示される URL の最後には #toc が付いていることに注意してください．さらに，別のページの特定の箇所にリンクを設置することも可能です．

index.html（抜粋）
<p>
  このページの<a href="#toc">目次</a>に戻ります
</p>
<p>
  <a href="03-04.html">箇条書きページ</a>の<a href="03-04.html#ul">箇条書き</a>や<a href="03-04.html#ol">番号付き箇条書き</a>にリンクします．
</p>

目次に戻る