更新日:2020.11.27HTML/CSSこんにちは、福岡のホームページ制作シンス株式会社の越水です。こんな感じでウインドウに合わせて幅100%の見出しのデザインとかってよくありますよね。このようなデザインで画像にしておきたいのは真ん中だけ、ということが多々あります。なんでかって言うと画像をそのまま幅100%表示させてしまうと、画像幅以上にウインドウが広がったときにせっかく作成した画像がボヤけてしまったりするからです。常にメインイメージは中央に表示される、というようなレイアウトを作るのがよくあるやり方です。すると問題になるのがエリア全体の背景です。この例の場合、中央でグラデーションしているので左側と右側の背景色が別々になってしまっているんですね。このケースだと中央に透過画像を設置して、背景となる要素はCSSでグラデーションをかけるといったやり方もありそうですが、今回は左右を別々の背景にする方法を紹介します。HTMLは次のようになります。alt=""></div></div>全体を囲うdivがあって、そのなかに中央配置するためのdivがある。シンプルなHTMLですね。.wrap:beforeで擬似要素を作って右側の背景を設定しています。.wrap:beforeに隠れてしまうので、同じように絶対配置で中央に画像をレイアウトしています。するとこのような画像中央配置、ウインドウサイズを広げても画像は拡大することなく左右別々の背景が横に伸びる、という表示を作ることができます。地味なテクニックですが、ウインドウ幅100%のダイナミックなWebデザインは増えているのでどこかで使う機会があるかもしれません。ネットショップ、採用向けサイト、ランディングページなど、様々なホームページ制作に対応いたします。