はじめてのWebデザイン『HTML・CSS』入門

2-6. ハイパーリンクを設定するタグ(a)

  • HTML・CSS
  • Webデザイン

HTMLにおいて最も重要な『ハイパーリンク』。ドキュメント同士を繋ぎ合わせ、行ったり来たりすることができる技術です。そもそもHyper Text Markup Langageの「ハイパーテキスト」は、「ハイパーリンクが使える文書」という意味です。

公開日:2019/05/08最終更新日:2019/05/08

1.ハイパーリンクとは何か

ハイパーリンクとはテキスト内に埋め込まれたファイルの参照情報のことで、該当箇所をクリックすると指定されたページに移動したり、ファイルをダウンロードすることができる技術のことです。

ハイパーリンクが生まれる以前の紙でできたドキュメントは、ドキュメント内のキーワードからその内容を参照することができませんでした。それを実現したのがハイパーリンクという技術です。ここまでインターネットが普及したのも、この「ハイパーリンク」という技術があったからと言えるでしょう。

ハイパーリンクは略して「リンク」と呼ばれることも多いです。

2.ハイパーリンク:aタグの使い方

ハイパーリンクは<a>タグで表されます。<a>タグは属性を指定しないと利用することができません。以下の属性を把握しておきましょう。

href属性

リンク先指定する属性です。ファイルだけではなく、ページ内の任意の箇所を指定してページ内リンクさせることもできます。

サンプル:
<a href="https://chot.design">

同じサイト内(フォルダ内)にある場合を指定する場合は https:// のような記述は必要ありません。

target属性

リンク先のページの開き方を指定することができます。

サンプル:
<a href="https://chot.design" target="_blank">

  • _selfを指定すると現在表示されてるウィンドウでページを開きます。通常はこの動作で開かれます。
  • _blankを指定すると新しいウィンドウでリンク先のページを開きます。
  • _topを指定すると、フレーム分割を解除し、ウィンドウ全体でページを開きます。親フレームがない場合は_selftと同じ動作で開かれます。
  • _parentを指定すると、現在表示されてるウィンドウの親フレームを開きます。親フレームがない場合は_selft同じ動作で開かれます。

_topと_parentに関しては、<iframe>要素のときに使われる指定方法なので、特にここでは詳しく説明しません。target属性は特にページの開き方を指定しない場合は、記述しなくても大丈夫です。

3.ハイパーリンクをindex.htmlに記述する

index.htmlの<body>〜</body>内に以下の内容を記述します(前のレッスンで書いたものは消して構いません)

<a href="https://chot.design" target="_blank">choto.design</a>

以下のようにブラウザで表示されます。

ハイパーリンクの表示

表示された文字をクリックすると、新しいタブでchot.designのトップページが開きます。

理解度チェック





はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識



このレッスンの著者