(2017-08-04 07:14修正)
初めて質問させていただきます。
###前提・実現したいこと
現在、Webデザインの勉強中で
HTML, CSSを用いたレイアウトに苦戦しています。
PC用のデザインで下の図のような
デザインをしようとしています。
A,B,Cは固定幅で画面の横幅が伸びたときも
A,B,Cは固定幅のまま画面中央部に配置し、
他の背景だけが伸びるようにしたい場合、
どのように組めば最適でしょうか。
###試したこと
floatで試みたり、
flex-boxで試みたりしていますが、
組み方とCSSのあて方が悪いようでうまくいきません。
今はセマンティックを無視するような
力技で組んでいますが、
もっと分かりやすく
管理しやすい構成にしたいです。
html
<html> <body> <header></header> <main class="clearfix"> <div class="A"></div> <div class="BandC"> <div class="B"></div> <div class="C"></div> </div> </main> <footer></footer> <style> header, footer { position: relative; width: 100%; height: 50px; background: #0468AD; } main { width: 1000px; margin: 0 auto; } .clearfix::after { content: ""; display: block; clear: both; } .A { float: left; width: 600px; height: 400px; background: #719BA5; } .BandC { float: right; width: 400px; } .B, .C { width: 100%; height: 200px; } .B { background: #337D8B; } .C { background: #013356; } header::before { position: absolute; display: block; content: ""; background: #05BAA3; width: calc(50% + 100px); height: 400px; top: 50px; left: 0; z-index: -10; } header::after { position: absolute; display: block; content: ""; background: #1E4F5B; width: calc(50% - 100px); height: 200px; top: 50px; right: 0; z-index: -10; } footer::before { position: absolute; display: block; content: ""; background: #A4E6F3; width: calc(50% - 100px); height: 200px; bottom: 50px; right: 0; z-index: -10; } </style> </body> </html>
###補足情報(言語/FW/ツール等のバージョンなど)
Chrome, Safari, Firefoxは最新版、
IEは10以上の環境で見られるようにと想定しています。
まだ回答がついていません
会員登録して回答してみよう