ブラウザサイズによってレイアウトを変えるテクニック

user-pic
0

Javascriptでブラウザのサイズを取得して、あらかじめ数種類(デモでは7種類)設定したBody要素のclass名に書き換えて、リキッドレイアウトを実現させるテクニックがA List Apartさんで紹介されています。

A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique
デモページを見て参考にするしかなさそうですが、非常に簡単に実装できます。

ヘッド部分で、変化させるブラウザサイズを設定した外部jsを読み込んで

Body要素のclass名を

<body class="initial">

このようにしておきます。

上記部分を入れておくと、現在のブラウザサイズとモードを表示してくれます。

あとはスタイルシートを

.initial .contents {
	width: 760px;
}
.pda_ver .contents {
	width: 60px;
}
 ・
 ・
 ・
.screen_wide .contents {
		width: 1200px;
}

このようにしていけば、ブラウズサイズごとに異なるレイアウトが可能になります。

この方法なら、固定幅のリキッドレイアウトが可能になり、ブラウザサイズによって特定のボックスを非表示にしたり、フォントサイズを変えたりすることもできますね。

Javascriptも非常にシンプルなので、切り替えの種類を増減させたり、ブラウザの高さも絡めたりし易いです。

関連のありそうな記事

トラックバック(0)

トラックバックURL:

コメントする

RSS

楽天おすすめ

Tag Cloud

SEO対策

Sponsor Site

Category

Archives

Amazonおすすめ

Copyright © 2008 Trendspotting All rights reserved.