ウィンドウ幅にあわせてレイアウトを変更

2007年4月16日 15:35

最近ブログの普及などもありよく見かける３カラムレイアウト。ツールやナビゲーションが区分けされ、分かりやすいのが特徴です。
反面、ブラウザウィンドウ幅が狭いと、メインのコンテンツが入る部分がどんどん狭くなっていったり、横スクロールが出たり、デメリットも。
そこで、ウィンドウの幅に合わせてカラムを変化させるスクリプトの紹介

コチラのスクリプトは、ウィンドウ幅を取得し、幅に合わせたCSSファイルを読み込むものです。読み込むファイルを幅に合わせて３段階選択することが出来ます。
サンプルはコチラ

HTML

<script src="dynamiclayout.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="css/thin.css" title="narrow" />
<link rel="alternate stylesheet" type="text/css" href="css/wide.css" title="normal" />
<link rel="alternate stylesheet" type="text/css" href="css/wider.css" title="wide" />

ウィンドウの幅に関係なく読み込むファイルはtitle="default"を、
幅が１番狭い時に読み込むCSSファイルにtitle="narrow"
幅が中間の時に読み込むCSSファイルにtitle="normal"
幅が広い時に狭い時に読み込むCSSファイルにtitle="wide"
としています。
title="hogehoge"の部分はJavascript側と同期を取れば、どんな名前でも構いません。

Javascript

function dynamicLayout(){
	var browserWidth = getBrowserWidth();

	//狭い時の幅を設定
	if (browserWidth < 750){
		changeLayout("narrow");
	}
	
	//中間の時の幅を設定
	if ((browserWidth >= 750) && (browserWidth <= 950)){
		changeLayout("normal");
	}
		
	//広い時の幅を設定
	if (browserWidth > 950){
		changeLayout("wide");
	}
}

上記では750px以下を狭い時、750px～950pxを中間時、950px以上を広い時の定義

サンプル下部のリンクをクリックすると、ウィンドウ幅に関係なく、レイアウトを変更することが可能です。




アイディーオー証券
お名前 *
メールアドレス *
サイトURL
コメント

Go Page Top