【HTML】aタグの使い方〜応用までを解説

aタグの使い方を知りたいな。aタグでできることって何？

この記事では、aタグの使い方から応用までを解説しています。

ぜひ参考にしつつ、あなたのサイトで活用してみてください。

1. aタグの基本的な使い方
- 1.1. aタグはリンクを作るもの
- 1.2. 文章にさりげなく挿入
2. aタグの様々な使い方
- 2.1. ボタンを作る
- 2.2. ホバーで動きをつける
3. まとめ

aタグの基本的な使い方

まずは『aタグ』の基本から覚えていきましょう。

aタグはリンクを作るもの

テキスト

aタグは、上記のようにリンクをつけます。HTMLでは

HTML


<a href="https://cocoro-re.com/">テキスト</a>

書き方


<a href="ここにURLを書く">テキスト</a>

href="URL"にリンクのURLを書き、URL先へ飛ばす役割があります。

文章にさりげなく挿入

このブログの名前は、IKIDISHIKI（いきぢしき）です。

上記のように文章と文章の間に書くことができます。

書き方


<p>このブログの名前は、<a href="ここにURLを書く">IKIDISHIKI（いきぢしき）</a>です。</p>

aタグの様々な使い方

ボタンを作る

IKIDISHIKIへ

ボタンを作ることも可能です。

とはいえ、CSSを使わないとできないことですので、上を例にすると

HTML


<div class="button">
<a href="https://cocoro-re.com/">IKIDISHIKIへ</a>
</div>

CSS


.button a {
    display: inline-block;
    padding: 1em 1.5em;
    color: #fff;
    background: #ff8c8c;
    font-weight: 800;
    border-radius: 100px;
}

これだけでできます。

.buttonの子孫セレクタ『a』のみに対して、CSSを適用しています。

ちなみにマウスを乗せたら、下に沈む動きは次で解説します。

ホバーで動きをつける

マウスを乗せると沈みます

この方法は、CSSの『hover』というものを使います。

実際のCSSはこちら

CSS


.button a:hover {
    box-shadow: 0 0;
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
    transition: .3s;
}

hoverを適用させたい要素に:hoverをスペース無しで続けて書きます。

ここではaタグに足して、hoverをしていますよね。

つまり、『.buttonのaにマウスが乗ったら{}内のCSSを適用してね』ということになります。