[CSS]ブラウザの幅が小さい時でも最小限のスペースを確保するスタイルシート

詰め物をせずに、ブラウザの幅が小さい時でも最小限のスペースを確保するスタイルシートをBuild Internet!から紹介します。

Purely CSS – Faking Minimum Margins
demo

ブラウザの表示領域が大きい時はコンテンツを中央に配置し、小さい時は左側にスペース（200px）を確保します。

HTML

<div id="wrapper">
<div class="padding">
<div id="content">コンテンツ</div>
</div>
</div>

CSS

#wrapper{text-align:center; padding-right:200px;}
.padding{width:960px; margin:0px auto;}
#content{width:760px; float: right;}

仕組みは、外側のdiv要素（#wrapper）で中央配置とpaddingを設定し、その内側にスペースを確保するためのdiv要素（.paddign）を配置するものとなっています。

Post on:2009年10月8日