対象プラン:全プラン
ボックスの色を設定する方法
ページに配置したボックスには、プロジェクト内であらかじめ定義した色やRGBA・HEXコードで指定する色が設定できます。この記事では、色の選択・設定方法をご紹介します。
色の選択方法
次の方法で色を選択できます。
単色・グラデーション切り替え
メニュー中央部のボタンで単色とグラデーションを切り替えることができます。
グラデーション設定では、色の追加や角度の設定が可能です。追加した色にカーソルをあて[×]をクリックすると追加した色が削除できます。
透明(塗りなし)
ボックスの色を透明(塗りなし)にしたい場合に使用します。
デフォルトカラー
メニュー中央部左側のボタンをクリックすると、単色・グラデーションのサンプル色が選択できます。選択後も色の微調整が可能です。
マイカラー(My Color)
デフォルトカラー内にマイカラーが格納されています。プロジェクト内でよく使う色は、My Colorとして登録・使用できます。
注意:2025年3月13日よりマイカラーへの色の新規登録機能を停止し、2025年4月下旬を目処にMy Color機能自体の提供を終了します。今後はカラースタイル機能をご利用ください。詳しくは、マイカラーへの新規登録停止と機能提供終了についてをご覧ください。
RGBA数値・HEXコード指定
RGBAの数値やHEXコードで色を指定できます。入力方法は、メニュー右横のボタンにて切り替えが可能です。コードで用意された色をStudio上で正確に表現できます。
Tips:RGBA・HEXとは?
RGBA
RGBAは赤(R)、緑(G)、青(B)、透明度(A)の4つの値で色を表現する方式です。各値は0から255の範囲で指定します。透明度は0(完全な透明)から1(完全な不透明)の範囲で設定できます。
HEX
HEXコードは16進数で色を表現する方式です。例えば、白色は#FFFFFF、黒色は#000000と表現します。
いずれの方式も、正確な色の指定や他のデザインツールとの連携に便利です。
カラースタイル
エディタ上で繰り返し使用する色を「カラースタイル」へ登録し管理することができます。
ページに要素を追加するたびにカラーコードなどで色を設定する必要がなく、登録済みの色を適用するだけで効率良く色の設定・管理が可能です。
詳しい設定方法は、カラースタイルの設定方法をご覧ください。
カラーピッカー
アイコンをクリックし、別サービスで作成したデザインなどから色を抽出し、エディタ上でその色を利用することができます。
色の設定方法
下記の方法で、ボックスに色を設定します。