素敵なカレンダーが欲しい！四条せつなです。
コーディングしていると気付くと思うんですけど、<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をリセットする方法！”でした！でわでわっ！
コメントを残す