メニュー

HTMLでリンクを作成するaタグの書き方や使い方

HTML
当ページのリンクには広告が含まれています。
html
  • URLをコピーしました！
生徒

HTMLのaタグの使い方がちゃんと理解できていないです

先生

aタグの基本的な書き方や設定内容について説明します

目次

aタグについて

WEBページにリンクを作成するにはHTMLのaタグを使用します。

この記事では、aタグで他の場所へのリンクを作成する方法について説明します。

この記事でわかること
  • HTMLのaタグの書き方や使い方
この記事で分かること
  • HTMLのaタグの書き方や設定内容、表示を変更する方法など

aタグの書き方

aタグの基本的な書き方は以下になります。

aタグの主な属性には、hrefとtargetがあります。

href属性はリンク先を指定

href属性には以下のようなリンク先を記述します。

  • URL（https://example.com など）
  • 同じサイト内の相対パス（/blog、/home/index.html など）
  • 同じページ内の要素のID（#menu など）

hrefはつづりを忘れやすいですがHypertext Reference(ハイパーテキストリファレンス)の略です。

URL（絶対パス）を指定

href属性にURLを記述することで、そのURLへのリンクを作成できます。

/* 指定したURLへのリンク */
<a href="https://example.com">他サイトへのリンク</a>

同じサイトへのリンクをURLの絶対パスで書くことも普通によくあります。

同じサイト内の別のページを相対パスで指定

href属性に相対パスを記述することで、同じサイト内の別の場所やファイルへのリンクを作成できます。

/* 現在のページからの相対パスでのリンク */
<a href="/home/index.html">トップページに戻る</a>

同じページ内の要素のidを指定

href属性に同じページ内の用土のid属性の値を記述することで、同じサイト内の別の場所やファイルへのリンクを作成できます。

<h1 id="page__title" >
（省略）
/* 指定したIDを持つ要素の位置に移動するリンク */
<a href="#page__title">ページの先頭に移動</a>

href=”https://example.com/index.html#page__title”といったように、他のサイトやページの要素を指定することもできます。

target属性はリンクの開き方を指定

target属性はリンクをクリックした時の開き方を指定します。

_blankは新しいウィンドウでリンク先を開く

target="_blank"を指定すると、ブラウザの新しいウィンドウが開いてリンク先を表示します。

/* ブラウザの新しいウィンドウを開いてリンク先を表示 */
<a href="https://example.com" target="_blank" >新しいウィンドウで開く</a>

_selfは現在のウィンドウでリンク先を開く

target="_self"を指定すると、ブラウザの現在のウィンドウの内容がリンク先に変わります。

/* 現在のウィンドウでリンク先を表示 */
<a href="https://example.com" target="_self" >リンク先に移動</a>

訪問済リンクの文字色を変えたくない

aタグのリンクの文字色は青色ですが、リンク先に既に訪問したことがある場合、ブラウザによって紫色で表示されます。

勝手に文字色が変わってしまうのがデザイン上邪魔な場合はCSSで文字色の指定します。

  • aタグの文字色を変える
  • 訪問済のaタグの文字の色を変える

aタグの文字色を指定する

aタグの文字の色をCSSで指定すると、訪問済のリンクも含めてすべて指定した文字色で表示されます。

/* aタグのリンクの文字色をすべて指定した色にする */
a {
    color: #cccccc;
}

訪問済のaタグの文字色を指定する

擬似クラス:visitedを指定することで、タグの訪問済のリンクの文字色だけを指定することもできます。

/* 訪問済のaタグのリンクの文字色を指定する */
a:visited {
    color: #cccccc;
}

aタグの文字に表示される下線を消したい

aタグのリンクの文字には、ブラウザによって下線が表示されます。

この下線を消すためには、CSSで以下の設定を行います。

/* 訪問済のaタグのリンクの文字色を指定する */
a {
    text-decoration: none;
}

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

リンクを親要素いっぱいのサイズにしたい

aタグは幅や高さのサイズを持たないため単に配置した場合、aタグ内の文字列しかリンクになりません。

メニューなどで、操作しやすいように親要素内はすべてリンクとするにはCSSでの設定が必要です。

方法１．aタグをline-heightで親要素と同じ高さにする

aタグにdisplay: block;を指定した上で、line-heightで親要素と同じ大きさを指定します。

<div class="center1" >
  <a href="https://example.com">親要素内のすべてがリンク</a>
</div>
div {
  height: 80px;
  width: 200px;
  background: #ccc;
}
.center1 > a {
  display: block;
  text-align: center;  
  line-height: 80px;
}

方法２．aタグにdisplay: flex;を指定してaタグの内容を中央に配置する

aタグをdisplay: flex;でFlexboxにしてjustify-content: center; align-items: center;で内容を上下左右の中央に配置するよう指定した上でheight: 100%にします。

<div class="center2" >
  <a href="https://example.com">親要素内のすべてがリンク</a>
</div>
div {
  height: 80px;
  width: 200px;
  background: #ccc;
}
.center2 > a {
  display: flex; 
  justify-content: center;
  align-items: center;
  height: 100%;
}

方法３．aタグにdisplay: table-cell;を指定してaタグを中央に配置する

親要素にdisplay: table;を指定した上で、aタグにdisplay: table-cell;とtext-align: center; vertical-align: middle;を指定します。

See the Pen a_block by mik20621 (@mik20621) on CodePen.

方法４．親要素とaタグのpositionプロパティを指定する

aタグと親要素にpositionプロパティを指定して同じ位置にした上で、aタグのサイズを親要素と同じ大きさにする方法です。

  • 親要素にposition: relative;子要素の aタグにposition: absolute;を指定すると、aタグの位置が親要素と同じ位置になります。
  • 子要素のaタグにwidth: 100%; height: 100%;を指定して親要素と同じ大きさにします。
  • aタグの文字を中央にするためにdisplay: flex;とjustify-content: center; align-items: center;を指定します。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

HTML
よかったらシェアしてね！
  • URLをコピーしました！
目次