HTMLのaタグとは？使い方や属性をわかりやすく解説

トモジ

HTMLのaタグって何？
意味と使い方を知りたい！

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、HTMLのaタグに関して要点をわかりやすく説明しております。

1.HTMLのaタグとは

HTMLのaタグ(エータグ)とは、
別のHTML文書へジャンプするためのタグで
ジャンプする事を
ハイパーリンクやアンカータグと言います。

aタグの書き方

リンク先の情報は、
開始aタグ内にhref(エイチレフ)を記述します。

<a href="https://10moji-blog.com/what-is-atag/">aタグについてのページ</a>

リンクの開き方を制御する方法

開始aタグ内に
target(ターゲット)属性を記述することにより
aタグをクリックした後にブラウザでページがどのように開くかを制御する事ができます。

<a href="https://10moji-blog.com/what-is-atag/" target="_blank">aタグについてのページ(_blankの場合)</a>

<a href="https://10moji-blog.com/what-is-atag/" target="_self">aタグについてのページ(_selfの場合)</a>

<a href="https://10moji-blog.com/what-is-atag/">aタグについてのページ(記述なしの場合)</a>

必要な箇所にtarget=”_blank”を使うようにする

ページ内リンク

aタグはページ内でも問題なく
リンク先へジャンプする事ができます。
下記のリンクは同じページ内のトップタイトルへ
ジャンプするように設定しています。

上記のページ内リンクのやり方

<h2 id="top-h2">1.HTMLのaタグとは</h2>

<a href="#top-h2">トップタイトルの位置へジャンプする</a>

aタグで挟み込めばなんでもリンクに変身

aタグは、動画や画像・作成したエリアなど色々な箇所をリンクボタンに変身させる事ができます。
主に画像が多いので画像を押した時にリンク先にジャンプするコードを確認しましょう。

画像リンクに関して

<a href="https://10moji-blog.com/what-is-atag/">
　　<img src="https://10moji-blog.com/wp-content/uploads/2020/07/title-rogo.png">
</a>

ブラウザ表示

2.CSSでaタグのデザインを色々変更

今回のCSSはaタグでよく使用される装飾を紹介したいと思います。

aタグの下線を消す

aタグのブラウザ表示部分に記載した文字は
デフォルトでは下線が入ってしまい、
リンクとしてはわかりやすいのですが
デザイン的に消したい場合もあります。

リンク下線を消す場合は、
CSSで[text-decoration:none;]を使用しましょう。

<a href="https://10moji-blog.com/what-is-atag/">aタグについてのページ</a>

a {text-decoration:none;}

リンクの色を変える

aタグのリンクはデフォルトで青色になのですが、リンク色を変更することができます。

リンクの色を変更する場合には、
CSSで[color: 変更したい色;]を使用しましょう。

<a href="https://10moji-blog.com/what-is-atag/">aタグについてのページ</a>

a {
 text-decoration:none;
 color: red
}

カーソルを合わせた時にデザインを変化

カーソルを対象物に合わせた時に
変化させる事をhover(ホバー)といい
動きのあるデザインに変化させる事ができます。

書き方は[a:hover{CSSの設定}]と記述します。

あわせて読みたい

CSSのhoverと擬似クラスに関して本記事は、上記のような方に向けて記事を書いています。こんにちは、トモジです。私はプログラミング未経験から独学で勉強して、簡易的な動的サイト・ゲーム・サービス…

不透明度を変更[opacity効果]

opacity(オパシティ)の設定は1〜0までの設定ができ、0が完全に透明な状態になります。

<a href="https://10moji-blog.com/what-is-atag/">aタグについてのページ</a>

a {text-decoration:none;}

a:hover{
 opacity:0.5;
}

時間経過で変化させる[transition効果]

transition-property(トランジション-プロパティ)は様々なアニメーションに関わるプロパティになります。

今回は実行にかかる所要時間を指定するduration(デュレイション)の設定をしていきます。
※末尾のsは秒を意味する

<a href="https://10moji-blog.com/what-is-atag/">aタグについてのページ</a>

a {text-decoration:none;}

a:hover{
 color: red;
 transition-duration:1s;
}

まとめ

最後にこの記事のポイントをまとめておきます。