HTML/CSSにてボタンを作成する場合、下記のような方法があります。

<a href=”#” class=”btn”>ボタン</a>など単にクラスにbtnなどの名前をつける場合
 長所  外見や動作をCSSでカスタマイズしやすい。
 短所  セマンティク(意味的な)HTMLとしては最適でない場合がある。
<button>ボタン</button>などタグをbuttonにする場合
 長所  本物のボタンとして動作するため、クリックやフォーカスなどのイベントハンドリ
     ングが容易。セマンティクなHTMLである。
 短所  デフォルトのボタンスタイルがブラウザによって異なるため、リセットスタイルな      
     どを適用して追加のCSSを適用しなくてはならない。
<input type=”submit” value=”送信”>などsubmitを使う場合
 長所  formの中で主に使用され、送信ボタンとして動作する
 短所  ②より、さらにカスタマイズが難しい。

形はボタンだが、実際はリンクの意味は強く、ページや別のセクションへのナビゲーションで使う場合は①、ボタンとして何らかの操作のトリガーをする場合、(例:モーダルを開く、特定のアクションを実行する等)は②。③はフォーム等のデータをサーバーに送信する役割を持ちます。②と③は併用するときがあります。
CSSのカスタマイズの問題はあるものの、セマンティックを優先したほうが良さそうです。

投稿者

Kの手習い

前職はOA機器の販売営業でしたが、退職して、50代で1からプログラマーを目指します。一般的にこの年齢からは厳しいと言われておりますが、この歳ならではの経験を活かして、頑張ります!

コメントを残す