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

ブログランキング

記事が参考になったら応援クリックしていただけると励みになります。


にほんブログ村 IT技術ブログ WordPressへ