【HTML】aタグのリンクを無効にする、スタイル（CSS）はそのままで

2021.12.23
更新 2026.10.30
デザインのメモ
HTML

aタグのリンクだけを無効にできたりしますかー？

できますよー、いろんな方法があるのでお気に召すのでどうぞー

簡単にtabindexだけを使う（href属性は使わない）

うーん、これ、とってもおすすめです。
どのブラウザでも同じように動きます。
ホバー（hover）が不要な場合は『pointer-events: none;』のクラス付けをしておきましょう。

コードを見る（HTML・CSS）

HTML

<a tabindex="-1" class="_a">詳しくはこちら</a>

CSS

/* ---------- 01 tabindex だけを使う（href なし） ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

見本ページをひらく（tabindex だけを使う（href なし））

jQueryを使う

jQueryを使うのもいいですね。
クラス指定してあげるだけでオッケーです。
ホバー（hover）が不要な場合は『pointer-events: none;』のクラス付けをしておきましょう。

コードを見る（HTML・CSS・jQuery）

HTML

<a href="#" class="_a disabled">詳しくはこちら</a>

CSS

/* ---------- 02 jQuery を使う ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

jQuery

$(function () {
  $('a.disabled').on('click', function () {
    return false;
  });
});

見本ページをひらく（jQuery を使う）

JavaScriptを使う

JavaScriptを使うのもいいですね。
リンク先指定に直接書くだけです。
ホバー（hover）が不要な場合は『pointer-events: none;』のクラス付けをしておきましょう。

コードを見る（HTML・CSS）

HTML

<a href="javascript:void(0)" class="_a">詳しくはこちら</a>

CSS

/* ---------- 03 JavaScript を使う ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

見本ページをひらく（JavaScript を使う）

いまの書き方：aria-disabled と pointer-events を使う

いまは JavaScript を使わずに、HTML と CSS だけで済ませるのがかんたんです。
『href』を書かなければ、a タグは押してもどこへも行きません（Tab キーでも選ばれません）。
そこに『aria-disabled=”true”』を付けておくと、読み上げソフトにも「いまは使えないリンク」と伝わります。
ホバー（hover）の色の変化も止めたいときは、CSS で『pointer-events: none;』を付けます。

a._a[aria-disabled="true"] {
  pointer-events: none;
}

コードを見る（HTML・CSS）

HTML

<a role="link" aria-disabled="true" class="_a">詳しくはこちら</a>

CSS

/* ---------- 04 いまの書き方（aria-disabled と pointer-events） ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}
a._a[aria-disabled="true"] {
  pointer-events: none;
}

見本ページをひらく（いまの書き方（aria-disabled と pointer-events））