【 HTML入門 】aタグを使ってテキスト・画像リンクを貼ろう

今回は、WEBサイトやブログを作る時にものすごくお世話になる、HTMLのaタグについて解説します。

CSSでリンクのデザインを変える方法や擬似クラスの使い方も記事内でお伝えしますので、是非最後までお読みください。

aタグとは？

ハイパーリンクを指定します。

aタグではさむことで、文字でも画像でもリンクにすることができます。

HTML

<a href="https://web-emo.com/">トップページへ！</a>

<a href="https://web-emo.com/"><img src="logo.jpg"></a>

以下のように、文章内にaタグを入れることもできます。

HTML

<p><a href="https://web-emo.com/">こちら</a>をクリックしてください！</p>

属性について

href

ハイパーリンク先のURLを指定します。

リンク先のURLは開始タグの中にhref="リンク先のURL"という形で書きます。

target

リンク先の開き方を指定します。

新しいタブやウィンドウでリンク先を開かせたい時は、target="_blank"を使います。
例えば、別リンクで当サイトのトップページを開かせたい時には以下のように記述します。

HTML

<a href="https://web-emo.com/" target="_blank">トップページへ</a>

関連するCSSプロパティ

text-decoration

デフォルトでは、リンクテキストには下線が引かれます。

この下線を消すには、text-decoration: noneを指定します。

HTML

<a href="https://web-emo.com/">トップページへ</a>

CSS

a{
  text-decoration: none;
}

color

リンクテキストの色を変えます。

変更する時は、リンクと分かるようにできるだけ青系の色にしましょう。

HTML

<a href="https://web-emo.com/">トップページへ</a>

CSS

a{
  color: #00a3d3;
}

関連するCSS擬似クラス

hover

テキストリンクや画像リンクにカーソルを重ねた時の変化を指定します。

以下の場合、カーソルを重ねるとテキストリンクが、半透明になります。

HTML

<a href="https://web-emo.com/"><img src="logo.jpg"></a>

CSS

a:hover{
  opacity: .5;
}

visited

訪問済みのリンクのデザインを変えます。

以下の場合、訪問済みのテキストリンクの色が、赤になります。

HTML

<a href="https://web-emo.com/">トップページへ</a>

CSS

a:visited{
  color: red;
}

まとめ

aタグについての記事、いかがでしたでしょうか。

HTML関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。