🎠

Framer + RemixでWebサイトをつくる #4 - Stackの説明

2021/12/18に公開

引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。
サイトの要件などに興味ある方は1日目の記事をご覧ください。

4日目 - Stackをつかう前に色々説明

Stack はCSSで言うところのflexboxです。
横や縦にオブジェクトを積む様に並べることからStackということぽいです。


Stackオブジェクトをつくる

使い方は簡単です。次の二つの方法でStackオブジェクトをつくることができます。

Frameからつくる

最初にFrameを作成し、右のコンパネにあるStackの+ボタンをクリックでそのFrameをStackオブジェクトにすることができます。

Shift + S コマンドでつくる

Shift + Sコマンドにするとマウスカーソルが代わります。そのままドラッグ&ドロップでStackコンポーネントを作成することができます。


Stackのレイアウトとプロパティ

子要素の配置

StackにはFrameやコンポーネントを入れ子にできます。
デフォルトだと横方向に積む様になっているので、二個目以降のデザインオブジェクトか他コンポーネントは1つ目のそれの右隣りに配置されます。

また、右のコンパネにあるDirectionをたて方向に切り替えるとレイアウトの方向も横からたてに切り替わります。


Heightが固定値なので親のStackからはみ出ます。

この時にflexboxと同様に配置の揃えDistributeを中央寄せCenterにすると2つのオブジェクトの中央点が親のStackの中央点に合わせて中央寄せになります。
といった様にたて横の切り替えと配置の揃えが簡単に指定できます。配置の揃えDistributeの値はCSSのflexboxのjustify-content(横方向の揃え)と名前がほぼ同じです。

Distribute justify-content 説明 レイアウト
Start flex-start 左寄せ
Center center 中央寄せ
End flex-end 右寄せ
Space Between space-between 最初・最後を両端に配置しほかは均等
Space Around space-around 全体的に均等
Space Evenly - 均等配置のまま中央寄せ

子要素のたて横サイズの可変

Stackの子要素のサイズ(たて横)には Fixed(px), Relative(%), Auto(孫要素の横幅)を指定できますが、さらにFraction(fr)も指定できます。CSSでもFraction(分数)を使えますがそれと同じです。

例えば以下の条件の場合、

  • Stackのwidthが300px
  • Frame Aのwidthを1fr
  • Frame Bのwidthを64px

この場合のFrame Aの横幅は自動で 300px - 64px = 236px ということでレンダリングされます。

当然、親のStackコンポーネントの横幅が変わると中央の位置は変わります。つまり、親のStackコンポーネントが画面全体の横幅と同じ幅をもっていていればレスポンシブにも対応できるので、この場合は親のStackコンポーネントのwidthを100%に設定することで実現できます。CSSと同じですね。


PaddingとGap

StackにはCSSでいう paddinggap 的なものを設定できます。

Padding

Stackに Padding プロパティが用意されています。Paddingを付与するとStackの中に指定の値の余白を設けることができます。

また、Paddingは上下左右に均一に設定もできるし、それぞれに値を設定することもできます。

Gap

Stackに Gap プロパティが用意されています。DistributeStart, Center, Endの場合にのみ設定できる子要素間のスペースです。


今回は長くなったので、次回はStackを使ってレイアウトを組んでいきます。


Discussion