【HTML】リンクを作るアンカータグの使い方の基本とスタイルシートの関係

HTMLのハイパーテキストとは、特定の単語に関連したテキストがつながっており、クリックするだけでそのテキストが読めるのが特徴です。

そして、それを実現する機能がリンクであり、HTMLではアンカータグで設定します。

ここでは、HTMLの基本であるアンカータグを使ったリンクの作り方、およびスタイルシートの設定について解説します。

リンクを作るタグの基本

HTMLの中に外部のWebページやテキストへのリンクを作るのに、アンカータグを使います。

なお、リンクの語源になったlinkをそのまま使うlinkタグもありますが、これは主にスタイルシートを読み込むために使われるタグで、今回紹介するリンクとは関係ありません。

まずは、リンクを作るためのアンカータグの基本についてご紹介します。

アンカータグの使い方

先ほども簡単に触れたように、HTMLで別のWebページやPDFなどの他のファイルへのリンクを作るtタグは、アンカータグです。

なお、アンカーとは英語のanchorのことで、元は船を繋ぎとめておくいかりを意味する言葉ですが、固定するという意味でも使われます。

さらに、ワープロなどで、図に関連付けされたテキストを移動させると、テキストに合わせて図もいっしょに動きますが、これをアンカーと呼びます。HTMLのアンカーも、このような何かと繋がったものとして使われます。

そして、アンカータグでは幾つかの属性が使えますが、その中で必須なのがref属性であり、リンク先のWebページやPDFなどの他のファイルを指定します。

ポテパンダの一言メモ

アンカータグの基本

<a href=”リンク先のURL” >クリック対象の文字列や画像</a>

シンプルなアンカータグの使用例

<a href="https://style.potepan.com/">働くエンジニアマガジン「ポテパンスタイル」</a>

スタイルシートを適用する

アンカータグで作るリンクの文字の色はHTMLの標準で決められており、どのWebブラウザを使っても同じ色です。

しかし、それではWebページのデザインと合わないこともあります。そのような場合、今使われているHTMLのバージョン5では、リンクで使われる文字の色をスタイルシートで指定します。

スタイルシートでは、全てのアンカータグに適用する書き方もできますが、id属性またはclass属性を設定し、そのアンカータグだけに適用させることも可能です。

そのため、アンカータグでは、よくid属性またはclass属性を指定します。

id属性を使ったアンカータグの例

<a id="potepan_link" href="https://style.potepan.com/">働くエンジニアマガジン「ポテパンスタイル」</a>

Webブラウザでの開き方を指定する

アンカータグでは、Webブラウザによるリンク先の開き方を指定できます。そして、その際に設定するがtarget属性であり、指定できるのは次の4つです。

• _self：現在のウィンドウで開く
• _parent：現在のウィンドウの親ウィンドウで開く
• _top：現在のウィンドウの最上位階層のウィンドウで開く
• _blank：新しいタブやウィンドウで開く

なお、親ウィンドウと子ウィンドウの関係の無いWebページで_parentが指定されていたり、階層構造のないWebページで_topが使われた場合は、_selfと同じく現在のウィンドウで開きます。また、target属性を指定していない場合も、_selfが指定されたのと同じです。

新しいウィンドウでリンク先を開く例

<a href="https://style.potepan.com/" target="_blank">働くエンジニアマガジン「ポテパンスタイル」</a>

リンクの作り方

次から、HTMLで利用できる要素毎に、アンカータグを使った具体的なリンクの作り方について解説します。

テキストを使った例

HTMLでよく使われるリンクは、特定の文字列をクリックすると、それに繋がったいるリンク先のWebページを表示するタイプです。

文章の中で使われたり、リストとして並べられたりと、いろいろな使われ方をします。

このようなリンクの作り方は、アンカータグのhref属性にリンク先のWebページなどを記載し、クリックしてほしい文字を囲みます。

また、先ほど解説したように、href属性の他に、id属性やtarget属性を追加することも可能です。

テキストを使ったリンクの例

<a href="リンク先.html" class="sample" target="_blank">リンク先</a>

画像を使った例

