STUDIOではリンクのホバー効果や・入力欄フォーカスのときのスタイルを個別に設定することができます。

STUDIOでは、以下の3つの状態を設定できます。

  • ホバー
  • アクティブ
  • フォーカス

ホバー(:hover)

ホバーは、ユーザーが要素の上にカーソルを移動したときに、その要素に適用される効果です。

ボタンやリンクをクリック可能に見せるためによく使われます。

ホバー時のスタイルを設定する

STUDIOで要素にホバー時のスタイルを設定する:

  1. ボックスまたは要素を選択する。
  2. トップバーの「ボックス」タブで、右端にある「ホバー」オプションにチェックをします。
  3. ホバー時のスタイルを設定します。設定が完了したら「ホバー」オプションのチェックを外す、またはページ上のどこでもいいのでクリックをして通常の状態に戻します。
  4. ホバー効果が実際にどのように見えるかライブプレビューを起動して確認をします。

画面右上にあるグレーの「ライブプレビュー」ボタンをクリックしてください。

フォーカス(:focus)

フォーカスは、ユーザーが選択したときのフォームの入力フィールドに適用される効果です。

ユーザーに入力フィールドが選択されていることを明らかにするために使用されます。

フォーカス時のスタイルを設定する

フォーカスはフォームの入力フィールドのみ設定が可能です。

STUDIOで要素にフォーカス時のスタイルを設定する:

  1. フォームの入力フィールドを選択する。
  2. トップバーの「ボックス」タブで、右端にある「ホバー」ボタンのプルダウンメニューの「フォーカス」オプションをクリックします。
  3. フォーカス時のスタイルを設定します。設定が完了したら「フォーカス」オプションのチェックを外して通常の状態に戻します。
  4. フォーカス効果が実際にどのように見えるかライブプレビューを起動して確認をします。

画面右上にあるグレーの「ライブプレビュー」ボタンをクリックしてください。

アクティブ(:active)

アクティブは、ユーザーがクリックした瞬間のフォームボタンに適用される効果です。

アクティブ時のスタイルを設定する

アクティブはフォームボタンのみ設定が可能です。

STUDIOで要素にアクティブ時のスタイルを設定する:

  1. フォームボタンを選択する。
  2. トップバーの「ボックス」タブで、右端にある「ホバー」ボタンのプルダウンメニューの「アクティブ」オプションをクリックします。
  3. アクティブ時のスタイルを設定します。設定が完了したら「アクティブ」オプションのチェックを外して通常の状態に戻します。
  4. アクティブ効果が実際にどのように見えるかライブプレビューを起動して確認をします。

画面右上にあるグレーの「ライブプレビュー」ボタンをクリックしてください。

Did this answer your question?