aタグのhref属性を使いこなす！再読み込み(href=””)、ページ内移動(href=”#”)、リンク無効(href=”#!”)

よこのじ（@yokonoji_work）です。

HTMLのaタグについて、href（エイチレフ）属性のリンク先指定の仕方による挙動をまとめました。

aタグは外部サイトやサイト内の他のページに遷移させるときに使う以外に、ページ内で特定の場所に移動させるのにも使いますね。

ただページの再読み込みをさせる場合、ページ内の見出しや指定したidの箇所に移動させる場合、クリックしても何も起こらない無効リンクを作る場合など、それぞれの使い方を確認してみましょう。

aタグの属性設定 href=””、href=”#”、href=”#!” の挙動

hrefの中に何も指定しない場合は現在のページに遷移することになりますので、表示ページの再読み込みを行うこととなります。

#○○とid名を指定することで、ページ内の移動が行えるようになります。

id名を指定せずに#だけの場合には現在のページに遷移します。

下記のようなjQueryの処理と組み合わせて、ページ内の移動をなめらかにすることはよく行われますよね。

これは先ほど紹介した#id名の応用で、実在しないid名を指定することで、どこにも遷移しないリンクにすることができます。

ですので、#!である必要はなく#nolinkなど、使用していないid名であればなんでも大丈夫です。

リンクを無効化する他の方法にCSSの pointer-events プロパティを使って、aタグリンクがスマホでのタッチやマウスでのクリックに反応しないようにするものがあります。こちらを使うのもありですね。

created by Rinker

参考サイト