会員登録すると
学習することができます。
会員登録する（無料）
学習することができます。
登録済みの方はこちら
ログイン
ボタンのスタイリング ― 基本と応用
目安学習時間 9分
学ぶ目的
ボタンの基本形
背景色（bg-blue-500）、文字色（text-white）、余白（px-4 py-2）、角丸（rounded）——この4つを組み合わせれば、それらしいボタンになります。
状態による変化
Tailwindでは hover:bg-blue-700 のように、状態を接頭辞として書きます。マウスを乗せたときだけ色を変える、といった指定がクラス1つで書けます。
応用する
ボーダーだけのボタン、影を付けたボタン、無効状態のボタン。組み合わせを変えるだけで表現の幅が広がります。手を動かして、いくつかのバリエーションを作ってみてください。
このレクチャーで学ぶこと
- 背景色と文字色
- 角丸とパディング
- hoverなどの状態変化
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
理解度チェックテストに
合格しました！
おめでとうございます！
Tailwind CSS初級
Tailwind CSS初級講座
ボタンのスタイリング ― 基本と応用
理解度チェックテストに合格しました！
＼ SNSにシェアする ／
