条件 - Webflow ブログとリソース

さまざまな条件で要素の外観と動作を変更することで、要素にインタラクティブ性を導入することができます。

この指導セッションでは、次のことが行われます。

さまざまな条件で要素を設計する
デフォルトの条件のスタイルに戻す
条件内の要素のスタイルを削除する
リンク要素の現状を設計する
継承されたスタイルの起源を理解する

さまざまな条件で要素を設計する

ホバー条件などのさまざまな条件で要素に多様なスタイルを実装するには、スタイルパネル内のセレクターで条件ドロップダウンリストを開き、スタイルを設定する条件を選択します。

条件ドロップダウンリストには、なし、ホバー、押下、フォーカスの条件がオプションとして含まれています。ドロップダウンリストは、スタイルパネルのセレクターセクションで強調表示されます。

セレクターの条件ドロップダウンリストから条件を選択すると、疑似クラスとも呼ばれる verdant 状態クラスがセレクターフィールドの終端に表示されます。これは、現在要素に対してその条件をスタイル設定していることを示すインジケーターとして機能します。

ボタン要素が選択され、セレクターセクションに緑色のホバークラス状態が表示されます。

さまざまなスタイルを自由に選択できます。ここで適用した変更は、エンドユーザーがこの要素を操作したときに表示されます。

現在の条件に関係なく、条件を選択解除するか、条件から移動するまで、実装した変更はキャンバス上で確認できます。

条件メニュー（ドロップダウン）

ドロップダウンメニューからスタイルを設定する条件を選択します。その後、スタイルパネルで行った調整は、選択した条件に対して保存されます。

デフォルト条件

デフォルト条件は、要素の初期状態を表します。これは、要素の本来の外観です。

別の条件をカスタマイズした後、「条件」ドロップダウンメニューから「なし」を選択して、デフォルトの条件のスタイルに戻すことができます。

ホバー条件

ホバー状態は、マウスポインターが要素の上に移動すると明らかになります。ほとんどのタッチ対応デバイスではホバーが実行できない可能性があることに注意してください。そのため、小さいビューポートのデザインを作成するときは、この点に注意してください。

活性化状態

アクティブ化状態は、要素がクリックまたはタップされたときに表示される状態です。アクティブ化は基本的にホバー状態の拡張であるため、この状態はホバー状態からスタイルを継承します。

集中状態

キーボードを使用してボタンやリンクなどの特定のインタラクティブ要素に移動することで、それらをトリガーせずに集中することができます。マウスまたはポインターを使用してインタラクティブ要素をクリックまたは操作すると、フォーカスとアクティブ化の両方が実現されます。この条件は、キーボード、マウス、またはタッチ操作によってインタラクティブ要素がフォーカスされたときの状態をシミュレートします。

フォーカス（キーボード）状態

フォーカス条件と同様に、この状態は、アクティブ化を必要とせずに (キーボードナビゲーションなど) インタラクティブ要素のフォーカスをエミュレートします。通常、フォーカスの方法 (マウス、キーボードなど) に関係なく、フォーカスされているときにテキスト入力フィールドに適用されます。

キーボードベースのナビゲーションに頼る訪問者の Web サイトのアクセシビリティを向上させるには、インタラクティブな要素がページ上で簡単に識別できるようにこの条件をスタイル設定することが重要です。インタラクティブな要素にはアウトラインを追加することをお勧めします。アウトラインは要素のレイアウトに影響を与えないためです。

訪問した状態

訪問済み状態は、以前に表示されたリンクの状態を示します。この状態は、デフォルトの「なし」状態からスタイルを継承します。

訪問済み条件では、テキストの色、背景色、境界線の色を変更できます。背景色は、別の条件で異なる設定になっている場合にのみ表示されます。

プレースホルダー

この条件は、フォームフィールドの条件ドロップダウンリストで使用できます。これにより、既定の条件の書体スタイルを継承する入力テキストとは別に、プレースホルダーテキストのスタイルを設定できます。

プレースホルダーテキストに関しては、書体、背景、影をカスタマイズできます。

左側のステップ 1 では、フォームの入力フィールドを選択します。右側のステップ 2 では、ドロップダウン状態メニューからプレースホルダー状態を選択します。 — フォーム内の入力フィールドを選択し、セレクターの条件ドロップダウンメニューを開いてプレースホルダーのスタイルを設定します。

チェック済み状態

この条件は、要素設定でカスタムスタイルが有効になっているフォーム checkboxes およびラジオボタンの条件ドロップダウンリストからアクセスできます。これにより、checkbox またはラジオボタンのチェック状態のスタイルを設定できます。

デフォルトの条件のスタイルに戻す

条件のスタイル変更が完了したら、次のいずれかのアクションを実行して、デフォルトの「なし」条件に戻すことができます。

条件ドロップダウンメニューから「なし」を選択します
キーボードの ESC キーを押します (これにより、現在の要素の選択も解除されます)
別の要素を選択

条件内の要素のスタイルを削除する

条件からカスタムスタイルまたはすべてのスタイルを削除するには:

要素をクリック
条件ドロップダウンメニューから条件を選択します
既存のスタイル（青色）を削除します。

リンク要素とタブの現状を設計する

リンク要素には現在の状態もあります。カスタムスタイルが現在状態に適用されると、ユーザーがその状態にあるときのリンク要素の外観が反映されます。

現在の状態（セレクターの緑のタグ）

現在のページ、セクション、またはタブにその要素が関連付けられている場合、現在の条件は、すべてのリンクタグまたは選択されたリンク要素のクラスに自動的に割り当てられます。

Present 条件は、デフォルトの「なし」条件からすべてのスタイルを継承します。

リンクの現在の状態を選択する

リンクブロック、テキストリンク、ボタン、ナビゲーションリンクの現在の状態にアクセスするには:

リンク要素を選択し、Dキーを押してリンク設定を開きます
ページオプションを選択し、ドロップダウンから現在のページを選択します（リンクがホームページにある場合は、ホームページを選択します）
S キーを押してスタイルパネルに移動します。リンクにクラスを適用している場合は、セレクターフィールドで緑色の現在の状態がアクティブになっていることがわかります。そうでない場合は、セレクターをクリックして、開いたドロップダウンから「すべてのリンク」タグを選択します。現在の状態がタグにも適用されます。

最初のステップは、左側のリンク要素を選択することです。 2 番目のステップは、右側のリンク設定ドロップダウンメニューからホームページを選択して、要素をホームページにリンクすることです。

3 番目の手順では、リンク要素が選択されている状態で、左側のドロップダウンメニューから [すべてのリンク] タグを選択します。4 番目の手順では、右側の [すべてのリンク] タグに緑色の「現在の」状態が追加されていることを確認します。

何を探していますか？

条件