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



aタグの基本的な書き方や設定内容について説明します
WEBページに他の場所へのリンクを作成するのに使用するHTMLのaタグの基本的な内容について説明します。
- HTMLのaタグの書き方や設定内容、表示を変更する方法など
aタグの書き方
aタグの基本的な書き方は以下になります。


aタグの主な属性には、href
とtarget
があります。
href
属性はリンク先を指定
href
属性には以下のようなリンク先を記述します。
- URL(https://example.com など)
- 同じサイト内の相対パス(/blog、/home/index.html など)
- 同じページ内の要素のID(#menu など)
URL(絶対パス)を指定
href
属性にURLを記述することで、そのURLへのリンクを作成できます。
/* 指定したURLへのリンク */
<a href="https://example.com">他サイトへのリンク</a>
同じサイト内の別のページを相対パスで指定
href
属性に相対パスを記述することで、同じサイト内の別の場所やファイルへのリンクを作成できます。
/* 現在のページからの相対パスでのリンク */
<a href="/home/index.html">トップページに戻る</a>
同じページ内の要素のidを指定
href
属性に同じページ内の用土のid
属性の値を記述することで、同じサイト内の別の場所やファイルへのリンクを作成できます。
<h1 id="page__title" >
(省略)
/* 指定したIDを持つ要素の位置に移動するリンク */
<a href="#page__title">ページの先頭に移動</a>
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での設定が必要です。
方法1.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;
}
方法2.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%;
}
方法3.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.
方法4.親要素と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.
WEBエンジニアを目指すなら DMM WEBCAMP がおすすめ
HTMLやCSSは独学でも学ぶことができますが、実務レベルのWEBエンジニアのスキルを身につけるにはスクールに通う方が効率がいいです。
DMM WEBCAMP は大手企業のサービスで信頼性が高く、現役エンジニアによるマンツーマンの学習サポートとにより 即戦力のスキルを身につけることが可能でおすすめです。

