ikidishiki
HTML

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

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

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

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

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タグの様々な使い方

ボタンを作る

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

とはいえ、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を適用してね』ということになります。

まとめ

  • aタグはリンクを作るもの
  • 文章にさりげなく挿入するには前後に文章を書けばOK
  • ボタンを作る
  • ホバーで動きをつける

基本的にaタグの正しい使い方は、リンクを挿入したい時です。

別のページへ誘導したいなという時は、aタグを使ってみましょう。

よく読まれている記事
RELATED