目次
目次
この文書は、Framerを学ぶ国内ユーザーが韓国語の資料不足で経験する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用している皆さんに少しでもお役に立てれば幸いです。
Stackとは？
Stackは子要素を横または縦に自動的に整列させてくれる特殊なフレームです。
CSSのFlexboxやFigmaのAuto Layoutに似た概念で、コンテンツの整列やレスポンシブな構造の実現に優れています。
Stackの利点
要素を手動で配置しなくてもよい
コンテンツに応じて自動でサイズと整列が調整される
レスポンシブ構造の実現が容易
テキストや画像が変わってもレイアウトが自然に維持される
例えば、ボタンのテキストが変わればボタンの幅も自動調整され、カード内のテキストが増えれば全体の領域が自然に拡張されます。
Stackを作る3つの方法
既存フレームにStack属性を追加
フレームを選択した後、右側の
Layoutを設定
最初からStackフレームを生成
ツールバーで
RowまたはColumnを選択してドラッグ
既存要素をStackとしてまとめる
複数の要素を選択し
右クリック > Add Stackまたはショートカットキー使用 (Mac:Option + Cmd + Return, Windows:Ctrl + Alt + Enter)
Stack属性の詳細
属性 | 説明 |
|---|---|
Direction | 横(Horizontal) / 縦(Vertical)の整列 |
Distribute | 開始/中央/終了または要素間の間隔自動調整 |
Align | 垂直方向基準の整列 ( |
Gap | 要素間の距離を設定、ドラッグで調整可能 |
Padding | Stack内部の余白指定（4辺個別設定可能） |
子要素に応じたStackの自動調整
Shift + Aまたは右クリック > Fit Contentを使用すると、Stackフレームが子要素の大きさに合わせて自動で調整されます。
Stack使用例
ナビゲーションバー: ロゴ + メニュー (横Stack)
カードコンポーネント: 画像 + テキスト + ボタン (縦Stack)
ボタン構成: テキストの長さに応じて幅の自動調整 (
Fit Content)
レスポンシブなレイアウト構成も可能です
ページ全体にStackを適用することで、ブレークポイントごとに構造的な変更が容易になります。
上部(Header)、本文(Body)、下部(Footer)など各セクションをStackで構成して管理すれば、整列や間隔の変更が直感的です。
この文章はFramer公式ドキュメント'Stacks and Relative Positioning in Framer'を翻訳・アレンジしたコンテンツです。
