Webページのボタンの作り方

Webページでボタンを見ない日はない。それくらい、ボタンは日常的なものになっています。

ボタンは単純に作れてしまうので、いろいろな作り方があります。

初心者に向けて、おすすめのボタンの作り方をまとめます。

ボタンの作り方

ボタンを作るためには 、大きく２つの方法があります。

• buttonタグを使う
• inputタグでbutton属性を使う

<button>ボタン</button>

<input type="button" value="ボタン">

２つの違いは

先ほどの表示例を見てわかるように、見た目は同じです。機能も同じです。

ただ、buttonタグには閉じタグがあります。閉じタグがあることで、子要素を持つことができます。

具体的には、ボタンを太文字や画像にしたり、::afterや::beforeの疑似要素を使用できます。

つまり、buttonタグはinputタグの上位互換です。

まとめ

buttonタグもinputタグのボタンも機能は変わりません。

シンプルなボタンを作るときには、どちらでも問題ありません。

デザインにこだわりたいときはbuttonタグで作ったほうがカスタマイズしやすいです。

ボタンを作るときはbuttonタグで作っておけばいいですね。