-->
YTech

CSSでリンクを無効化するいろいろな方法

みなさんこんにちは2001Y(@Y20010920T)です。
アイキャッチ画像だけ、リンクを無効化したかったので調べて見ました。そしたら、CSSだけでできるんですね。(できると思ってましたけどw)
僕は単純なリンク無効化がしたかったのですが他にも色々あったのでまとめて見ました。

リンクを完全に無効化できるCSS

これで全てのリンク機能がなくなります。
.link-off {
 pointer-events: none;
 cursor: default;
 text-decoration: none;
}

pointer-events: none;

ここの部分が今回のミソのリンク機能を無効化するセレクタです。
具体的にはクリックしても通常テキスト通りにリンクを開きません。これだけを入れるだけで、ほかの下線・アニメーションなどが効いていてもリンクを無効化することができます。
逆に、どんなにデザインを通常テキスト通りにしても、このセレクタを入れなければリンクとして機能してしまいます。

cursor: default;

ここで出てくるかあ〜 といった感じですが、カーソルを通常のものに戻すセレクタです。
多くのブラウザではリンクにカーソルを合わせると指マークになるんですが、それを通常通りにしてくれます。

text-decoration: none;

今までもよく使ってきた、下線を消すセレクタです。
当ブログでもサイドバーなど記事に関係ないところでは下線を消しています。

ブラウザ対応状況

Can I Use pointer-events? Data on support for the pointer-events feature across the major browsers from caniuse.com.

参考

screenshot
リンクを無効にするスタイル - CSS note
hatena
screenshot
HTML - :first-of-typeで特定のaタグにpointer-events: none;を(56194)|teratail
hatena

最後に

myiconCSSはCSS3で一気に強化されて数かかなり増えました。
そのおかげでJavaScriptを使わず軽量で動作するようになりましたが、JavaScriptが全然わからない!汗
以上、CSSでリンクを無効化するいろいろな方法でした。

関連記事

コピー完了