前回はこちら
ボックスレイアウトについて
STUDIOは積み木みたいに積み上げていく「ボックスレイアウト」。
コーディングと同じでheader、main、sidebar、footerみたいに要素を重ねて作り上げていく感じ。
無尽蔵に要素を配置していくデザインじゃないからレスポンシブ化しやすい。
Office製品でいうと×パワーポイント 〇自由度の高いWordというイメージ。
![STUDIOはボックスレイアウトを採用。パワーポイントのように自由配置ではなく、ワードのように上から積み上げていく形式。](https://mogumogu-design.com/wp-content/uploads/220419-500x994.jpg)
要素の追加
要素はpx、%、auto、flex、が指定可能。縦幅はvhもある。
![要素はpxだけでなく%指定ができる。](https://mogumogu-design.com/wp-content/uploads/2022-04-19_22h04_57-1.jpg)
要素内にさらに要素をドラッグ&ドロップして配置できる
入れ子親子構造にできる。
<div>
<div></div>
<div></div>
...
</div>
みたいな感じ。
flexの概念
ボックス内に要素があったり要素をグループ化している場合は矢印アイコンが出現して、それがflexの考え方に沿って配置できる。
flex-direction
![divの中に4つのdivがある状態](https://mogumogu-design.com/wp-content/uploads/2022-04-19_22h12_12.jpg)
これはflex-direction:column;
の状態。
![→マークを押すと](https://mogumogu-design.com/wp-content/uploads/2022-04-19_22h13_16.jpg)
![flex-direction:rowになる](https://mogumogu-design.com/wp-content/uploads/2022-04-19_22h14_55-500x297.jpg)
こんな感じでflexの状態を選択できる!
![ギザギザっぽいやじるし](https://mogumogu-design.com/wp-content/uploads/2022-04-19_22h16_07.jpg)
ギザギザの矢印を押すとflex-wrap:wrap;
と同じ効果。
STUDIOボタン | CSSプロパティ |
---|---|
![]() | flex-direction: column-reverse; |
![]() | flex-direction: column; |
![]() | flex-direction: row; |
![]() | flex-direction: row-reverse; |
![]() | flex-direction: row; flex-wrap:wrap; |
align-items・justify-content
左/上のアイコンを選択するとalign-items
・justify-content
の指定ができる。
![上と左にあるバーみたいなやつはjustify-contentとalign-items](https://mogumogu-design.com/wp-content/uploads/2022-04-19_22h17_39.jpg)
STUDIOボタン | CSSプロパティ |
---|---|
![]() | 上から順に ・ align-items: flex-start; ・ align-items: center; ・ align-items: flex-end; ・ align-items: stretch; ?(align-content: space-between; かも?) |
![]() | 上から順に ・ justify-content: flex-start; ・ justify-content: center; ・ justify-content: flex-end; ・ justify-content: space-between; ・ justify-content: space-around; orjustify-content: space-evenly; ? |