[CSS]ブラウザのサイズに合わせて垂直・水平方向に可変するレイアウト -SuperStretch!

ブラウザのサイズに合わせて、垂直方向にも水平方向にも可変するレイアウトを紹介します。

デモのキャプチャ

SuperStretch! – A Vertically Fluid Layout Using CSS
デモページ

デモページはブラウザを縦長に変更しても、レイアウトがいっぱいに広がった状態となります。

デモのキャプチャ

ブラウザを縦長にしたキャプチャ

可変レイアウトの実装はHTMLとCSSで実現されています。
対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeなど主要ブラウザに対応しており、IE6はIE7のように振る舞うスクリプト「ie7-js」を使用しています。

実際のサイトに使用されている例も紹介されていました。

サイトのキャプチャ

Webster Sheryn Ltd

サイトのキャプチャ

Webster Sheryn Ltd - Profile

sponsors

top of page

©2018 coliss