CSS は、プログラマーが動的な Web ページをデザインするためのさまざまなフレームワークを提供します。すべての重要な機能とツールを 1 か所で提供するため、より好感が持てます。したがって、他のフレームワークを使用する必要はありません。 CSS の Tailwind フレームワークは、ユーザーが過剰な CSS を作成する時間を節約できるため、最も広く使用されています。
このガイドでは、Tailwind でのホバー、フォーカス、およびその他の状態の使用法を説明します。
Tailwind でホバー、フォーカス、その他の状態を使用する方法は?
Web ページをデザインするときは、ユーザーとの対話性を維持するために、動的で魅力的な要素を追加する必要があります。 Tailwind の機能を利用すると、追加のカスタム CSS を記述することなく、インタラクティブで動的なページを作成できます。 「ホバー」、「フォーカス」、「アクティブ」などの機能は、デザインに魅力を加えるのに役立ちます。
HTML でのホバー バリアントの使用
hover プロパティは、ユーザーがマウス カーソルを特定の要素の上に移動したときに HTML 要素のスタイルを設定するために使用されます。スムーズな体験を提供するのに役立ちます。
ステップ 1: HTML に「hover」プロパティを適用する
HTML ファイルを作成し、コード内の一部の要素に hover プロパティを適用します。アイデアを得るには、以下のコードを見てください。
< 体 >
< ディビジョン クラス = '中心' >
< ボタン クラス = 「bg-green-500 hover:bg-blue-500 text-white font-boldrounded」 >
ホバー・ミー!
< / ボタン >
< / ディビジョン >
< / 体 >
このコードでは:
- 「」という名前のボタン ホバー・ミー! 」はbuttonタグで作成されます。
- 「 bg-グリーン-500 」はボタンの背景色を緑色に設定します。
- 「 ホバー: bg-blue-500 」ボタンの上にマウスを置くと、ボタンの色が緑から青に変わります。
- ボタン内のテキストは白色です。」 文字白 ' そして ' 太字 」とフォントを太字にします。
- 「」でボタンの形状を丸く設定しています。 丸い ”。
ステップ 2: 出力をプレビューする
上記のコードを実行すると、最終的なビューは次のようになります。
マウス カーソルをボタン上に移動すると、ボタンの色が変化することがわかります。
HTML でのフォーカス バリアントの使用
focus プロパティは、ユーザーが要素をクリックしたときに要素が強調表示されてユーザーの注意を引くように、HTML 要素のスタイルを設定するために使用されます。
ステップ 1: HTML コードに Focus プロパティを適用する
HTML ファイルを作成し、任意の要素に focus プロパティを適用します。印象を得るには、以下のコードを検討してください。
< ディビジョン >
< / ディビジョン >
< / 体 >
このコードでは:
- ” フレックス ”クラスはフレックスを作成します。
- ” 中央揃え 」は、コンテンツを中央に揃えます。
- ” アイテムセンター ”クラスはオブジェクトを画面の中央に調整します。
- ” hスクリーン 」は、ビューポートに応じて画面サイズを設定します。
- 「 bg-ブルー-200 」は背景色を青に設定します。
- テキストタイプの入力ボックスが作成されます。
- ” フォーカス: bg-green-300 」は、ユーザーがクリックすると入力ボックスの色が緑色に変わります。
- 「 w-64 」は幅を64pxに設定します。
- 「 h-10 」は高さを10pxに設定します。
- 「 ピクセル4 」は、上部と左側に4pxのパディングを追加します。
- 「 py-2 」は上下に2pxのパディングを追加します。
ステップ 2: フォーカス プロパティをプレビューする
HTML コードを保存し、それによって作成された Web ページを開きます。次に、入力ボックス上にカーソルを移動してクリックすると、次のような変化が起こります。
HTML でのアクティブ バリアントの使用
このプロパティは、ユーザーが要素を動的にタップしたときに条件の要素をスタイルするために使用されます。アクティブ状態は、カーソルのアクティブ化段階から解放された状態までの期間です。
構文
アクティブ： { 財産 }特定の CSS プロパティが選択した要素に適用されます。
ステップ 1: HTML コードにアクティブ バリアントを適用する
HTML ファイルを作成し、active プロパティをいくつかの要素 (以下の場合はボタン) に適用します。
< ディビジョン クラス = 「flex justify-center items-center h-screen」 >
< ボタン クラス = 「bg-green-600 p-4rounded-md トランジション-トランスフォーム期間-400 トランスフォームアクティブ:scale-110」 >
「私」をクリックしてください！
< / ボタン >
< / ディビジョン >
< / 体 >
このコードでは:
- 「 bg-グリーン-600 」は背景色を緑色に設定します。
- 「 p-4 」は4pxのパディングを追加します。
- 「 丸みを帯びたMD 」を選択すると、ボタンの形状が丸くなります。
- 「 遷移変換 」は、「」で設定された短い時間ボタンを変形させるために使用されます。 持続時間 400 の変換 ”。
- ” アクティブ:スケール-110 」ボタンを大きなサイズに変換します。
ステップ 2: 出力をプレビューする
上記のコードを HTML ファイルに保存し、それによって作成された Web ページをプレビューします。 Web ページは次のようになります。
マウスを押し続けるとボタンのサイズが大きくなり、放すとすぐに初期状態に戻ることがわかります。
結論
Tailwind でホバー、フォーカス、およびその他の状態を使用するには、「hover」などの事前定義された状態クラスを使用し、色の変更、フォーカス リングの作成などのいくつかのスタイル プロパティをそれに適用します。表示ユーティリティは、スケーラブルな出力を表示するために使用されます。この記事では、Tailwind でホバー、フォーカス、その他の状態を使用する方法を説明しました。