HTMLの<a>タグの設定方法の備忘録

HTMLのaタグの使い方がちょっと分からなくなったので備忘録的にまとめます。

＜基本的な使い方＞

<a href="URL">リンク</a>

＜<li>で使う場合＞

<ul>
    <li><a href="URL01">リンク01</a></li>
    <li><a href="URL02">リンク02</a></li>
    <li><a href="URL03">リンク03</a></li>
</ul>

ulの下はliという事になっているらしいので、liの中に書きます。
なお、li内めいっぱいのクリックエリアが欲しい場合は、cssでaタグをブロック要素にして広げるらしいです。

li a {
    display: block;
}

＜下線が勝手につくのだけれど＞

消したい時はCSSでデコレーション無しを指定します。

a {
    text-decoration: none;
}

＜aタグは未クリック、クリック時、ジャンプ済み、で色が勝手に変わるのだけれど＞

CSSで色を変更出来ます。

/* リンク */
a:link {
    color: #0000EE;
}

/* ジャンプ（訪問）済み */
a:visited {
    color: #551A8B;
}

/* アクティブ（リンク処理を開始した時） */
a:active {
    color: #FF0000;
}

あと a:hover{***} でホバー時の色も変更出来ます。
a:focus{***}（キーボード等でフォーカスした時）もあるようです。

＜リンク先を別窓開いて表示したいのだけれど＞

target="_blank" を指定しておくとリンク先が別窓で開きます。

<a href="URL" target="_blank">リンク</a>

targetの内容で、親コンテキスト（多分表示元）やiFrameも指定できるようです。

＜aタグからスクリプトを起動したいのだけれど＞

aタグかその親にonclick=""を入れておくか、イベントリスナーをスクリプト上から設定しておきます。

onclickで起動

<a href="#" onclick="jsFunction01()">リンク01</a>

<script>
    function jsFunction01() {
        alert("リンク01をクリックしたよね！");
    }
</script>

イベントリスナーを設定

<a href="#" id="link02">リンク02</a>

<script>
    function jsFunction02(event) {
        alert("リンク02をクリックしたよね！");
	console.log(event);
    }

    // イベントリスナー設定
    document.getElementById('link02').addEventListener('click', jsFunction02);
</script>り

リスナーの起動関数は無名のアロー関数を設定してその中で別関数を起動するとかも出来そうです。

＜あの今のページや開いたリンク先で勝手にスクロールさせるやつ＞

アンカーは hrefに#付けてID名を指定する事で使えます。
IDが指定されている要素まで瞬時にスクロールします。

<a href="#targetID">アンカーリンク</a>

<a href="URL#targetID">リンク＆アンカーリンク</a>

CSSで html{scroll-behavior: smooth;} という感じでhtml要素に指定しておくとなめらかスクロールさせる事も出来るようです。

＜ファイルをダウンロードさせたいのだれけど＞

download属性を付けておくとブラウザで開かずにダウンロード遷移にできます。

<a href="FileURL" download>ファイル</a>

何か追記事項あったら更新するかもしれません。