メインコンテンツにスキップ
ボックスへの色の設定方法

ページに配置したボックスの色を設定する方法をご紹介します。単色・グラデーション、RGBA・HEXコード指定やカラーピッカーなど、豊富な色の選択方法があります。

Saika avatar
対応者:Saika
今週アップデートされました

対象プラン:全プラン


ボックスの色を設定する方法

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

色の選択方法

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

単色・グラデーション切り替え

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

スクリーンショット:単色とグラデーションの切り替えボタンの画像。

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

GIF:グラデーションカラー設定で色の追加や削除を行う様子。

透明(塗りなし)

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

スクリーンショット:ボックスの色を透明(塗りなし)にする様子。

デフォルトカラー

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

スクリーンショット:デフォルトカラー一覧に切り替える様子。

マイカラー(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と表現します。

いずれの方式も、正確な色の指定や他のデザインツールとの連携に便利です。

スクリーンショット:メニュー右横のボタンで切り替えで、RGBAとHEXの切り替えを行う様子。

カラースタイル

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

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

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

スクリーンショット:ラベル付されたカラースタイル一覧。

カラーピッカー

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

スクリーンショット:カラーピッカーが表示されている様子。

色の設定方法

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

  1. 色を変更したいボックスを選択します。 複数ボックスを選択する場合は、Shiftを押しながら複数のボックスをクリックします。

    スクリーンショット:ボックスを選択する様子。

  2. エディタ上部のスタイルバーから[塗り]にカーソルを当て、色を選択します。

    スクリーンショット:一括選択した複数のボックスの色を変更する様子。
こちらの回答で解決しましたか?