先ほど解説したアンカータグで囲む文字の代わりに、画像を指定することも可能です。そして、この場合、アンカータグの中に、画像を表示するためのimgタグを設定します。

画像を使ったリンクの例

<a href="リンク先.html"><img src="リンク先の画像.jpg"></a>

また、アンカータグは複数の要素を囲めるので、画像と文字をまとめてクリックできるリンクを作ることも可能です。

画像と文字を使ったリンクの例

<a href="リンク先.html"><img src="リンク先の画像.jpg"><br>リンク先はこちら</a>

クリッカブルマップを使ったリンクの例

クリッカブルマップとは、Webページに表示された画像の特定の場所をクリック対象とすることで、その場所をマウスでクリックすると、リンク先のWebページが開くHTMLの機能の一つです。

クリッカブルマップを作るには、まず、ベースになる画像を用意し、その画像からマウスでクリックしたい場所の座標を決めます。

そして、imgタグで画像を表示し、mapタグが認識するusemap属性を指定します。続いてmapタグでクリッカブルマップの利用を宣言し、areaタグでマウスでクリックする座標と、その場所とリンクされているWebページを指定します。

クリッカブルマップの例

<img src="ベースになる画像" usemap="#マップ名">
<map name="マップ名">
<area shape="クリック可能な形状" coords="座標" href="リンク先のWebページ">
</map>

div要素を使った例

div要素は、Webページ内の配置位置を設定する際によく使われる枠のような要素で、その中にテキストや画像など複数の要素を入れられます。

そして、HTMLのバージョン5では、このような複数の要素を含んだdivタグをアンカータグで囲う要素として利用できます。

div要素を使ったリンクの例

<a href="リンク先.html">
 <div id="linked_target">
  <img src="リンク先の画像1.jpg">
  <img src="リンク先の画像2.jpg">
  <p>リンク先はこちら</p>
 </div>
</a>

スタイルシートで操作できるリンクの機能

リンクが設定された文字の色はHTMLの標準で決められており、どのブラウザで表示しても同じ色です。しかし、先ほど触れたように、この色はスタイルシートに設定することで変更できます。

Webページのデザインによっては、標準の色が合わない、というケースはよくあることです。そのような場合は、スタイルシートに設定し、デザインに合った色に変えましょう。

また、アンカータグで使えるスタイルシート設定可能な機能は他にもあるので、次からリンクに関する代表的なスタイルシートの設定について解説します。

リンクの文字の色を変える

リンクを設定するアンカータグには4つの状態があり、この中でよく使われるのは、未訪問のリンクの設定と訪問済みのリンクの設定です。

リンクが設定された文字の色、および、以前アクセスしたことのあるリンクの文字の色は、HTMLの標準で決められているので、どのブラウザで表示しても同じ色です。

そして、この色は、先ほどの「a:link」や「a:visited」のスタイルを変えることで、違う色に変更できます。

未訪問および訪問済のリンクの色を指定するスタイルシートの例

a:link {
  color: blue;
}
a:visited {
  color: green;
}

この方法を使えば、文字の色だけでなく太さや大きさも変えられます。デザインに合わせて、いろいろ工夫してみてください。

マウスがのったら画像を切り替える

アンカータグの「a:hover」は、マウスがのったことを検知して、設定されているスタイルを適用します。

そして、これを利用することで、リンクが設定されている画像の上にマウスがのったら、違う画像に切り替えて表示させることが可能です。

なお、図形を切り替える方法としては、図形の半分だけ表示するようにし、通常は左側を表示し、マウスがのったら右側を表示する方法や、2枚の画像を用意して重ねておき、通常は上の画像を表示し、マウスがのったら上の画像を透明にして下の画像を表示する方法などがあります。

まとめ

これまで解説したように、HTMLのアンカータグで外部ファイルを指定するリンクを作るのは簡単です。しかし、リンクで作れるのは、そういったシンプルなリンクだけではありません。

スタイルシートを活用したり、リンクでクリックする対象に画像を使うことで、いろいろな使い方が可能です。ぜひ、このようなリンクの使い方をマスターし、Webページのデザインに活かしてください。