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

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

デモのキャプチャ

Purely CSS – Faking Minimum Margins
demo

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

HTML

CSS

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

sponsors

top of page

©2018 coliss