aタグのリンク範囲をCSSユーザースタイルを使用した確認方法

aタグのリンク範囲をユーザースタイルで視覚化

aタグのリンク範囲を確認する際はユーザースタイルを使用して枠線を付けたりするのが一般的なのだが、普通にやると確認しづらいため確認しやすいやり方を考えた。

Stylishをインストール

Chromeでユーザースタイルを使用する場合はStylishというChrome拡張機能が必要なため、事前にインストールしておく。

Stylish - ウェブサイト用カスタムテーマ

aタグのリンク範囲確認用CSS

aタグのリンク範囲を確認する際はユーザースタイルを使用して枠線を付けたりすると冒頭で述べたが、普通に1色だけで付けると背景や画像が同色の場合に見えなくなってしまうため、2色使用したほうが良い。

ただし、枠線はaタグ部分がfloatなどの影響で表示されないこともあるため、透明度(opacity)を1から0.5でループしてアニメーションするCSSを付け加えておいたほうが良い。

これらを考慮してCSSを記述すると次のようになる。

a {
  border-top: 1px solid red !important;
  border-right: 1px solid red !important;
  border-bottom: 1px solid cyan !important;
  border-left: 1px solid cyan !important;
  box-sizing: border-box !important;
  animation: a 1s infinite alternate !important;
}

@keyframes a {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

あとはこちらをStylishに保存して有効にすればaタグの範囲を簡単に確認することができる。