ここのことはなかったことにするかもしれない

仕事がらみの記事を主として扱いますが、あくまで個人ブログです。2013年以前の記事は https://yellow-73.hatenablog.com/ にあります。

button要素をボタンっぽくないようにする

JavaScriptで、状態を遷移させないアンカーを生成しつつ、クリックイベントを処理するのに、<a href="javascript:void(0)" onclick="...">とする方法がありました。

でもこれ、ステータスバーに出る遷移先URIが"javascript:void(0)"と出てしまうので、良くないんですって(何年前の話をしているかは聞かないで下さい)。

じゃあ<a>はやめよう、と。でも<span>にonlickを付けるのは気乗りしない。<span>はインラインのコンテナという意味しか持ちません。要素の意味を無視するのは好きではないです。

button要素に付けよう、と。 ていうか、アプリケーションの大体においては、<a>より<button>の方がふさわしいのではないかと。

で、<button>っぽくない表示にするスタイルを検討した結果を次に示します。

{
  background: none;
  border: 0;
  padding: inherit;
  text-align: inherit;
  cursor: pointer;
  font: inherit;
  box-sizing: inherit;
}