異なる状態での見え方や動作を変えることで、要素にインタラクティブ性(ユーザーとウェブサイトの双方向の反応)を持たせることができます。


このレッスンでは

  1. さまざまな状態で要素をスタイル設定する
  2. デフォルト状態のスタイリングに戻る
  3. ある状態の要素のスタイリングを削除する
  4. リンク要素の現在の状態をスタイリングする
  5. スタイルがどこから継承されるかを理解する

について説明しています。

1.様々な状態の要素にスタイルを適用する

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

The states dropdown menu includes none, hover, pressed and focused states as options. The dropdown menu is highlighted on the selector section of the style panel.

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

A button element is selected and showing a green hover class state in the selector section.

スタイリングはいくつでも選択することができます。ここで行ったスタイリングの変更は、ユーザーがこの要素と対話するときに表示されるものです。

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

状態メニュー(ドロップダウン)

ドロップダウンメニューから、スタイルを設定する状態を選択します。これで、スタイルパネルで行った変更は、選択した状態に対して保存されます。

None(なし)状態

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

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

hover(ホバー:訪問済)状態

ホバー状態は、マウスポインタを要素に重ねたときに表示されます。多くのタッチデバイスではホバー操作ができないため、ブレークポイントが小さくなるように設計する場合は、この点を意識してください。

クリック済みの状態

プレス(pressed )またはアクティブ( active )状態は、要素をクリックしたり押したりしたときに表示される状態です。pressedはhoverの状態であるため、この状態はhoverの状態を継承しています。


フォーカス状態

ボタンやリンクなどの特定のインタラクティブ要素にフォーカスを当てたい場合、キーボードを使用してそれらの要素にタブ入力することで、アクティブにすることなく、フォーカスを当てることができます。マウスやポインタデバイスでインタラクティブ要素をクリックすると、それらの要素がフォーカスされ、アクティブになります。この状態は、キーボード、マウス、または指のタップによってインタラクティブ要素がフォーカスされたときの状態をエミュレートします。

フォーカス(キーボード)状態

フォーカス状態と同様に、この状態はインタラクティブな要素にフォーカスが当たっているが、必ずしも活性化されていない場合(例えば、キーボードで要素にタブキーを入力した場合)をエミュレートするものである。テキスト入力フィールドにフォーカスが当たった場合は、その方法(マウス、キーボードなど)に関係なく、常に適用されることに注意してください。


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


訪問状態

訪問済み状態とは、リンクが訪問された状態である。この状態は、none状態からスタイルを継承しています。


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

プレースホルダー

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


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

Step one on the left, select the input field of a form. Step two on the right, select the placeholder state from the dropdown states menu.

フォームの入力フィールドを選択し、セレクタの「状態」ドロップダウンメニューを開いて、プレースホルダーにスタイルを設定します。

チェック状態

この状態は、「要素」の設定で「カスタムスタイル」を有効にしているフォームのチェックボックスとラジオボタンの「状態」ドロップダウンメニューで利用できます。これにより、チェックボックスやラジオボタンのチェック状態のスタイルを設定することができます。


デフォルトの状態のスタイルに戻す

状態のスタイル付けが終わったら、以下のいずれかの方法で、デフォルトの「なし」の状態に戻すことができます。

  1. 「状態」ドロップダウン・メニューから「なし」を選択する
  2. キーボードのESCキーを押す(この操作で、現在の要素の選択も解除されます)。
  3. 別の要素を選択する

3.ステート内の要素のスタイルを削除する

状態からカスタムスタイリングまたはすべてのスタイリングを削除する手順


  1. 要素を選択します。
  2. 「状態」ドロップダウン・メニューから状態を選択します。
  3. 任意のスタイルを削除する(青色)

4.リンク要素やタブの現在の状態をスタイリングする

リンク要素にも現在の状態があります。現在の状態にカスタムスタイルを追加すると、ユーザーがその状態にあるときに、リンク要素がどのように見えるかが反映されます。

現在の状態(セレクタ内の緑色のタグ)

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

A link element is selected with a current state selected in the selector section. There are 3 selectors being inherited. The link element has a class called Logo block.

Current状態は、デフォルトの "None "状態からすべてのスタイルを継承している。

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

リンクブロック、テキストリンク、ボタン、ナビリンクの現在の状態にアクセスは以下の手順で行います。

  1. リンク要素を選択し、Dキーを押してリンク設定を開く
  2. ページオプションを選択し、ドロップダウンから現在のページを選択します(リンクがホームページにある場合、ホームページを選択します)。
  3. Sキーを押して、スタイルパネルに移動します。リンクにクラスを適用している場合は、セレクタフィールドに緑色の現在の状態が有効になっていることが確認できます。そうでない場合は、セレクタをクリックし、開いたドロップダウンから「すべてのリンク」タグを選択します。現在の状態が、このタグにも適用されます。
Step one on the left, select a link element. Step two on the right, select the home page from the link settings page drop down menu to link the element to the home page..
Step three on the left, while the link element is still selected, select the All Links tag from the drop down menu. Step four on the right, notice a green "current" state has been added to the All Links tag.
A navigation link called navigation item includes a current state in the selector section inheriting three selectors.

また、リンク設定でページセクションオプションを選択することもできます。ページのそのセクションにスクロールしたときに、その要素のセレクタフィールドに現在の状態が表示されます。これは、スクロールすると固定されるボタンやリンクのスタイルを設定するのに便利です。

現在の状態をスタイリングした後、リンク設定を更新して、ボタンやリンク要素を他の任意のページやページセクションにリンクさせることができます。

タブの現在の状態を選択する

アクティブなタブと非アクティブなタブを区別するために、「現在のタブ」を通常のタブと異なるスタイルにすることができます。例えば、フォントの色や背景色を通常のタブとは異なるものに編集することができます。

[カレント]タブのスタイルを設定するには

  1. アクティブなタブリンクを選択します。
  2. それにクラスを割り当てる。自動的に「カレント」状態が表示されます


セレクタに現在の状態インジケータが表示されているときに、リンクのデフォルトの状態をスタイル付けする。


デフォルトの状態をスタイルしたいときに、現在の状態を削除するには、いくつかの方法があります。一番手っ取り早いのは、継承メニューでデフォルト、ベースクラスを選択する方法です。

The default base class of a link element called Navigation item is highlighted in the inheritance drop down menu. The orange 3 selectors tag is also highlighted in the inheritance indicator.

また、「要素設定」パネルでリンクの設定を一時的に削除し、リンクのクラスをスタイル設定した後、リンクの設定を再度行うこともできます。リンク設定を削除したくない場合は、リンク要素を複製し、複製した要素のリンク設定を削除し、クラスを編集し、終了後に複製した要素を削除してください。

5.スタイルがどこから継承されるかを理解する

すべての状態は、"none "の状態からスタイルを継承しています。「Pressed」は「hover」状態からスタイルを継承します。スタイルがどこから継承されているかは、セレクタフィールドのすぐ上にある継承インジケータをクリックすることで確認できます。

The inheritance indicator is highlighted showing there are 5 selectors from which styles are being inherited from. The inheritance dropdown menu is highlighted as well showing the different states.

ある州にスタイルを追加すると、「州」メニューのドロップダウンアイコンが青色に変わります。そして、Statesのドロップダウンメニューを開くと、その州にローカルスタイルがあることを示す青い丸が表示されます。

A link element called Nav link is currently in the "current" and "pressed" state. A down facing carrot icon is highlighted to show the dropdown menu of the states with a blue dot indicator on the Hover and Pressed states. The hover and pressed states are highlighted with their blue indicator.