divはボタンではない、ボタンの実装について知っておくべきすべてのこと

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで

[coliss]

HTMLでボタンの実装について知っておくべきすべてのこと

[spark7]

「ボタンにはbuttonを、リンクにはaを使用するようにしましょう」そりゃそうだな..

[rryu]

button要素が避けられるのはブラウザの奇妙なスタイルをCSSで上書きできなかった時代があったからだが、今はそんなことはないので普通に使えば良い。

[manimoto]

別件だけど、divは表ではないから、table使ってほしい。tableで作成した表はGoogleスプレッドシートにコピペできるが、divで作った表もどきは縦にペーストされるなど崩れて不便。Figmaの管理画面の表がdivでげんなりしてる。

[xlc]

こういう話をするなら要件に「スクリーンリーダーでも操作可能なこと」を追加すべきだね。これは「意識が高いか」の問題ではなく、特定のユーザーが操作可能か否かの問題。ならばテストまで含めて工数を見積るべき。

[nakamura-kenichi]

HTMLあるあるのひとつやな。今はすっかり落ち着いて「教本読んどけ」って話やが、ここに至る経緯で色々あったんやで。ホンマ楽になったやで。

[cartman0]

もうUIコンポーネント使うのが主流だから意識しなさそう

[sgo2]

button要素はデフォルトのタイプをsubmitにしたのが解せない

[mysql8]

divはdividedっていう意味だよ

[matarillo]

歴史的経緯もあって面倒なこともあるけど、「それが世界の選択」だし、ハックではなく作法に則ることにはちゃんと意味があるのですよね

[fikah]

Reactが流行ったあたりからなんでもdivで実装しようとする奴増えたよね。見るたび辟易してる

[Nyoho]

これはいい記事だな〜

[adsty]

ボタンをbuttonで実装するのは当然か。

[iww]

サンプルをおけばいいのに

[qinmu]

CSS。

[dorapon2000]

“buttonはクロール可能ではないため、SEO的に非常に不利です。 ユーザーはbuttonで実装されたリンクを新しいタブやウインドウで開くことができません。たとえば、右クリックで「新しいタブで開く」など。”

[abstruct3431]

物事の本質を考えようとしない馬鹿ばっかりだからね道具が正しく使えなくても仕方ないね。他人が恥かく分には困らんし、ものを知っている側が知らないのに合わせるほうが考えもしない馬鹿を教育するより楽だしね

[koogawa]

“リンクにはhrefプロパティを持つaタグを使用し、他のすべてのボタンにはtype="button"を持つbuttonタグを使用するということです” つい頷いてしまったけど、よく考えたら当たり前のことだった

[ledsun]

input type="button"は、どう扱えばいいですか？

[i5s4y]

マークアップ大事にしないフロントエンドエンジニアにありがち。Reactで<div>でボタン作ってrouter.push() でページ遷移させてるとか..

[doko]

ほんとこういうところが嫌なのよ。みんなよくやってると思う

[cl-gaku]

本当にあかんならブラウザが弾きゃええのよ

[strawberryhunter]

カーソルをpointerに変更したいだけなのに<a>を使うデザイナーが多くて嘆かわしい。デザイナーは見た目が実現できれば他はどうでもいいからな。

[Shinwiki]

もっとよく考えてから仕様発表してや。めーわく

[sippo_des]

しってる！！ テストに出るけど現実どうよ

[Tack2Me]

それはそう笑