ボックスは、セクション、カード、ヘッダー、図形など、基本的なWebサイトの要素を作成するために使用される空の正方形です。

さらに、STUDIOでは、画像、アイコン、動画、iframeなどの要素にはボックスプロパティがあります。したがって、ボックスの追加、配置、サイズ変更、スタイルの設定方法は、画像などの要素も同じ方法です。

ボックスを追加する

ボックスを追加するには、左サイドの要素パネルから正方形をドラッグ&ドロップするか、クリックします。

ボックスを配置、移動する

ボックスや他の要素を配置、移動する方法は、配置とレイアウトについてをご確認ください。

ボックスのサイズを変更する

ボックスや他の要素のサイズを変更するには、要素の端をドラッグします。ドラッグすると自動的に要素にピクセル値が付きます。

あるいは、トップバーに数値を入力してサイズを変更します。サイズについては、こちらをご確認ください。

ボックスのスタイルを変更する

以下のプロパティは、トップバーの「ボックス」タブから、ボックスまた他の要素に適用できます。

  • 角丸
  • 透明度
  • 塗り
  • 枠線
  • シャドウ

トップバーでは、以下の設定も可能です。

  • マージンとパディング:配置とレイアウトについては、こちらをご確認ください。
  • 横幅と縦幅:横幅と縦幅については、こちらをご確認ください。

角丸

要素の角丸に変更すると、設定した値に応じて要素の角が多少丸くなります。 STUDIOでは、角丸に設定する方法は2つあります。

  • トップバーから設定します。
  • キャンバス上で直接、ボックスまたは要素の内側の左上にある丸をドラッグして設定します。

透明度

透明度を使用すると、要素の色の鮮やかさを変更できます。 トップバーから設定できます。

塗り

塗りは要素の背景色です。

カラーパレットについては、こちらをご確認ください。

枠線

ボックスまた要素の全ての辺、または各辺それぞれに線を追加することができます。

枠線については、こちらをご確認ください。

シャドウ

シャドウは、Webページ上のボタンや要素に深みを加えることができます。

STUDIOでは、あらかじめ用意された4つのシャドウスタイルを使用する、またはシャドウのグラフをドラッグして独自のスタイルを作成できます。

シャドウについては、こちらをご確認ください。

Did this answer your question?