テキストスタイル・カラースタイルとは

スタイルとは

スタイルは、テキストや色などのデザイン設定をあらかじめ登録し、プロジェクト内で繰り返し使い回せる機能の総称です。

Studioには、テキストの設定をまとめる「テキストスタイル」と、色の設定をまとめる「カラースタイル」の2種類があります。それぞれ独立した機能で、対象とする設定項目や登録場所が異なります。

この記事では、スタイルという概念の全体像と、2種類のスタイルの違いを解説します。各スタイルの登録・適用方法などの詳しい操作は、それぞれの記事を参照してください。

Tips：「条件付きスタイル」と「テキストスタイル／カラースタイル」

「スタイル」という語は、条件に応じて見た目を切り替える「条件付きスタイル」という別機能でも使われています。

条件付きスタイルは、この記事で扱う「登録して使い回す」スタイルとは異なる機能です。ホバーやスクロールなど特定の条件下で、ボックスの見た目やレイアウト（スタイル）を切り替えたい場合は、条件付きスタイルを参照してください。

スタイルを使うと、次のような場面で制作・運用を効率化できます。

サイト全体のトーンを統一する
見出しや本文、ブランドカラーなどをあらかじめスタイルとして登録しておくことで、ページごとに設定をやり直す必要がなくなります。
チーム制作時の設定を統一する
プロジェクト内で共通のスタイルを使うことで、メンバーごとの設定のばらつきを防ぎます。
サイト全体の変更をまとめて反映する
登録済みのスタイルを編集すると、適用しているすべての箇所に変更が反映されます。要素ごとに個別で変更する手間がかかりません。

Studioでは、テキストとカラーをスタイルとして登録できます。

種類	登録できる主な項目	登録場所
テキストスタイル	フォント、サイズ、太さ、行高、間隔、方向、下線・斜体など	スタイルパネル > [テキスト]タブ
カラースタイル	背景色、テキストカラーなど、サイト上で繰り返し使用する色	スタイルパネル > [カラー]タブ

テキストスタイルは、フォントやサイズなど、テキストの設定をまとめて管理する機能です。

一度登録すると、新しいテキストにもワンクリックで同じ設定を適用できます。色・シャドウ・整列位置はテキストスタイルの対象外で、テキストボックスごとに個別で設定します。

詳しい登録・適用・削除方法は、テキストスタイルを参照してください。

カラースタイルは、ブランドカラーなど繰り返し使用する色を登録・管理する機能です。

ラベル付けや階層分けで整理できるため、使用する色数が多いサイトや、チームでの制作でも色を効率的に管理できます。

詳しい登録・適用・削除方法は、カラースタイルを設定するを参照してください。

登録済みのスタイルは、左パネルのスタイルパネルから一覧で確認できます。

Tips：テンプレートに登録されているスタイルを編集する

Studio.Storeのテンプレートには、あらかじめテキストスタイル・カラースタイルが登録されています。

デザインを調整する際は、スタイルパネルで登録済みの内容を確認してください。既存のスタイルを直接編集することで、テンプレート全体の見た目を効率よく調整できます。

スタイルを設定した要素をコピー＆ペーストする際は、設定の引き継がれ方に注意が必要です。

見た目（フォントや色などの設定値）は維持された状態でペーストされますが、テキストスタイル・カラースタイルとしての登録は引き継がれません。

ペースト先のプロジェクトでも管理したい場合は、あらためてスタイルとして登録してください。

テキストスタイル・カラースタイルは、変更箇所や変更者などの情報を「バージョン」として保存し、復元できるバージョン管理機能の対象データです。誤って変更した場合も、必要に応じて元の状態に戻せます。