メインコンテンツにスキップ
ボックスに枠線を設定する

ボックスに枠線を追加する方法をご紹介します。枠線の色や種類を設定したり、辺ごとに枠線の適用箇所や太さを指定したりすることができます。

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

ボックスの枠線

ボックスを囲む枠線のスタイルが設定できます。枠線のデザイン、太さ、色などを細かく調整できます。ボックスに枠線を追加することで、コンテンツの区切りを明確にしたり、デザインにアクセントを加えることができます。

太さの設定

パネル中央部にて枠線の太さが設定できます。四辺まとめて、または辺ごとに個別で設定することも可能です。

スクリーンショット:枠線の太さを設定する様子。

種類の設定

目的に合わせて、直線、波線、点線、二重線のいずれかを選択できます。パネル上の[スタイル]にカーソルをあてるとスタイルが表示されます。

スクリーンショット:枠線の太さを設定する様子。

色の設定

登録済みのカラー

プロジェクト内でよく使う色は、カラーパレットにマイカラーとして登録できます。不透明度が設定されている場合は、ベースの色と不透明度設定後の色がスラッシュで表示されます。

スクリーンショット:カラーパレットにマイカラーから選択する様子。

未登録の色は、[+]からマイカラーに追加できます。

スクリーンショット:新たにカラーをマイカラーとして登録する様子。

RGBAの数値指定、HEXコードの指定

RGBAの数値やHEXコードで色を指定することができます。数値右横のボタンで切り替えが可能です。

スクリーンショット:RGBAの数値指定またはHEXコードを指定する様子。

カラーピッカー

カラーピッカーを使うと、画面上のあらゆる色を抽出することができます。

スクリーンショット:カラーピッカーを利用する様子。

透明(塗りなし)

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

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

設定手順

  1. ボックスを選択

    枠線を設定したいボックスを選択します。 複数のボックスの選択:Shiftを押しながら複数のボックスをクリックします。

    スクリーンショット:枠線を設定する様子。

  2. 枠線から設定

    エディタ上部のスタイルバーから[枠線]にカーソルを当てます。枠線の表示箇所、スタイル、色を設定します。

    スクリーンショット:枠線を設定する様子。

こちらの回答で解決しましたか?