aタグのリンク機能を無効化する方法

ハシビィくん

HTMLタグのaタグを無効化にする方法を教えてほしいっす！

カピーさん

いくつか方法があるからまとめて紹介していくぞ

aタグのリンクを無効にする方法

本記事では3つの方法を紹介していきます。状況などに応じて使い分けてください。

href属性を外す

aタグにリンク先を指定する際に使用するhref属性。このhref属性を削除すればリンク機能は無効かすることになります。

Before

<a href="">aタグのリンク機能を無効化</a>

After

<a>aタグのリンク機能を無効化</a>

この方法はhref属性を削除する必要があるため、設定したリンク先を残したままにしたい場合は採用できない手段ですので、ご利用の際にはご注意を。

JavaScriptでaタグを無効化

2つ目の方法は、JavaScriptでaタグを無効化する方法です。JavaScriptでaタグを無効化する方法の代表例を紹介していきます。

<a href="javascript:void(0)">aタグのリンク機能を無効化</a>

この記述でaタグを無効化にすることが出来ます。これだけだとビジュアルとしては、クリックできるように見えてしまいます。（下記参照）

ハシビィくん

カーソルを合わせると指マークになっちゃうっすね

これを解消するためには、CSSで調整する必要があるので注意が必要です。

a {
    text-decoration: none;
    color: #000;
    cursor: default;
}

この方法はhref属性に指定の記述をする必要があるので、あらかじめリンク先を設定した状態でリンクのみ無効は出来ません。

CSSでaタグを無効化

最後に紹介するのはCSSでのaタグ無効化です。この方法が一番管理しやすいと思います。

CSSで無効にするので、先述のJavaScriptと比べても工程も少ないのでおすすめです。

<a href="https://ownmono.com/blog/">aタグのリンク機能を無効化</a>

a {
    pointer-events: none;
    text-decoration: none;
    color: #000;
    cursor: default;
}

CSSには追加でpointer-events: none;を記述することで、ポインターが指マークにならないので、見た目も動作としてもリンク先を設定しつつ、無効化を実現出来ます。

まとめ：aタグのリンク機能を無効化する方法

aタグのリンク設定を残しつつ、一時的に無効化したいという要望はクライアントさんから耳にします。

リンク先自体を削除でも最低限の要望をクリアできますが、いざリンク先を削除してしまった結果、リンク先のURLを忘れてしまったなんてケースも実際にあり得ます。

リンク先の設定を維持しつつ、CSSで無効化が一番管理ができるのでおすすめです！