対象プラン：全プラン

ページに配置したボックスには、プロジェクト内であらかじめ定義した色やRGBA・HEXコードで指定する色が設定できます。この記事では、色の選択・設定方法をご紹介します。

次の方法で色を選択できます。

メニュー中央部のボタンで単色とグラデーションを切り替えることができます。

グラデーション設定では、色の追加や角度の設定が可能です。追加した色にカーソルをあて[×]をクリックすると追加した色が削除できます。

ボックスの色を透明（塗りなし）にしたい場合に使用します。

メニュー中央部左側のボタンをクリックすると、単色・グラデーションのサンプル色が選択できます。選択後も色の微調整が可能です。

デフォルトカラー内にマイカラーが格納されています。プロジェクト内でよく使う色は、My Colorとして登録・使用できます。

RGBAの数値やHEXコードで色を指定できます。入力方法は、メニュー右横のボタンにて切り替えが可能です。コードで用意された色をStudio上で正確に表現できます。

エディタ上で繰り返し使用する色を「カラースタイル」へ登録し管理することができます。

ページに要素を追加するたびにカラーコードなどで色を設定する必要がなく、登録済みの色を適用するだけで効率良く色の設定・管理が可能です。

詳しい設定方法は、カラースタイルの設定方法をご覧ください。

アイコンをクリックし、別サービスで作成したデザインなどから色を抽出し、エディタ上でその色を利用することができます。

下記の方法で、ボックスに色を設定します。