リンクの作成

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. リンクの作成

ここまででパスの表し方を学びました。では実際にリンクを作る方法を見ていきましょう。

リンクタグの解説

HTMLのリンクは、以下のように表します。

<a href="パス">~</a>
タグで挟んだ部分にハイパーリンクを張ります。

<a>~</a>の間に挟まれた部分にリンクが張られます。 リンク部分は多くの場合下線が表示され、色も変わります。

aタグの開始タグの方に、href属性を記述します。ここに、移動先のパスを指定します。

リンクは文字だけでなく、画像などにも張ることができます。

リンクタグのサンプル

ではリンクタグを使ったサンプルを見てみましょう。

temp.htmlを開いて、HomePageフォルダに「index.html」というファイル名で保存しましょう(下図)

index.htmlの作成

index.htmlというファイル名は、TOPページであると同時に目次にもなります。 実際に目次を作ってみることにしましょう。

index.htmlのbody内に、以下のように記述してみてください。 相対パスを見て、どのファイルにリンクしているか分かるでしょうか?

<a href="text/lesson1.html">ページタイトル</a><br>
<a href="text/lesson2.html">見出しタグ</a><br>
<a href="text/lesson3.html">ページ構成</a><br>
<a href="text/lesson4.html">段落・改行</a><br>

ブラウザで確認すると、以下のようになります↓ (リンク先から戻ってくるには、ブラウザの戻るボタンを利用して下さい)。

リンクが張られた部分は、下線と文字色の変化が確認できると思います。

NINJABUTTON