[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

209users がブックマーク コメント 26

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

209 users coliss.com

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント26件

  • 注目コメント
  • 新着コメント
オーナーコメントを固定しています
coliss
オーナー HTMLでボタンの実装について知っておくべきすべてのこと

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

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

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

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

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

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

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

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

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

その他
オーナーコメントを固定しています
coliss
オーナー coliss HTMLでボタンの実装について知っておくべきすべてのこと

2023年02月09日 リンク

その他
Nyoho
これはいい記事だな〜

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

その他
iww
サンプルをおけばいいのに

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

2023年02月10日 リンク

その他
qinmu
CSS。

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

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

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

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

2023年02月09日 リンク

その他
ledsun
input type="button"は、どう扱えばいいですか?

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

2023年02月09日 リンク

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

2023年02月09日 リンク

その他
mysql8
divはdividedっていう意味だよ

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

2023年02月09日 リンク

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

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

2023年02月09日 リンク

その他
cl-gaku
本当にあかんならブラウザが弾きゃええのよ

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

2023年02月09日 リンク

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

2023年02月09日 リンク

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

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

その他
sippo_des
しってる!! テストに出るけど現実どうよ

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

2023年02月09日 リンク

その他
Tack2Me
それはそう笑

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「divはボタンではな...」が注目されています。

気持ちをシェアしよう

ツイートする

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

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか? buttonタグ、もしくはdivタグ? di... クリックできるボタンを実装するとき、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タグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで

ブックマークしたユーザー

  • thaturn2023年06月20日 thaturn
  • fumiyas2023年03月21日 fumiyas
  • heatman2023年03月11日 heatman
  • kochi152023年02月24日 kochi15
  • mitukiii2023年02月13日 mitukiii
  • wkoichi2023年02月12日 wkoichi
  • midas365452023年02月12日 midas36545
  • toshi-toma2023年02月11日 toshi-toma
  • shimbaco2023年02月11日 shimbaco
  • stntaku2023年02月11日 stntaku
  • mizdra2023年02月11日 mizdra
  • Nyoho2023年02月11日 Nyoho
  • adsty2023年02月10日 adsty
  • akira_maru2023年02月10日 akira_maru
  • uva2023年02月10日 uva
  • daizu61102023年02月10日 daizu6110
  • sakimoridotnet2023年02月10日 sakimoridotnet
  • iww2023年02月10日 iww
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /