【HTML】コピペでOK!勝手にデザインが変わる「button」のCSSをリセットする方法!

【HTML】コピペでOK!勝手にデザインが変わる「button」のCSSをリセットする方法!
スポンサーリンク

素敵なカレンダーが欲しい!四条せつなです。

コーディングしていると気付くと思うんですけど、<button>タグはブラウザ側がデフォルトでデザインが設定されています。なので、何の気なしに<button>タグを使用してしまうと、思ってもみないデザインになってしまいます…これは非常に困りものですよね。

四条ねこ
だから、<button>タグは「CSSリセット」して使うのがオススメだよっ!

<button>タグのCSSリセットをわざわざコーディングするのも手間だと思います。なので、この記事に<button>タグのCSSリセットのコードを貼ってあるので、コピペして使ってくださいね!

下記のCSSをコピペして、buttonのCSSをリセット!

ブラウザ標準の<button>が超ダサい(と思っている人多いよね?)ので、自分でデザインしたい人も多いハズ!というか、ほぼ全員がそうだと思います!

なので、下のコードをサクッとCSSにコピペしてください!!

四条ねこ
ちなみに、background-color: transparent;は、背景色を透明(指定なし)にするものだよー!

<button>要素は、他にも勝手に文字の大きさを変えたり縁までつけちゃったり…と、そこまでデフォルトでしなくてもいいのになぁ、という印象ですね(笑)

せつなのまとめ

<button>タグは、特にCSSで指定していないと、ブラウザ側のデフォルトのデザインが適用されてしまうようですね。なので、まっさらな状態で<button>タグを使いたい場合は、「CSSリセット」をしてからコーディングをすることをオススメします!

四条ねこ

つまりは…

  • <button>タグはデフォルトのデザインがある!
  • <button>タグを使うときは「CSSリセット」しよう!

って、ことだねっ!

ということで、“【HTML】コピペでOK!勝手にデザインが変わる「button」のCSSをリセットする方法!”でした!でわでわっ!

スポンサーリンク
【HTML】コピペでOK!勝手にデザインが変わる「button」のCSSをリセットする方法!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です