[CSS]ブラウザのサイズに合わせて垂直・水平方向に可変するレイアウト -SuperStretch!
Post on:2010年6月21日
ブラウザのサイズに合わせて、垂直方向にも水平方向にも可変するレイアウトを紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010062108.png)
SuperStretch! – A Vertically Fluid Layout Using CSS
デモページ
デモページはブラウザを縦長に変更しても、レイアウトがいっぱいに広がった状態となります。
![デモのキャプチャ](/wp-content/uploads-2010/2010062109.png)
ブラウザを縦長にしたキャプチャ
可変レイアウトの実装はHTMLとCSSで実現されています。
対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeなど主要ブラウザに対応しており、IE6はIE7のように振る舞うスクリプト「ie7-js」を使用しています。
実際のサイトに使用されている例も紹介されていました。
![サイトのキャプチャ](/wp-content/uploads-2010/2010062110.png)
![サイトのキャプチャ](/wp-content/uploads-2010/2010062111.png)
sponsors