[CSS]ブラウザの幅が小さい時でも最小限のスペースを確保するスタイルシート
Post on:2009年10月8日
sponsors
詰め物をせずに、ブラウザの幅が小さい時でも最小限のスペースを確保するスタイルシートをBuild Internet!から紹介します。
Purely CSS – Faking Minimum Margins
demo
ブラウザの表示領域が大きい時はコンテンツを中央に配置し、小さい時は左側にスペース（200px）を確保します。
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div class="padding"> <div id="content">コンテンツ</div> </div> </div> </textarea> |
CSS
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> #wrapper{text-align:center; padding-right:200px;} .padding{width:960px; margin:0px auto;} #content{width:760px; float: right;} </textarea> |
仕組みは、外側のdiv要素（#wrapper）で中央配置とpaddingを設定し、その内側にスペースを確保するためのdiv要素（.paddign）を配置するものとなっています。
sponsors
