aタグのリンクを無効にする方法【HTML/CSS/JavaScript】

執筆者:牧野健人
aタグのリンクを無効にする

aタグで実装したリンクを無効にする時は、下記のようにhref属性を外してtabindex="-1"を付けるのが最もシンプルかつデメリットもありません

<!-- href=""を外してtabindex="-1"を付ける -->
<a tabindex="-1">無効化されたリンク(フォーカスも当たらない)</a>

以下でこのコードの詳細を解説した上で、その他の手法についても説明します。

aタグのリンクを無効にする時は、href属性を外す

リンクを無効にする方法はいくつかありますが、冒頭で述べた通りhref属性を外すのが最もおすすめの方法です。

「aタグでhrefが無いなんて見慣れないけど、OKなの?」と思われる方もいらっしゃるかもしれませんが、問題ありません。

実際、WHATWG(HTMLの標準規格を策定している世界的な組織。Apple、Mozilla、Microsoftなどから成る)によるHTMLの仕様書では、下記のように「href属性が無いaタグはプレースホルダーを表す」という旨が記載されています。

a要素がhref属性を持たない場合、その要素は、当該要素のコンテンツのみにより構成される、関連するリンクがあった場合、リンクが他の方法で置かれただろう場所に対するプレースホルダーを表す。

HTML Standard 日本語訳(WHATWG仕様書日本語訳)

プレースホルダーとは、後で実際の中身を入れることを前提に、一旦仮の内容が置かれた場所のことです。今回の文脈なら、後で実際のリンクを入れるための仮置き要素ということになります。

前提として、aタグを残したままでリンクを無効化したい場合、それは通常暫定的な処置であるはずです(永続的ならaタグを残しておく理由が無いため、aタグ自体を削除するのが自然)。

つまり、リンクを無効化する手段としてhref属性を外すことは、HTMLの仕様に則った手法だと言えます。

他の方法と比べても手間がかかりませんし、デメリットもありません。ただし、tabindex="-1"でフォーカスが当たらないようにする必要はありますので、以下で解説します。

フォーカスが当たらないようにしたい場合はtabindex属性でマイナス値を指定する

href属性を外す代わりに追加するtabindex="-1"には、フォーカスを当たらなくする働きがあります。

href属性を外しただけだとフォーカスは当たる状態のままです。無効化したリンクにフォーカスが当たるメリットは考えづらいため、このようにtabindex属性で調整する必要があります。(値はマイナス値であれば大丈夫ですが、通常は-1を使います)

厳密にはtabindex="-1"を付けてもJavaScriptのメソッドでフォーカスを当てることはできますが、キーボードによる操作では当たらなくなるため、対ユーザーの観点では問題無いでしょう。

その他の方法でaタグを無効にする

href属性を外す以外にもリンクを無効化する手法はいくつかあります。以下で、CSSとJavaScriptのそれぞれによる無効化を解説します。

CSSによるリンクの無効化

CSSでリンクを無効にする場合は、pointer-events: noneを使います。

これを指定した要素は、クリックやホバーが無効になります。そのためリンクも動作しなくなるという仕組みです。

この方法もシンプルに実装できますが、コードを読めるユーザーにソースから直接URLを見られたり、検証モードでpointer-events: noneを削除してリンクを辿られたりする可能性があります。

また、クリックそのものが無効になるため、クリックイベントによって起動させるようなスクリプトにも使えなくなります。

さらに、一部の古いブラウザでは機能しない場合があります。

JavaScriptによるリンクの無効化

javascript:void(0)

JavaScriptでリンクを無効化する際は、javascript:void(0)がしばしば用いられます。

これはvoid(0)によってhref=""undefindを渡すことで、結果的にリンクが動作しなくなるというものです。

<a href="javascript:void(0)">無効化されたリンク</a>

href="javascript:void(0)"は、「a要素のクリックをきっかけにプログラムを作動させたいが、画面遷移はさせたくない」という状況の時に、onclick属性とともに使われることが多いように思います。

ただし、そのような使い方をする場合はそもそもaタグではなくbuttonタグなどを使う方が意味として適切なので、「aタグでマークアップしてJavaScriptでリンクを無効化する」という方法を採用する理由が考えづらいです。

広告の効果測定などの文脈では、既存のHTML要素を変えずに済ますためかhref="javascript:void(0)"とonclick属性の使用が媒体から指示されることがありますが、このような特別な理由が無い限りは避けた方が望ましいでしょう。

return false;

処理を中断させるreturn false;でリンクを無効にすることも可能です。

$('対象のリンクを指定するセレクタ').on('click', function() {
  return false;
});

ただ、リンクのプレースホルダーを設けたい場合はhref属性の除外するのが適切で、クリックでイベントをハンドリングしたい場合はaタグ以外の要素が適切(理由がありaタグを用いたい場合もvoid(0)で可能)、というこれまでの議論を踏まえると、わざわざスクリプトを用意するメリットが考えづらいように思います。

disabled属性はaタグには使用不可

HTML要素を無効化するdisabled属性というものがありますが、aタグはサポート外のため使えません。

The disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>.

disabled – HTML: HyperText Markup Language | MDN
和訳:disabled属性は<button>、 <command>、 <fieldset>、 <keygen>、 <optgroup>、 <option>、 <select>、 <textarea> そして <input>にサポートされています。

aタグのリンクを無効にする方法【HTML/CSS/JavaScript】:まとめ

aタグをリンクのプレースホルダー(後で実際のリンクを入れるための仮置き要素)にしたい場合は、下記のようにすることで簡単に実現できます。

<!-- href=""を外してtabindex="-1"を付ける -->
<a tabindex="-1">無効化されたリンク(フォーカスも当たらない)</a>

a要素のクリックをイベントハンドラとして扱いたい場合は、代わりにbuttonタグなど意味的に適切なものを使うのが望ましいですが、aタグを用いる必要性があればhref="javascript:void(0)"などで実現可能です。

この記事の執筆者

牧野健人

牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。