条件付きスタイル

条件付きスタイルは、特定の条件下でボックスのスタイル（外観やレイアウト）を変更するための機能です。発生条件を選択したうえで、その条件が発生したときのスタイルを設定します。

条件付きスタイルには次の分類があり、選択中のボックスに対して適用可能な項目のみが表示されます。

条件付きスタイルの解除は、発生条件ごとにまとめて解除する方法と、一部の項目だけを解除する方法があります。

ここでは、分類ごとに代表的な用途と注意点を説明します。

※条件付きスタイルは、レイヤーパネルの最上位のボックス（Baseレイヤー）には設定できません。

ホバー中や入力中など、閲覧者のカーソル操作やフォーカス状態に応じてスタイルを変えます。

ホバーは、閲覧者が要素にカーソルを載せたときのスタイルを変更します。

一般的には、クリックできる要素であることを視覚的に示すために使用します。

in ホバーを使うと、親ボックスのホバー時に連動して子ボックスのスタイルも変更できます。親ボックスにホバースタイルが設定されていない場合、in ホバーの選択肢は表示されません。

例：ボタン全体のホバー時に内部テキストの色も変える場合

フォーカスは、フォームの入力欄や選択肢に対して適用されます。

ユーザーが入力中または選択中の間だけスタイルを変えられるため、入力中のフィールドを明確に示す用途に適しています。

クリック中は、ボタンをクリックしている間のスタイルを指定します。

適用できるのは、HTMLタグが<button>の要素のみです。
例：フォーム送信ボタン、トグル開閉ボタン、ビデオwithボタンのボタンなど

一方、HTMLタグが<a>の要素には適用できません。
例：ページ遷移ボタンなど

[出現時]では、画面の読み込みやスクロールによってブラウザ画面内に出現する瞬間のスタイルを設定できます。

[出現時]の条件付きスタイルと、右パネルの[変形]タブの設定（出現方向や速度）を組み合わせることで、多様なアニメーション表現が可能です。

条件付きスタイル[クローズ]は、トグルボックスにのみ設定できます。

トグルが閉じている状態のホバー時やクリック時などのスタイルを定義できます。

要素に設定されたページリンク先が閲覧中ページと同じ場合のスタイルを設定します。

これにより、サイト内メニューなどで「現在表示中のページ」を視覚的に示せます。

※リンク先がモーダルページまたはリダイレクトページの場合、この設定は利用できません。

[現在のページ]を適用すると、右側に[下層含む]のトグルが表示されます。

[下層含む]をONにすると、リンク先ページの下層ページ閲覧時にも同じスタイルが適用されます。

例：ページリンク /company に対して[下層含む]をONにした場合、 /company/about ページの閲覧時にも同じスタイルが適用されます。

なお、[ホーム]のページには[下層ページも含む]が設定できません。

動的リストやリストで、先頭のリストアイテムのスタイルを変更できます。

例えば、ブログの最新記事だけ大きくして目立たせるといった表現が可能です。

[in 最初のアイテム]は、[最初のアイテム]が条件設定されたリストアイテム内の要素に対して指定します。

先頭の記事のタイトルだけ文字サイズを大きくするなど、先頭アイテム内の一部要素を調整できます。

[カスタム]は、動的ページや動的リストで、紐付いたブール値プロパティがON（true）のときのスタイルを設定できます。ブール値プロパティの詳細は「プロパティ」を参照してください。

例：以下の図は、スタイル変更の発生条件を「[Newアイコンの色]というブール値プロパティがCMSダッシュボード上でONになっていること」ととし、その条件下で「New」の文字色がピンクに変わるよう設定する様子です。

条件付きスタイルが設定されたボックスは、レイヤーパネルから一覧できます。

インホバー in:hover ホバーアクション アニメーション解除 focus

inhover マウスオン アニメーション外す