レイアウト構築の基本を理解しよう ~ 横スクロールが起きない！？ Flex脱却編 ~

2025/11/30 開催「フロントエンドカンファレンス関西」でのオプティム 澤のLT発表資料です。

https://frontend-conf.osaka.jp/

https://fortee.jp/fec-kansai-2025/proposal/e872735f-ffe2-4c53-8bc8-a9bcbe0c1d98

Transcript

1. © 2019-2025 OPTiM Corp. All rights reserved. レイアウト構築の基本を理解しよう ~ 横スクロールが起きない！？ Flex脱却編 ~ 2025/11/30 16:15～16:20 フロントエンドカンファレンス関西2025 #fec_kansai_kwork
2. © 2019-2025 OPTiM Corp. All rights reserved. 2 澤（さわ）  仕事 ◼ 2020年4月 株式会社オプティム入社 ◼ 医療系受託開発のPjMやエンジニア ◼ 技術広報  使ってる技術 ◼ フロントエンド: Vue.js, React, Next ◼ バックエンド: Go  プライベート ◼ CoderDojoたまち チャンピオン ◼ TSKaigi 2025, 2026 の運営スタッフ 自己紹介
3. © 2019-2025 OPTiM Corp. All rights reserved. 3 商号 株式会社オプティム 英語表記：OPTiM Corporation 東京証券取引所プライム市場：3694 所在地 OPTiM TOKYO (東京本社＠浜松町) OPTiM SAGA (佐賀本店＠佐賀大学キャンパス内) OPTiM KOBE （神戸オフィス＠三ノ宮） TECH CENTER IIZUKA （テックセンター飯塚＠九州工業大学飯塚キャンパス前） 代表 菅谷 俊二 （すがや しゅんじ） 設立 2000年６月８日 従業員数 443名 （2025年4月1日現在） Saga Tokyo Kobe 会社概要
4. © 2019-2025 OPTiM Corp. All rights reserved. 4 プロダクト全体像 アグリテック アグリテック アグリテック デジタルヘルス デジタルコンストラクション デジタルヘルス オフィスDX モバイルマネジメント マーケティングDX 映像管理DX オフィスDX その他 プラットフォーム オフィスDX OPTiMは、AI・IoT・Cloud・Mobile・Roboticsを使った 新しい価値を創造し続け、あらゆる産業のDXを推進し、 あらゆる人々に、豊かでサステナブルな未来を実現する企業です プラットフォーム オフィスDX オフィスDX オフィスDX コミュニケーションDX オフィスDX コミュニケーションDX コミュニケーションDX
5. © 2019-2025 OPTiM Corp. All rights reserved. 5 overflow: auto を指定したのに横スクロールできない 長いコンテンツが親要素を突き抜けてしまう モバイルで画面からはみ出してレイアウト崩れ こんな経験ありませんか？
6. © 2019-2025 OPTiM Corp. All rights reserved. 6  実際のコード（簡略版） 実際に起こったこと export const DetailAnswer = ({ answer }: Props) => { return ( <Stack direction='row' gap={1}> <Chip size='small’ label='A’ /> <Answer content={answer}/> </Stack> ); }; Q＆Aを表示するページにおいて、 Chipと回答内容（Answerコンポーネント）を横並びで表示 画面幅が狭くなった時に、 Answerコンポーネント内で親要素のサイズを突き抜けてしまう！
7. © 2019-2025 OPTiM Corp. All rights reserved. 7  実際にブラウザ上にレンダリングされるHTML（簡略版） 実際に起こったこと <div class="MuiStack-root css-1oxswqj-MuiStack-root" style="display: flex; flex-direction: row"> <div class="MuiChip-root ..."> <span class="MuiChip-label ...">A</span> </div> <div class="MuiBox-root ..." ....> <!– Answerコンポーネントのコンテンツ --> </div> </div> </div>
8. © 2019-2025 OPTiM Corp. All rights reserved. 8  犯人は Flexbox を利用していること でした！  Flexbox の暗黙的なルール  Block要素の幅決定 ◼ 親要素（例: 300px）-> 子要素の幅を制限（例: 300px以下） ◼ 親が子の最大値を制限する  min-width: auto が指定されているときの幅決定 ◼ 親要素の幅を拡張（例: 500px）<- 子要素の内容（例: 500px） ◼ 子が min-width: auto により、縮まず親を押し広げる 原因は何だったのか？ Flex の子要素には自動的に min-width: auto および min-height: auto が適用される
9. © 2019-2025 OPTiM Corp. All rights reserved. 9  min-width: auto の罠 ◼ 子要素が親要素を拡張してしまう  不要なdivの増加 ◼ レイアウトのために余計なHTML要素が必要  非セマンティックな構造 ◼ 無意識のうちに意味のないコンテナが量産されることも多い Flexboxの構造的問題 ※ セマンティック: 文の構造によってHTMLのタグを正しく使い分けること これらの問題、Gridで解決できます！
10. © 2019-2025 OPTiM Corp. All rights reserved. 10 解決方法 export const DetailAnswer = ({ answer }: Props) => { return ( <Box sx={{ display: 'grid’, gridTemplateColumns: 'auto minmax(0, 1fr)’, gap: 1, alignItems: 'start’, }} > <Chip size='small’ label='A’ /> <Answer content={answer} /> </Box> );};
11. © 2019-2025 OPTiM Corp. All rights reserved. 11 直感的な幅制御 ◼ Flex: flex-shrink, flex-grow, flex-basis の複雑な組み合わせ ◼ Grid: gridTemplateColumns: ‘auto 1fr‘ などの指定でOK 幅制約が自然に適用される ◼ Flexと違い、子要素が親の列幅を超えることがない 不要な中間要素が不要 ◼ レイアウトのためだけのdivやBoxが削減できる レスポンシブ対応も簡単 Gridの利点
12. © 2019-2025 OPTiM Corp. All rights reserved. 12 Flexbox を使う場面 ◼ 1次元のレイアウト（横並び、縦並び） ◼ アイテム間の余白調整（gap, justify-content） ◼ 中央寄せなどのアライメント Grid を使う場面 ◼ 2次元のレイアウト（行と列） ◼ 固定レイアウト + 可変レイアウトの組み合わせ 今回はこのケース ◼ 複雑なレスポンシブ対応 FlexboxとGridの適切な使い分け
13. © 2019-2025 OPTiM Corp. All rights reserved. 13  Flexbox の min-width: auto, min-hight: auto に注意！  構造的な問題はGridで根本解決！  「とりあえずFlexを使おう」から卒業しよう！ まとめ 適切なレイアウトを手法を選択して保守性のWebサイトを作りましょう！
14. © 2019-2025 OPTiM Corp. All rights reserved.