[#の意味は?] aタグとは? 使い方・色の付け方・ボタンにする方法も分かりやすく解説!

a要素について知りたい人

a要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • a要素とは?
  • a要素の使い方
  • a要素のSEO対策ポイント

Webサイトを作っているとページ内にリンクを設置する機会がとても多いです。

リンクを設置するときに使うものがa要素です。

HTMLのa要素はよく使う要素の一つです。

a要素はanchorの略で文章、画像などの指定した要素をハイパーリンクにすることができます。

そこでこの記事ではa要素について解説していきます。

よく使用する要素の一つなのでしっかりと理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

a要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)

1.a要素とは? 読み方は?

a要素はanchorの略でWebサイト内のテキストをクリックしたら、他のページへリンクしてくれる要素です。

読み方は「エーヨウソ」です。

a要素で囲った部分はブラウザ上では青色になって下線が引かれます。

基本はリンク設定のみですが、target属性やhreflang属性などSEO対策でしっかりと押さえておくポイントもあります。

よく使用する要素の一つなのでしっかりと理解して使い方をマスターしておきましょう!

使用できる属性

  • href:リンク先のURLを指定できる
  • target:リンクアンカーの表示先を指定できる
  • download:ブラウザに対してリンク先をダウンロードすることを表します
  • hreflang:リンク先の文書の記述言語を表します
  • ping:指定されたURLに対してPOSTリクエストをバックグラウンドで送信します
  • rel:現在の文書からみたリンク先となるリソースの位置づけを表します
  • type:リンク先のMIMEタイプを指定します
  • referrerpolicy:リンク先にアクセスする際にアクセス元のURL情報を送信するかどうかを指定します




2.a要素の使い方

a要素を使う際にセットで使うものがhrefです。

hrefはhypertext referenceの略で、日本語に訳すとハイパーテキストの参照となります。

読み方は「エイチレフ」です。

それではa要素の基本的な使い方をみていきましょう。

a要素の基本的な使い方

<a href="リンク先のURL">テキストや画像</a>

基本的に<a>と</a>の間にテキストや画像を挿入します。

<a>と</a>の間にあるものはアンカーテキストと呼ばれます。

同じ文書内の特定部分にとびたい場合、「href=”#”」で!

「href=”#”」とすると同じページの特定部分へ飛ぶことができます。

<a href="#a">aの位置へ飛ぶ</a>

<h2 id="a">aの位置</a>

リンクの到達点となる任意の要素にidを付けます。

上記の例では、h2要素にaというid名を指定しています。

リンク元の「 href=””」 には到達点のid名をハッシュに続けて記述します。

このaという名前がリンク元とリンク先を結びつけることになります。

色の付け方

a要素のリンク文字色はデフォルトが青色となっています。

ユーザーにとってリンクは青色と認識されていることが多いので色を変えるのはあまりオススメしませんが、デザインを凝りたいという方もいます。

そんな方向けにリンク文字色の変え方をご紹介したいと思います。

未訪問のリンク色設定にはaの後に「:link」を付け、「a:link」と設定します。

a: link {
 color: orange;
}

訪問済みのリンク色設定にはaの後に「:visited」を付け、「a:visited」と設定します。

a: visited {
 color: green;
}

マウスを乗せた時のリンク色設定にはaの後に「:hover」を付け、「a:hover」と設定します。

a: hover {
 color: red;
}

クリックした時のリンク色設定にはaの後に「:active」を付け、「a:active」と設定します。

a: active {
 color: blue;
}

aタグをボタンにする方法

aタグをボタンとして使えないと誤解されている方もいらっしゃいますが、CSSでボタンにすることができます。

aタグの子要素にbuttonタグを入れてボタンを作ってはいけないというきまりなのでそこのところは注意しておきましょう

以下はHTMLのソースコードです。

<a href="リンク先のURL" class="button">ボタン</a>

以下はCSSのソースコードです。

.button {  
 display: inline-block; 
 margin: 1em 0;
 padding: 0.5em 1em;
 color: white;
 text-decoration: none;
 background: blue;
 border-radius: 3px;
}




3.a要素のSEO対策ポイント

a要素はSEO対策にも重要です。

SEO対策という観点から気をつけるポイントを見ていきましょう。

アンカーテキストはユーザーがクリックしやすいワードを入れる

ユーザーがクリックしてもらうためには興味がわくようなアンカーテキストにする必要があります。

しかし、過度にあおる文章、説明不足な文章にならないように注意しましょう。

アンカーテキストに含まれる文章は検索エンジンのページ把握に用いられるのでSEO対策上、重要です。

クリックしてもらいやすい文章をしっかりと考えましょう!

画像リンクの際はalt属性を入れる

検索エンジンのクローラーは画像がどのような内容か把握するのが難しいです。

alt属性を用いてどのような画像が情報をしっかりと挿入しておきましょう。

これにより検索エンジンにどのような画像なのかを伝えることができます。

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?