条件付きスタイルとは
条件付きスタイルは、特定の条件が発生したときだけボックスのスタイル（色やサイズなどの外観やレイアウト）を変更する機能です。 あらかじめ発生条件を選択し、その条件が発生したときのスタイルを個別に設定します。
条件付きスタイルには次の分類があり、選択中のボックスに対して適用可能な発生条件の項目のみが表示されます。
分類 | 発生条件 | 説明 |
カーソル | ホバー | カーソルを要素に載せたときのスタイルを変更します。 |
カーソル | フォーカス | フォーム入力欄や選択肢が選択されている間のスタイルを変更します。 |
カーソル | クリック中 | ボタンを押している間のスタイルを指定します。フォーム内のボタンにのみ設定できます。 |
アニメーション | 出現時 | 画面の読み込みやスクロールで、要素が画面内に現れたときのアニメーションを設定します。 |
トグル | クローズ | トグルボックスが閉じている状態の見た目を変更します。 |
リンク | 現在のページ | ページリンク先が閲覧中のページと同じ場合に、特定のスタイルを適用します。 |
リスト | 最初のアイテム | リストの先頭アイテム、またはその内側の要素だけデザインを変更します。 |
URLクエリ | 部分一致 | 検索結果の絞り込み条件と、対応するフィルタータグのキーワードが一致した場合にデザインを変更します。 |
カスタム | ブール値 | Studio CMS のブール値プロパティが ON のときだけスタイルを切り替えます。 |
スクロール | スクロール | スクロールに連動するアニメーション表現を設定します。 |
注意：スクロールスタイルの設定方法
スクロールスタイルは、スタイルやアニメーションの設定方法が他の条件付きスタイルと大きく異なります。
設定方法の詳細は、スクロールアニメーションを設定する（Scroll Effect）を参照してください。
条件付きスタイルを設定する
条件付きスタイルを設定するボックスを選択します。
条件付きスタイルは、レイヤーパネルの最上位のボックス（Baseレイヤー）には設定できません。
右パネル右上の[条件付きスタイル]をクリックし、スタイルを設定したい条件を選びます。
パネルが閉じている場合には、右パネルを開いてください。
条件を選択すると、右パネルが条件ごとのスタイル設定モードに切り替わります。
色やサイズ、変形などを通常時と同じように右パネルで設定します。
条件付きスタイルが設定された項目は、右パネル上で色が変わります。 通常時との違いを確認しながら調整します。
公開中のサイトを編集している場合は、公開パネルでサイトを更新します。 この操作を行うまで、公開サイトには反映されません。
アニメーションの設定をする
通常時のスタイルと条件付きスタイルの差分が、動きのあるエフェクト（アニメーション）として再生されます。 アニメーションの動きは、[アニメーション]設定の[イージング]、[時間]、[遅延]で調整します。
詳細は、アニメーションを参照してください。
条件付きスタイルを削除する
条件付きスタイルの解除は、発生条件ごとに一括で削除する方法と、一部の項目だけを削除する方法があります。
特定条件下のスタイルを一括で削除する
特定条件下のスタイルの一部を解除する
をクリックして、通常時と同じ状態に戻します。
条件付きスタイルの種類と用途
ここでは、分類ごとに代表的な用途と注意点を説明します。
ホバー
ホバーは、閲覧者が要素にカーソルを載せたときのスタイルを変更し、クリックできる要素であることを視覚的に示すことができます。
注意：タッチデバイス閲覧時のホバー表現
スマートフォンやタブレットなどのタッチデバイスではホバー操作がないため、タップ後もホバースタイルが残り続けるなど意図しない挙動が起きる場合があります。タップ操作が必要な箇所では、ホバー以外の表現方法の利用を検討してください。
ホバーには、以下のアニメーションテンプレートが備わっており、テンプレートを使用したアニメーション設定が可能です。
いずれも選択せず上部の[カスタム設定]をクリックすると、数値を初期状態から設定できます。
拡大
色の変更
傾ける
影を付ける
いずれかのテンプレートを選択すると、[ホバー]条件付きスタイルの設定画面で[変形]と[アニメーション]の項目に値が反映され、設定済みの値は水色で表示されます。
in ホバー
親要素のホバースタイルに連動して子要素のテキストやアイコンのスタイルを変更します。親ボックスにホバースタイルが設定されていない場合、in ホバーの選択肢は表示されません。
inホバーには、以下のアニメーションテンプレートが備わっており、テンプレートを使用したアニメーション設定が可能です。
拡大
テキスト色の変更
傾ける
影を付ける
例：ボタン全体のホバー時に内部テキストの色も変える場合
ボタン全体を選択し、[ホバー]の条件付きスタイルを設定します。
ボタン内のテキストを選択し、[in ホバー]の条件付きスタイルでテキスト色を変更します。
フォーカス
フォーカスは、フォームの入力欄や選択肢に対して適用されます。
ユーザーが入力中または選択中の間だけスタイルを変えられるため、入力中のフィールドを明確に示す用途に適しています。
クリック中
クリック中は、ボタンをクリックしている間のスタイルを指定します。
適用できるのは、HTMLタグが<button>の要素のみです。
例：フォーム送信ボタン、トグル開閉ボタン、ビデオwithボタンのボタンなど
一方、HTMLタグが<a>の要素には適用できません。
例：ページ遷移ボタンなど
Tips：フォーム入力欄に[フォーカス]と[ホバー]が設定されている場合、両方の条件発生時には、[フォーカス]のアニメーションが優先されます。
出現時
[出現時]では、画面の読み込みやスクロールによってブラウザ画面内に出現する瞬間のスタイルを設定できます。
出現時には以下のアニメーションテンプレートが備わっており、テンプレートを使用したアニメーション設定が可能です。いずれも選択せず上部の[カスタム設定]をクリックすると、数値を初期状態から設定できます。
下からフェードイン
右からフェードイン
左からフェードイン
ブラーフェードイン
いずれかを選択すると、[出現時]条件付きスタイルの設定画面で[変形]と[アニメーション]の項目に値が反映され、設定済みの値はピンク色で表示されます。
注意：出現時スタイルを設定したボックス要素が表示されない
出現時アニメーションの開始位置がスクリーンや親ボックスからはみ出していると、アニメーションが再生されない原因となります。
タブレットやスマートフォンなど、プレビューや公開サイトを表示するデバイスの画面幅がアニメーション開始位置より狭くなると、要素が出現しない場合があります。
クローズ
条件付きスタイル[クローズ]は、トグルボックスにのみ設定できます。
トグルが閉じている状態のホバー時やクリック時などのスタイルを定義できます。
現在のページ
要素に設定されたページリンク先が閲覧中ページと同じ場合のスタイルを設定します。
これにより、サイト内メニューなどで「現在表示中のページ」を視覚的に示せます。
※リンク先がモーダルページまたはリダイレクトページの場合、この設定は利用できません。
[現在のページ]を適用すると、右側に[下層含む]のトグルが表示されます。
[下層含む]をONにすると、リンク先ページの下層ページ閲覧時にも同じスタイルが適用されます。
例：ページリンク /company に対して[下層含む]をONにした場合、 /company/about ページの閲覧時にも同じスタイルが適用されます。
なお、[ホーム]のページには[下層ページも含む]が設定できません。
部分一致
URLクエリフィルターを設定時に、検索結果の絞り込み条件と、対応するフィルタータグのキーワードが一致した場合にデザインを変更します。
in 部分一致
[部分一致]が条件設定された親要素内の子要素に対して指定します。
最初のアイテム
例えば、ブログの最新記事だけ大きくして目立たせるといった表現が可能です。
in 最初のアイテム
[in 最初のアイテム]は、[最初のアイテム]が条件設定されたリストアイテム内の要素に対して指定します。
先頭の記事のタイトルだけ文字サイズを大きくするなど、先頭アイテム内の一部要素を調整できます。
カスタム
例：以下の図は、スタイル変更の発生条件を「[Newアイコンの色]というブール値プロパティがCMSダッシュボード上でONになっていること」ととし、その条件下で「New」の文字色がピンクに変わるよう設定する様子です。
Tips：条件付きスタイル[カスタム]の名称には、CMSダッシュボードで設定したブール値プロパティの名前が反映されます。
スクロール
ページのスクロール位置や要素の表示位置に応じてスタイルを変更できます。 タイムラインとキーフレームを使って、パララックスや進行バーなどの表現を作成できます。
設定方法などの詳細は、スクロールアニメーションを設定する（Scroll Effect） を参照してください。
条件付きスタイルが設定されたボックスを確認する
条件付きスタイルが設定されたボックスは、レイヤーパネルから一覧できます。
レイヤーパネルを開きます。
パネル名[レイヤー]の右側にある[条件を確認]アイコン
をクリックします。条件付きスタイルが設定されたボックス（レイヤー）には[・]が表示されます。
各縦列は、同じ分類の条件付きスタイルごとに並びます。
[・]にホバーすると、設定されている条件の詳細を確認できます。
インホバー in:hover ホバーアクション アニメーション解除 focus
inhover マウスオン アニメーション外す appear