２日目は、Udemyの教材を購入して本格的に「STUDIO」の学習に取り掛かります。
購入した教材はこちらです
①ノーコードで超速WEB制作 STUDIO学習完全パック（初級編・中級編・上級編）
用語解説
・ダッシュボード：様々な設定を行う場所
・エディタ：ページの編集画面
・アーカイブ：実質削除、STUDIOはプロジェクトを完全に削除できない
エディタの理解
「バー」「パネル」「キャンバス」に分けて構成される
「バー」：最上部,レスポンシブバーなどが存在
「キャンバス」：画面中央
「パネル」：画面左
画像や動画の埋め込み
テンプレート素材の利用
画面右下の「？」
ショートカットやヘルプ記事など
ボックスレイアウト手法について
ボックスレイアウト手法とは、
キャンバス内の全ての要素が「ボックス」として成立していること。
→上下で配置、左右で配置、親と子で配置など
メリットが「レスポンシブ」対応が簡単になる
→反面、デザインが少し難しく感じるので慣れるのに時間がかかる
要素の配列的考え方
親要素の中に、子要素を配置する
子要素の配置を変えたいときは「親要素」を選択して移動させる
パディングとマージンの違い
パディング：ボックスの「中」にスペースを入れたいときに設定する値
マージン：ボックスの「外」にスペースを入れたいときに設定する値
→ボックスをドラッグするか、画面上のバーで値を変更できる
マイナスマージン
2つの要素を重ねたいときに使用する
上のバーからしか設定できない
ボックス幅の設定の違い(px,%,auto)
px(ピクセル)：横幅をピクセル値で設定
%：「親要素」の幅を基準として、そこから何パーセントの幅に決めたもの
auto：「子要素」の幅に合わせて親が調整される
→この３つはレスポンシブ対応したときに違いが生じる
親のボックスの幅を変えると
pxは全く変化しない
%は親要素に従って大きさが増減する
autoはボタンの文字を変えるときなどに便利
ボックス幅の設定(flex)
2つの要素を並べると指定できる
要素A以外の幅を要素Bが埋めつくすような設定
応用として、
Aを3flex、Bを1flexで指定すると、
画面幅を3:1のように分けて使用できる
→ギャラリー画像などはflexが便利
ボックス幅の設定(vh)
vh：view heightの訳
画面の高さに応じて要素の高さを変えたいときに使用する
※１番多い使用例は、画面幅いっぱいに画像を配置したいとき
まとめ
画面の幅の設定はいろいろなパターンがあるので、
用途によって使い方を覚えていきたい。
記事作成時間：2h