Q&A
「ヘッダー、フッターはソリッドレイアウトで固定幅指定、中身のコンテンツ部分はリキッドレイアウトで可変」ということは、ウィンドウサイズによっては、ヘッダーよりもコンテンツ部分の方が幅が広くなる、という理解でいいでしょうか？
同じページ内において、
ヘッダー、フッターはソリッドレイアウトで固定幅指定、
中身のコンテンツ部分はリキッドレイアウトで可変にすることは可能でしょうか？
そのような実装をしてみたところ、デベロッパーツールでコンテンツ部分の右側に余白ができました。
デベロッパーツールでなく、ブラウザ（Windows10、chrome）でそのまま表示してみると不自然には見えない。
（幅を縮めていくとヘッダー・フッターはそのまま動かず、コンテンツ部分は可変で縮まっていく）
でもタブレット実機で見てみると、デベロッパーツールのような余白が出来ます。
そもそも、ソリッドレイアウトとリキッドレイアウトを混在させて表示させることは出来るのでしょうか。
出来るのであれば、実装方法教えていただきたいです。
※画像ぼかしています。
ありがとうございます！
コンテンツ部分の最大幅は指定しています。（1200px）
ヘッダー・フッターの固定幅も1200px。
それ以下に縮めた時に可変になるという感じです。
とすると、ご提示のスクリーンショットでは、ヘッダーフッターもコンテンツも可変幅、つまり全てリキッドレイアウトになっている、という理解でよろしいですか？
あ、いや、違うのかな？ 「それ以下に縮めた時に可変になる」のはコンテンツ部分だけという意味ですか。
理解しました。
スクリーンショットでは、検証ツールで画面幅を1200pxから少し縮めた状態（850pxくらい）になっています。
なので、ヘッダーフッターが1200pxで固定されていて、
コンテンツが可変で縮んで右に余白ができています。
（うまく説明できずスミマセン(>_<)）
>「それ以下に縮めた時に可変になる」のはコンテンツ部分だけという意味ですか。
そうです！
回答2件
0
そもそも、ソリッドレイアウトとリキッドレイアウトを混在させて表示させることは出来るのでしょうか。
出来るのであれば、実装方法教えていただきたいです。
可能です。
幅をpxなどの絶対単位で指定すればソリッドレイアウト、%などの相対単位で指定すればリキッドレイアウトになります。
つまり、ソリッドレイアウトにしたい要素にはpx単位で幅を指定、リキッドレイアウトにしたい要素は%単位で幅を設定すればいいでしょう。
ただ、混在させると画面サイズによってはバランスが悪くなる可能性があるので一般的には採用しないと思います。
そのような実装をしてみたところ、デベロッパーツールでコンテンツ部分の右側に余白ができました。
それが再現できるコードを提示してもらわないと、解決法の提示は難しいですね。
投稿2021/12/27 09:16
総合スコア34075
回答ありがとうございます！
取り急ぎ出来るかどうかを知りたかったため、コード提示できずに申し訳ございませんでした。
>混在させると画面サイズによってはバランスが悪くなる可能性があるので一般的には採用しない
確かに、横スクロールが発生するとなるとリキッドレイアウトの利点である可読性も良くない気がします。
回答いただきありがとうございました！
0
ベストアンサー
こんな感じでしょうか。
横スクロールが発生してしまうので、あまりいいデザインとは思えないですが……
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/nezm8624/
css
1 body { 2 display: grid; 3 grid: auto-flow / 100%; 4 justify-items: center; 5 } 6 7 header, 8 footer { 9 width: 1200px; 10 } 11 12 main { 13 max-width: 1200px; 14 width: 100%; 15 }
投稿2021/12/27 09:13
総合スコア36960
サンプルまでいただいてありがとうございます！！
header, footer, main の指定は同じです。
やはり、デザイン的に横スクロール発生、右側に余白が出きてしまうのは必須ということのようですね。
このようなレイアウトが混在したサイトが初めてだったので、どうしたものかと悩んでおりました。
大変助かりました！
ありがとうございました！
あなたの回答
tips
プレビュー
