こんにちは、福岡のホームページ制作シンス株式会社の越水です。
こんな感じでウインドウに合わせて幅100％の見出しのデザインとかってよくありますよね。
で、このようなデザインで画像にしておきたいのは真ん中だけ、ということが多々あります。
なんでかって言うと画像をそのまま幅100％表示させてしまうと、画像幅以上にウインドウが広がったときにせっかく作成した画像がボヤけてしまったりするからです。
なので上のイメージのように真ん中部分だけ切り取って、margin: 0px auto; などで常にメインイメージは中央に表示される、というようなレイアウトを作るのがよくあるやり方です。
そうすると問題になるのがエリア全体の背景です。
この例の場合、中央でグラデーションしているので左側と右側の背景色が別々になってしまっているんですね。
このケースだと中央に透過画像を設置して、背景となる要素はCSSでグラデーションをかけるといったやり方もありそうですが、今回は左右を別々の背景にする方法を紹介します。
HTMLは次のようになります。
1 2 3 | <div class="wrap"> <div class="image"><img src="image01.png" height="300" width="1000" alt=""></div> </div> |
全体を囲うdivがあって、そのなかに中央配置するためのdivがある。シンプルなHTMLですね。
次はCSSです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .wrap { height: 300px; background: #6D7088; //全体の背景 position: relative; } .wrap:before { width: 50%; height: 100%; content: ""; position: absolute; top: 0; left: 50%; background: #22202B; //右側の背景 } .wrap .image { position: absolute; left: 50%; margin-left: -500px; //画像幅1000pxとしてその半分をネガティブマージン } |
.wrapでは全体での背景を設定して、その後 .wrap:beforeで擬似要素を作って右側の背景を設定しています。
.imageはこのままだと絶対配置された .wrap:beforeに隠れてしまうので、同じように絶対配置で中央に画像をレイアウトしています。
するとこのような画像中央配置、ウインドウサイズを広げても画像は拡大することなく左右別々の背景が横に伸びる、という表示を作ることができます。
地味なテクニックですが、ウインドウ幅100％のダイナミックなWebデザインは増えているのでどこかで使う機会があるかもしれません。
ネットショップ、採用向けサイト、ランディングページなど、様々なホームページ制作に対応いたします。
