[CSS]セミリキッドレイアウトの両端に背景画像を配置するスタイルシート

セミリキッドレイアウトの両端にドロップシャドウの背景画像を配置するスタイルシートをSoh Tanakaから紹介します。

実装のイメージ

Tips for Developing Semi-Liquid Layouts
demo

デモでは、入れ子にしたdiv要素にそれぞれ背景画像を設置。
親は中央配置にし、min-width, max-widthを設定。
子はoverflow:hidden;を指定し、paddingなどを設定します。

HTML

CSS

IE6対策としては、スクリプト(JSizes)の使用やIE6のみ固定幅に指定する対応が紹介されています。

応用として、固定サイズのバナーの配置、%指定のカラム、固定+可変のカラムのデモもあります。

デモのイメージ

demo: Flexible Banners

デモのイメージ

demo: % Based Columns

デモのイメージ

demo: Fixed + Liquid Based Columns

sponsors

top of page

©2018 coliss