• #CSS
• #リンク
• #無効

update:2022.5.12　943view

aタグを除去せずリンクの無効化

aタグのままなんだけど、どこにも遷移させたくない！リンクを無効化にしたい！といった時にcssのプロパティのみで無効化ができちゃうんです！

リンクの無効化

aタグのクラス名が「sample」としていた場合

a.sample {
    pointer-events: none;
}
    

これだけ！

あまり使う場面も少ないと思いますが...。
むしろどういう時に使うの？と思っていましたが！使い道、ありました。

下記のように電話番号をリンク設定すると電話番号がかけられるようになりますが、PCサイズは不要、スマホサイズのみリンク設定したい！といった場面で結構使えます。

<a href="tel:01231231234">0123-123-1234</a>
    

画面幅が769px以上だったらリンクを無効化にという下記の記述をcssへ！

@media (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}
    

クラスをつけずに設定できるなんて素晴らしいですね♪