【日本語版Webflow University】ステート

2022-10-11

Webflow 基礎編

この投稿はWebflow社が提供する「States」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/states

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

ホバー表示やカレント表示など様々な条件下でコンテンツの見え方を変えることで、サイトのUXを向上させることができます。

レッスン概要

様々なステートの要素をスタイリングする
ステートのデフォルトスタイリングに戻す
あるステートでのスタイルを削除する
リンク要素のカレント表示をスタイルする
スタイルがどこから継承されるかを理解する

様々なステートの要素をスタイリングする

ホバー表示など、異なるステートの要素に異なるスタイルを適用するには、スタイルパネルのセレクタで「States」ドロップダウンメニューを開き、スタイルを適用したいステートを選択します。

セレクタの「States」ドロップダウンメニューからステートを選択すると、セレクタフィールドの末尾に緑色のステートクラス（擬似クラスとも呼ばれる）が表示されます。これは、要素に対してそのステートをスタイリングできるようになったことを示します。

スタイルパネルからどのスタイリングでも設定することができます。ここで行ったスタイリングの変更は、ユーザーがサイトを閲覧する場合に、この状態になったタイミングで表示されるスタイルになります。

どのようなステートであっても、選択を解除するか、またはその状態から離れるまで、行った設定はキャンバス上に表示されます。

ステートメニューについて（ドロップダウン内）

None

Noneステートは、要素のデフォルトの状態の設定です。これは、デフォルトで要素がどのように見えるかを示しています。

一度、別の状態を選択してスタイルを設定すると、「States」ドロップダウンメニューから「None」を選択することで、デフォルトの状態のスタイルに戻すことができます。

Hover

Hoverステートは、要素にマウスポインタを合わせたときに表示されるスタイルです。ほとんどのタッチデバイスではホバー操作ができないので、この点は注意してください。

Pressed

Pressedステート（Activeステートとも言う）は、要素をクリックしたりタップしたときに表示される状態です。Pressedはホバーの状態でもあるため、このステートはホバーステートの設定を継承しています。

Focused

ボタンやリンクなどの特定のインタラクティブ要素には、キーボードを使用してタブを入力することで、わざわざマウスクリックすることなくフォーカスすることができます。マウスやポインターデバイスでインタラクティブ要素をクリックすると、フォーカスとプレスの両方が表示されます。この状態は、キーボードやマウス、または指でタップしてインタラクティブ要素にフォーカスが当たったときの状態を指しています。

Focused(keyboard)

Focusedステートと同様に、このステートはインタラクティブな要素にフォーカスが当たっているが、必ずしもアクティブになっていない場合（例えば、キーボードで要素にタブ入力した場合など）を指すステートです。テキスト入力フィールドにフォーカスが当たった場合は、その方法（マウスやキーボードなど）に関係なく、常にこのステートが適用されることに注意してください。

キーボードによるナビゲーションに依存している訪問者がサイトをより利用しやすくするためには、このステートでスタイルして、ページ上でインタラクティブな要素の位置が明らかになるようにすることが重要です。要素のレイアウトに影響を与えないように、インタラクティブな要素にアウトラインで設定することをお勧めします。

Visited

visitedステートは、訪問したページのリンクのステートです。このステートは、Noneステートからスタイルを継承しています。

訪問済み状態では、テキスト色、背景色、ボーダー色にのみスタイルを設定することができます。背景色の設定は、すでに別のステートで何かしらスタイルが設定されている場合のみ表示されます。

Placeholder

このステートは、フォームフィールドの「States」ドロップダウンメニューで利用できるようになります。フィールドに入力された文字のスタイルはデフォルト状態のスタイリングを継承しますが、このステートでは、入力前のプレースホルダー・テキストのスタイルを設定することが可能です。

プレースホルダーテキストには、タイポグラフィ、背景、シャドウのスタイルを設定することができます。

Checked

このステートは、要素設定パネルで「カスタムスタイル」を有効にしているフォームのチェックボックスやラジオボタンに対して利用できます。これにより、チェックボックスやラジオボタンのチェック状態のスタイルを設定することができます。

ステートのデフォルトスタイリングに戻す

ステートのスタイル設定が終わったら、以下のいずれかの方法でデフォルトの「None」のステートに戻すことができます。

「States」ドロップダウンメニューから「None」を選択します
キーボードのESCキーを押します（この操作では現在の要素の選択も解除されます）
別の要素を選択します

あるステートでのスタイルを削除する

ステートからすべてのスタイルを削除する手順は次の通りです。

要素を選択します
「States」ドロップダウンメニューからスタイルを削除したいステートを選択します
スタイリングを削除します（インジケーターが青字になっている部分をクリックし「Resetをクリック」）

リンク要素のカレント表示をスタイルする

リンク要素には、カレント表示が設定できます。カレントステートにカスタムスタイルを追加すると、ユーザーがその状態にあるときに、リンク要素がどのように見えるかがメインキャンバスに反映されます。

Current

現在のページ、セクション、タブにリンクされている要素は、All Links タグまたは選択されたリンク要素のクラスに Current state が自動的に追加されます。

Currentステートは、デフォルトの Noneステートからすべてのスタイルを継承しています。

リンクのカレント表示時の操作

リンクブロック、テキストリンク、ボタン、NAVリンクのCurrentステートを設定する場合の操作は次の通りです。

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