MENU

buttonタグはあまり使わないほうがいいかもしれないという話

昔からの慣習というか流れというかで、<input> タグより <button> タグを使うべきであると基本的にされています。主な理由としては、<button> タグの方ならタグで囲まれているので、中に様々な要素を追加できるという利点があるからですね。

IEでの挙動

いっつも独自機能を実装してWeb制作者を悩ますIEで、ボタンクリック時に中身のテキストが右に1px、下に1pxほど移動してしまうという欠点があります。しかも、CSS等で制御できればいいのですが、それ専用の擬似クラス等が用意されていないのです。

一応解決策はあるが


button > span 
{
  position: relative;
}

<button> タグの中に <span> タグを入れ子にして、それに対し、上記のCSSを適用させると一応解決することはできます。しかし、わざわざこのためにタグを増やすというのはどうも納得がいきません。何か良い解決方法があれば教えてください。


ボタン
ボタン

なので、このような感じでボタンとして記述し、動作はJSで制御するというのがいいと思います。HTMLの文法的には <a> タグを使って表す方がいいかなという感じです。HTML5から href 属性は必須ではなくなりました。なので、ボタン類はアンカーという意味で用いるのもよいと思います。