サイト制作やブログに欠かせないアンカーリンクの使い方をわかりやすく説明します。
ページ遷移リンクを貼る以外にも、電話をかける、メールフォームを起動するなど、
便利な機能がたくさんあります。
目次
aタグ（アンカーリンク）基本の使い方
<a href="https://sample.com">リンクテキスト</a>
アンカーリンクは、aタグでリンクを作成します。
その中には、さまざまな属性を入れることができます。
知っておきたいアンカーリンクの属性
href
<a href="https://sample.com">リンク先へ飛びます。</a>href（エイチレフ）属性は、リンク先を指定します。
リンクを作成する時に使います。
rel
<a href="#" rel="nofollow">リンクテキスト</a>rel（レル）属性は、リンクのタイプを指定します。
広告リンクを貼るときや、Lightboxを作成する時に使います。
nofollowとは
検索エンジンにリンク先をクロールさせたくない時に使用します。
例えば、有料リンクやUGC（口コミやレビューなどの一般ユーザーによって作られたコンテンツ）など、そのリンクをフォローすることでサイトへの影響がありそうな時に使用します。
target
<a href="https://sample.com" target="_blank">別タブで開きます。</a>target（ターゲット）属性は、リンクの表示方法を指定します。
外部リンクを、別タブで表示させる時などに使用します。
HTML・CSSでリンクを作る
リンクの下線を消す
a {
text-decoration: none;
}リンクテキストの色を変える
a {
color: red;
}リンクにマウスを乗せたときに色を変える
テキストリンク → テキストリンク
※マウスをかざしてみてください。
a:hover {
color: red;
}さまざまなリンクを作る
画像にリンクを貼り付ける
※マウスをかざしてみてください。
<a href="#"><img src="sample.jpg" alt=""></a>画像をaタグで囲ってあげることで、
画像にリンクをつけることができます。
（画像にマウスをかざすとポインターが指に変わり、画像がリンクになっていることがわかります）
リンク付きボタンを作る
※マウスをかざしてみてください。
<a href="#">ボタン</a>a {
background: green;
padding: 15px 30px;
border-radius: 5px;
color: #fff;
text-decoration: none;
}
a:hover {
background: rgb(82, 185, 82);
}電話発信
※サンプルの電話番号です。
<button>
<a href="tel:08000000000">今すぐ電話</a>
</button>電話発信リンクは、PCの時はつけない設定をCSSに記述します。
//PCでは、電話発信イベントをつけない
a[href^="tel:"] {
pointer-events: none;
}
//スマホの時だけ電話発信イベントをつける
@media (max-width: 767px) {
a[href^="tel:"] {
pointer-events: auto;
}
}メールフォーム起動
※サンプルのメールアドレスです。
<a href=”mailto:sample@gmail.com”>メール</a>ダウンロードリンク
<a href="/images/sample.jpg" download="sample.jpg">ダウンロード</a>内部リンク
<header>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#menu">MENU</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</header>
<section id="about">
ABOUT...
</section>
<section id="menu">
MENU...
</section>
<section id="contact">
CONTACT...
</section>