WEBサイト制作

はじめてのHTML~アンカータグ<a>でリンクを貼る方法とCSSデザインサンプル

イメージ

今回はHTMLのリンク(aタグ)について解説していきます。

リンクを設定することで、サイト内の別ページや別サイトに、クリックひとつで移動させることができます。ウェブの世界がこんなにも広がったのは、このリンク機能のおかげとも言えます。リンク、実は相当すごい機能だったりします。

機能はすごくても、貼り方は簡単です!しっかりマスターしましょう。

リンクタグ(aタグ)の書き方

基本的な書き方

書き方イメージ

リンクを設定するには<a>タグを使います。
href(エイチレフ)という属性に、リンク先の値(URLやファイル名)を入れます。
基本はこれだけです。

ちなみに<a>タグのAは、Anchor(アンカー)の略です。船などを繋ぎとめる錨(いかり)のことです。情報同士を繋ぐ・結ぶ役割を担っています。

<a href="aboutus.html">About us</a>

このようにコードを書いてブラウザで表示します。

イメージ

このようになります。

リンク先の指定方法(絶対パスと相対パス)

href属性の値は「相対パス」または「絶対パス」で記述します。初めて聞くと「?」ですが、難しいことではないので、言葉と概念をしっかり覚えましょう。

「パス」は「path」で、道を表します。リンク先までの道・経路ですね。

絶対パス

URLで指定します。URLは(サイトのURLが変更にならなければ)変わらないもの、絶対的なものなので、絶対パスと呼ばれます。

<a href="https://www.yahoo.co.jp/">Yahoo!</a>

URLを貼り付ければいいので簡単ですね。

相対パス

リンク元のページ(リンクのコードを書くページ)を基準にして、リンク先のページがどこにあるかを指定します。自分を元にして相対的な位置を示すので、相対パスと呼ばれます。

パスの書き方

リンク元のページとリンク先のページが同じ階層にある場合、

<a href="aboutus.html">About us</a>

リンク先のページがひとつ上の階層にある場合、

<a href="../map.html">Map</a>

リンク先のページがひとつ上の階層のフォルダ「page」内にある場合、

<a href="../page/page01.html">Sample page</a>

このようになります。
ひとつ上は「../」、さらにその上は「../../」、さらにその上は「../../../」で表します。

ページ内の特定箇所にリンクを貼る

ページ内の任意の箇所にリンクを貼りたい場合はid属性を使います。

リンク先のページ(「aboutus.html」)の任意の箇所にid属性を付け目印を追加します。

<h1>会社概要</h1>
  <h2>ご挨拶</h2>
  ・・・・・・・・・
  <h2>住所</h2>
  ・・・・・・・・・
  <h2 id="contact">問い合わせ先</h2>
  ・・・・・・・・・

ここではid属性の値に「contact」を入れました。
リンク元のページでは次のように指定します。

<a href="aboutus.html#contact">お問い合わせはこちら</a>

「aboutus.html」で指定したidの値にシャープを付けて、「aboutus.html#contact」のように書きます。

これで、リンクをクリックして飛んだ際、ページ内の「id=”contact”」の箇所へページがスクロールします。

別ウィンドウを表示する

書き方イメージ

リンク先のページを表示させるときに別ウィンドウを開かせることができます。他社のページにリンクを貼るときなどに使ったりします。

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

target属性を追加して、値に「_blank」と入力します。
「_blank」は別ウィンドウで開くと

target属性の値
「_blank」のほかに、「_parent(現在のウィンドウの親ウィンドウでリンク先を開く)」「_top(現在のウィンドウの最上位階層のウィンドウでリンク先を開く)」などが指定できますが、フレーム分けしたページを作ったときなどに使うものなので、通常ほとんど使いません。

ファイルをダウンロードさせる

<a href="xxx.pdf" download="xxx.pdf">資料のダウンロードはこちら</a>

資料などをダウンロードさせたいときはdownload属性を追加します。値はダウンロードしたときのファイル名になります。

<a href="xxx.pdf" download>資料のダウンロードはこちら</a>

値は省略することも可能です。

※html5から追加された属性です。IE11では動作しない可能性があります。

CSSを使ってリンクをデザインする

少しだけ、リンクをCSSを使ってデザインしてみます。
書き方や使い方を参考にしてみてください。

<a href="#">Click</a>

このリンク(aタグ)に対してスタイルを適用します。

1.リンク色を指定する

a {
 color: blue; /*リンク色*/
}
a:visited {
 color: purple; /*訪問後のリンク色*/
}
a:hover {
 color: red; /*マウスオーバー時のリンク色*/
}
リンクデザイン1

マウスオーバーしたときは文字色を赤色に、訪問時は紫色に設定。

2.リンクの下線を消す

a {
 color: blue;
 text-decoration: none; /*下線を消す*/
}
a:visited {
 color: purple;
}
a:hover {
 color: red;
 text-decoration: underline; /*下線を付ける*/
}
リンクデザイン2

aタグを付けるとデフォルトで下線が引かれます。それをマウスオーバー時だけ付けるようにしています。

3.ボタン風のデザイン

a {
 background: #ffed8b; /*背景色を変える*/
 border: 2px solid #ffd803; /*枠線を付ける*/
 border-radius: 5px; /*角丸にする*/
 color: #272343; /*文字色を変える*/
 padding: 5px 20px;
 text-decoration: none;
}
リンクデザイン3

CSSを使えばボタン風にデザインすることができます。

4.ホバー時にじんわり色を変える

.a {
 background: #ffed8b;
 border: 2px solid #ffd803;
 border-radius: 5px;
 color: #272343;
 padding: 5px 20px;
 text-decoration: none;
 transition: 0.8s; /*変化を指定*/
}
a:hover {
 background: #ffd803;
}
リンクデザイン4

マウスオーバー時に背景色を変えていますが、その変える時間をtransitionで制御しています。0.8sと書くと、0.8秒で変化させるという記述になります。


今回はHTMLのリンクについて解説しました。ウェブサイトを作る方だけでなく、ブログを書く方にもリンクは使用頻度が高いものです。タグを理解しておくと役立つと思います。

Share