a要素

記事の内容

a要素

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以外)へ遷移
記事の内容
閉じる