記事の内容
a要素
aタグは、リンク先やページ内に遷移させるために使用されます。
a要素
記法
<a href=”URL”>リンクテキスト</a>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a要素に関して</title>
</head>
<body>
<p>同一ページに遷移</p>
<a href="https://10moji-blog.com/a/">怪しいサイトに飛ばさないからクリックしてね♡</a>
</body>
</html>出力結果
同一ページに遷移
怪しいサイトに飛ばさないからクリックしてね♡属性値(id/class以外)
記法
<a 属性=”属性値”></a>
target
target属性は、[_blank][_self][_parent][_top]の4種類がありますが
基本的に[_blank]以外は使用する事があまりないので説明書きのみにします。
| 種類 | 説明 |
|---|---|
| _blank | リンクを新しいウィンドウまたはタブで開く |
| _self | リンクを現在のウィンドウまたはフレームで開く（デフォルト値） |
| _parent | フレームが使用されている場合、親フレームでリンクを開く |
| _top | すべてのフレームを無視し、リンクを最上位のウィンドウで開く |
target属性
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a要素(target属性)に関して</title>
</head>
<body>
<p>別タブで開きます</p>
<a target="_blank" href="https://10moji-blog.com/a/">target(_blank)について</a>
</body>
</html>出力結果
別タブで開きます
target(_blank)についてdownload
属性に指定できる値は、リンク先のリソースのファイル名です。
※ファイル名にはファイル拡張子も含めることができる
download属性
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a要素(download属性)に関して</title>
</head>
<body>
<p>画像が取得できます</p>
<a href="https://10moji-blog.com/wp-content/uploads/2023/10/pank_20231018.png" download="パンク師匠.jpg">ダウンロード画像</a>
</body>
</html>出力結果
画像が取得できます
ダウンロード画像
アンカータグ
アンカータグは、ページ内のid属性に遷移できるリンクになります。
アンカータグ
記法
[クリックリンク]
<a href=”#アンカー名”>テキスト</a>
[遷移先]
<タグ id=”アンカー名”>テキスト</タグ>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>a要素(アンカータグ)に関して</title>
</head>
<body>
<p>属性値(id/class以外)に[id="attribute"]と記載</p>
<a href="#attribute">属性値(id/class以外)</a>
</body>
</html>出力結果
属性値(id/class以外)に[id=”attribute”]と記載
属性値(id/class以外)へ遷移