HTMLの基本タグ3(a)

HTMLとCSS
スポンサーリンク

HTMLをHTMLとして成り立たせているタグであるリンクタグについて実践します。

この記事で紹介するタグ:a

スポンサーリンク

リンクタグのサンプル

表示イメージ

注)文字列「Amazonへ」と「YouTubeへ」はそれぞれクリックすると各サイトに移動します

ファイル名:html03.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>HTMLの基本タグ3</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>HTMLの基本タグ3</h1>

		<h2>リンク集</h2>
		<p><a href="https://www.amazon.co.jp/">Amazonへ</a></p>
		<p><a href="https://www.youtube.com/" target="_blank">YouTubeへ</a></p>
	</body>
</html>

解説

上記サンプルでは、Amazonへのリンクをクリックするとhrefで指定されたURLページへ遷移します。YouTubeへをクリックすると別タブが開いてhrefで指定したURLページに遷移します。

aタグの使い方

基本的な使い方

<a href="リンク先URL">リンク文字列</a>

aタグには終了タグがあります。<a>~</a>でくくられた文字列がサイト上に表示される文字列となり、その文字列をクリックするとhrefで指定したリンク先URLにページ遷移します。ちなみに遷移(せんい)とは、ページ間の移動を意味します。

使用例

<a href="https://www.amazon.co.jp/">Amazonへ</a>

表示イメージ

hrefなどのようにタグの中に記述できる要素を属性といいます。aタグのhref属性のように、そのタグで必須の属性省略してもよい属性などがあります。

targetを使ったターゲット属性の指定

リンクタグにはターゲット属性といって、aタグの属性にtargetを指定するとクリックした際、ページ遷移の方法を指定できます。
一般に外部サイトにページ遷移する際によく利用されるのが、

target="_blank"

です。

使用例)

<a href="https://www.youtube.com/" target="_blank">YouTubeへ</a>

などとすると、YouTubeへをクリックした際、別のタブが開いてYouTubeの画面が表示されます。

リンクタグの注意点

aタグ自体は文字列と同じ扱いなので、pタグなどのブロックレベル要素でくくる必要があります。

<p><a href="https://www.amazon.co.jp/">Amazonへ</a></p>

aタグは、リストタグと組み合わせて用いられることも多いです。

リストタグの要素をリンクにした例

<ol>
	<li><a href="https://www.amazon.co.jp/">Amazonへ</a></li>
	<li><a href="https://www.youtube.com/">YouTubeへ</a></li>
</ol>

表示イメージ

HTMLの根本は、このリンクタグ(aタグ)だと思います。
HTMLのHTの部分(Hyper Textの部分)を体現しているタグが、aタグだと思います。
aタグがあってこそのHTMLと言っては大げさでしょうか?

課題

以下のイメージのような文章の途中にリンクする文字列を作ってみよう。
ファイル名:tenki.html

表示イメージ

リンクタグへの設定情報は以下の通り。

リンク文字列リンク先URL
こちらhttps://weather.yahoo.co.jp/weather/

番号付きリスト(olタグ)とリンクタグ(aタグ)を使って以下のようなリンクサイトを作成してみよう。
ファイル名:osusume.html

【条件】各リンクは、別タブ(ウインドウ)で開くものとする

表示イメージ

リンク文字列URLは以下の通り。(もちろんデータは、皆さんのおすすめサイトベスト3でもOKです)

リンク文字列リンク先URL
GIGAZINEhttps://gigazine.net/
Windyhttps://www.windy.com/
はてなブックマークhttps://b.hatena.ne.jp/
スポンサーリンク
HTMLとCSS
スポンサーリンク
dennouをフォローする
電脳産物

コメント