👆

カーソルを指マークにするためだけにaタグを利用するのをやめよう

2021/08/16に公開

TL:DR;

要素にマウスカーソルを当てたときに指マークに変えるためだけにaタグを使用しているコードをよく見かけますが、これはセマンティクス上、またHTMLの責務上あまり好ましくありません。

aタグは「リンク」にのみ利用したいですし、見た目の挙動はCSSで制御したいところですよね。

CSSの疑似セレクタ :hover とCSSの cursor: pointer を利用することで実現できます。

<a href="javascript: void(0);">
  <div class="hoge">
    Hello,World!
  </div>
</a>

.hoge{
  border: gray 1px solid;
  width: 150px;
  height: 30px;
  background-color: red;
}

a{
  color: black;
  text-decoration: none;
}

aタグのhref属性に javascript: void(0); を指定して何もしないように指定しています。

<div class="hoge">
  Hello,World!
</div>

.hoge{
  border: gray 1px solid;
  width: 150px;
  height: 30px;
  background-color: red;
}

.hoge:hover{
  cursor: pointer;
}

HTMLをシンプルに保ち、見た目をcssに定義することで同じ挙動が実現できました。