2026/3/12
［ 初回公開日：
2024/11/14
］
【Studio初心者ガイド】条件付きスタイルとブール値の基本的な使い方｜Editor 5.0対応
※本記事は Studioの「Editor 5.0」に対応しています。
ウェブデザインやプログラミングにおいて、ユーザー体験を向上させるためには、条件に応じて要素の見た目や動作を変える「条件付きスタイル」と、論理的な判定を行う「ブール値（Boolean値）」が重要な役割を果たします。
条件付きスタイルは、ユーザーの操作やページの状態に応じてデザインを動的に変化させる手法です。
一方、ブール値は「真（true）」または「偽（false）」という2つの状態を表すデータ型で、条件が満たされたかどうかを判断するための基本的な概念です。
この記事では、これらの要素がどのように使われ、サイトのデザインや機能性にどのように貢献するのかを詳しく解説します。
条件付きスタイルとは？
条件付きスタイルは、カーソルを要素に合わせた時や、要素が画面に表示された瞬間に、ボタンやテキストのデザインが変化するなど、視覚的に分かりやすい変化をつけることができます。
カーソルの動きやクリック、スクロールに合わせて要素のデザインが変わることで、操作性を良くしたり、わかりやすいデザインにすることで、ユーザビリティを上げる事が可能です。
ブール値とは？
ブール値は、コンピュータ上でのフラグや条件式の判定に使われることが多いです。例えば、特定の操作を行う際に「オン（true）」か「オフ（false）」の状態を確認して処理を進める場合などがあります。
数学の世界で使われる「真（true）」と「偽（false）」の概念と同様で、ある条件が満たされたかどうかを論理的に判定するものです。
真（true）：オン（on）の状態を指します。
コンピュータの判定結果で「この条件は正しい」と認められた場合に用いられます。偽（false）：オフ（off）の状態を指します。
コンピュータの判定結果で「この条件は誤っている」と認められた場合に用いられます。
ブール値の使い方
ブール値は、様々な場面で活用されます。
例えば、ユーザーがあるボタンをクリックしたかどうか、フォームに正しいデータが入力されているかを判定する際など、プログラムの分岐処理で大活躍します。
例
ボタンが押されたかどうかを判定
ボタンが押された？ → true（押された） / false（押されていない）
ユーザーがログインしているかどうかを判定
ログインしている？ → true（ログイン済み） / false（未ログイン
条件付きスタイルの設定方法
条件付きスタイルを付けたいボックスを選択し、エディタの右上にある「条件付きスタイル」の項目（赤四角）を選択すれば、その条件が満たされた際に適用されるスタイルの編集モードとなります。
※公開中のサイトを編集している場合、設定後にサイトを「更新」するまで反映されません
条件付きスタイルの解除方法
条件付きスタイルは、発生条件ごとにまとめて削除する方法と、特定の項目だけを解除する方法があります。
特定条件下のスタイルを一括で削除する
1.条件付きスタイルを設定したボックスを選択し、右パネルの［条件付きスタイル］で対象の発生条件を選びます。
2.右パネルの最下部にある「アニメーションを削除」をクリックし、選択中の発生条件に紐づくスタイルをまとめて削除します。
3.解除が完了したら、公開パネルでサイトを更新します。この操作を行うまで、公開サイトには反映されません。
特定条件下のスタイルの一部を解除する
1.条件付きスタイルを設定したボックスを選択し、右パネルの［条件付きスタイル］で対象の発生条件を選びます。
2.右パネル内で、条件付きスタイルが設定されている項目（赤四角内）の中から該当の項目を選択し、解除します。
3.右パネルで項目名の右側に表示される矢印アイコンをクリックします。
4.解除が完了したら、公開パネルでサイトを更新します。この操作を行うまで、公開サイトには反映されません。
条件付きスタイルの種類
条件付きスタイルには、複数の種類があり、これらを使い分けることで、さまざまなシーンに応じたスタイル変更が可能です。以下は主な条件付きスタイルの種類です。
カーソル
ユーザーがカーソルを合わせた時に発動します。ホバー時の色の変化や、ボタンのエフェクトなど、ユーザーがクリックできる要素を強調する際に使用します。アニメーション
画面のスクロールや読み込みによって要素が表示された瞬間に発動します。出現時にふわっとしたエフェクトを加えたり、要素が動きながら表示されるように設定したりすることで、視覚的に動きのあるデザインを設定できます。
トグル
要素の開閉や表示・非表示を切り替える際に使われます。例えば、FAQページの「よくある質問」のような形式で、ユーザーがクリックした時に詳細が表示される動作を設定できます。リンク
閲覧者に現在のページを視覚的に示す役割があります。リスト
リスト形式で表示された複数のアイテムの中で、特定のアイテム（通常は最初のアイテム）にだけスタイルを適用するために使われます。
ブログ記事のリストや商品リストなどで、最新情報やおすすめ商品を目立たせるのに便利です。カスタム
CMS（コンテンツ管理システム）での動的なページやリストに対して適用するスタイルです。ブール値（true/false）のプロパティを持つ要素にのみ適用でき、条件が満たされた場合にスタイルが変化します。
【種類別】条件付きスタイルの用途と設定
ここでは、それぞれのスタイルの使い方について詳しく解説します。
カーソル
カーソルに関連するスタイル設定は、ユーザーがマウスを要素に乗せたときやクリックしたときに変化を与えるものです。
このスタイルを使うことで、ユーザビリティを上げることができ、クリックや操作を促す効果があります。
ホバー、（in）ホバー
ホバー（赤）は、閲覧者が要素にカーソルを乗せたときに切り替わるスタイルです。クリックできる要素であることを視覚的に示したい場面でよく使われます。
注意：スマホなどタッチデバイスではホバー操作がないため、意図しない挙動が起きる場合があります。タップ操作が必要な箇所では、ホバー以外の表現も検討してください。
［ホバー］を選ぶと、テンプレート（赤四角）が表示されます。
テンプレートを選択すると、［ホバー］条件付きスタイルの設定画面で［変形］と［アニメーション］に値が入った状態になり、設定済みの項目は水色(赤四角）で表示されます。
テンプレートは選ばず、上部の［カスタム設定］（赤四角）をクリックすると、初期状態をベースに数値を調整できます。
また、（in）ホバー（赤四角）を使うことで、要素の内部の特定部分だけにスタイルを適用することが可能です。
たとえば、ボタン全体にホバーのエフェクトを適用し、ボタン内のアイコンやテキスト部分だけ色を変更するなどの応用が可能です。
※親ボックスに何らかの「ホバー」スタイルが設定されていないと、「（in）ホバー」を設定することはできませんので、ご注意ください。
フォーカス
フォーカス（赤四角）は、ユーザーがフォームの入力欄や選択肢にフォーカスを当てたときに適用されるスタイルです。
フォームの入力を強調したり、現在操作中のフィールドを視覚的に示すために活用されます。
クリック中
クリック中（赤四角）は、ユーザーがボタンやリンクをクリックしている最中に適用されるスタイルです
クリックした瞬間にボタンが凹むようなエフェクトを作り出すことで、クリック操作が行われていることを視覚的に示します。
HTMLタグが の要素には適用できません（例：ページ遷移ボタンなど）。
アニメーション
アニメーションは、ユーザーの注目を集めたり、ページ内の動きを視覚的に強調するために使われるスタイル設定です。
特に要素が画面内に表示される瞬間にアニメーションを適用することで、視覚的なインパクトを与える効果があります。
アニメーションは、情報を表示させるための手段としても有効です。
要素が画面内にスムーズに現れることで、ユーザーはコンテンツにストレスを感じることなく、直感的に操作することが可能です。
出現時
出現時（赤四角）の条件付きスタイルでは、ページ読み込み時やスクロールで画面内に要素が現れるタイミングのスタイルを指定できます。
出現時を選ぶと、以下のテンプレート（赤四角）が表示されます。
・下からフェードイン
・右からフェードイン
・左からフェードイン
・ブラーフェードイン
いずれかのテンプレートを選ぶと、条件付きスタイルの編集画面で、変形とアニメーションの設定欄に対応する値が反映されます。設定済みの値は水色で表示されます。
テンプレートを使わずに「カスタム設定」（赤四角）を選ぶと、各数値を最初から自由に設定できます。
トグル
トグル（Toggle）ボックスは、クリックやホバー操作でコンテンツの表示・非表示を切り替えられる要素です。
ボタン部分（Trigger）を操作すると、関連するコンテンツ部分が展開または収納されます。
この機能は、アコーディオン形式のFAQやプルダウンメニュー、サイドバー内の折りたたみコンテンツなど、限られたスペースに多くの情報を整理して表示するときに役立ちます
クローズ
クローズ（赤四角）は、トグルボックスのコンテンツが閉じている状態に適用される条件付きスタイルです。
開閉前の状態で、コンテンツが非表示のときの見た目を指定できます。
条件付きスタイル「クローズ」を使って、通常時と閉じた状態のスタイルの差分を設定すると、トグルの開閉アニメーション表現が可能になります。
リンク
リンクの設定は、ユーザーがどのページにいるかを視覚的に示すために役立ちます。
現在閲覧しているページとリンク先のページが一致した場合、そのリンクに対してスタイルを変更することで、視覚的に「今このページを見ています」と伝えることができます。
条件付きスタイルとして「現在のページ（current page）」を設定すると、リンク先が閲覧中のページと一致した場合だけ指定したスタイルが適用されるようになります。
※モーダルリンクや301リダイレクトのリンクには、この条件付きスタイルは適用できません
現在のページ
現在のページ（赤四角)は、ユーザーがナビゲーションメニュー内のどのリンクをクリックして現在のページを閲覧しているかを視覚的に示します。
たとえば、ナビゲーションメニューのリンクが通常時には青色で表示されている場合、現在のページのリンクは別の色（例えば赤色）に変更され、現在どのページにいるのかをユーザーに伝えます。
※モーダルページやリダイレクトページにはこの設定は適用されません。
また、「下層ページも含む」（赤四角）設定をONにすると、そのリンク先の下層ページを閲覧している時にもスタイルが反映されます。
※[ホーム]のページには[下層ページも含む]が設定できません
リスト
リストは、CMSやコンテンツを整理して表示するために使用されます。特定の条件に基づいてリストを作成することで、コンテンツを効率的に管理・表示することが可能です。
最初のアイテム
「最初のアイテム」（赤四角）は、CMSリストやリスト要素のうち、先頭に表示されているアイテムに対して適用できる条件付きスタイルです。
リスト内で一番上に配置されている要素のみ、通常とは異なるスタイルを指定できます。
この条件付きスタイルを使うことで、一覧の中で先頭に表示されるコンテンツを視覚的に区別できます。
ただし、どのアイテムが「最初」になるかは、CMSの並び順やリストの表示順に依存します。
カスタム
ブール値プロパティが有効なCMSモデルに、連携した動的ページや動的リストで使用できます。
該当のブール値がON（true）の状態に対してスタイルを設定することが可能です。
例えば、CMSリストの中で、新着の記事にだけ「NEW」アイコンを表示させたい時を説明したいと思います。
まずはピンク四角の「＋」ボタン（赤四角）を押して、CMSモデル（記事の集まり）を作成します。
次に、CMSリストの該当モデルの「＋」ボタンをクリックします。
そして「プロパティを追加」（赤四角）をクリックします。
「ブール値」（赤四角）をクリックして追加します。
次に、NEWアイコンを表示させたい記事のブール値をON（赤四角）にします。
エディタに移動し、CMSリストを配置し、今回はNEWと書かれたアイコン（赤四角）を作成して設置します。
次に、「NEWアイコン」を選択した状態で、右パネルの「ブール値」の青い丸をドラッグアンドドロップして、「NEWアイコン」と紐づけます。
これで完了です。
紐づけ後は、ブール値が「ON]になっている記事のみに「NEWアイコン」が表示されるようになります。
まとめ
条件付きスタイルは、ユーザーの操作やウェブページの状態に応じて、柔軟に要素の見た目や動作を変更できる便利な機能です。
カーソル操作によるホバースタイルや、トグル機能、リストの特定アイテムの強調など、多彩なアプローチで視覚的なフィードバックを提供し、ユーザーの操作性を向上させることができます。
条件付きスタイルを効果的に使うことで、訪問者にとって魅力的で操作しやすいサイト作りが可能です。
この記事を書いた人
