![見出し画像](https://assets.st-note.com/production/uploads/images/142978749/rectangle_large_type_2_c345c1560e38f9e6fb28843feb48927f.jpeg?width=1200)
STUDIO基本操作解説(ボックス幅設定)#3
こんにちは!ノーコードWebクリエイター(STUDIO)のワタナベです。
基本操作の解説も残り2回となりました。引き続き頑張っていきましょう!
ボックス幅の設定
Px:ボックス(文字、画像)のサイズが一定に保たれる設定です。
![](https://assets.st-note.com/img/1717500599570-7ui10cvppf.png?width=1200)
%:親要素の幅を基準にそこに対して何%でボックス幅を決定する設定です。
![](https://assets.st-note.com/img/1717500585531-Lwd55hh2ip.png?width=1200)
auto:子要素幅に合わせて要素幅が決定する設定です。
![](https://assets.st-note.com/img/1717500611391-xXtfS18hmG.png?width=1200)
flex:横幅でflexの値で分割される(3:1)
![](https://assets.st-note.com/img/1717502255564-C2ELqepQHL.png?width=1200)
vh:画面の高さに応じて要素の高さを変える設定です。(縦幅)
トップ画像を画面いっぱいにしたい時などに活用します。
![](https://assets.st-note.com/img/1717502514330-564FTuHlEk.png?width=1200)
角丸
ボックスの角を丸くします。
数値から選択、ボックスからドラッグ
基本操作#2で説明した「ボタン作成時」に使うことが多いです。
透明度
透明度を親ボックスにかける場合文字に対しても透明度がかかります。
ボックスの色だけに透明度をかける場合は、色選択の場所から透明度を調整します。使い分けをできるようにしましょう!
文字の透明度も下げる場合
![](https://assets.st-note.com/img/1717503103627-UbKMtB4izP.png?width=1200)
背景色のみ透明度を下げる場合
![](https://assets.st-note.com/img/1717503139165-8oZkZumYxN.png?width=1200)
カラー
単色
色の選択肢は下記画像の位置をいじると選択できます。
![](https://assets.st-note.com/img/1717504381473-mXBV34JJVY.png?width=1200)
グラデーション
操作方法は単色と同様です。
グラデーションでかかっている向きを変更したり、濃度を変えられたりします。
![](https://assets.st-note.com/img/1717504389659-4wVgIKdGE6.png?width=1200)
終わりに
筆者はノーコードのWeb制作を専門としていて、制作や講師をしています。もし、お困り事があればお問い合わせよりご連絡ください。最後までお読みいただきありがとうございました。
こちらもチェック☑️ ▷▷X ▷▷ instagram
この記事が気に入ったらサポートをしてみませんか?