jQueryを使った基本的な擬似フレーム

以前から作成していた擬似フレームページ (frame-like pages)を、フレームを使わずに、スタイルシート (CSS)とJavaScriptライブラリであるjQueryを使用して実現する方法の紹介します。
縦横のフレーム分割が多数あるような構成のサイトも置き換え可能です。高機能版はこちら

  1. 擬似フレームとは
  2. どうすれば擬似フレームとなるか
  3. 各部のサイズと配置を決める
  4. HTMLを作成する
  5. スクリプト（JavaScript）を作成する

# 擬似フレームとは

擬似フレームとは、「疑似フレーム」や「CSSフレーム」、「CSSフレーム」、「overflowフレーム」と呼ばれているものです。

一般に、frame要素を使ったページにおいては、以下のメリットとデメリットがあります。

メリット
本文部分とその他のメニュー部分などが連動してスクロールしない。

デメリット
個々のページをURLで紹介できない。
SEO対策上の不利。

HTMLでは使われることが少なくなっていますが、このメリットが大きいため、クライアントアプリケーションではよく使われる画面構成です。
例えば、Windowsのエクスプローラーもフレームですし、iTunesもフレームです。


iTunesの例。

擬似フレームはそのデメリットをスタイルシートとJavaScriptで解消しつつ、フレームのメリットを享受する方法です。
なお、JavaScriptを使うのは、IE6 (Internet Explorer)でも疑似フレーム可能とするためです。

(*)
余談ですが、SEO対策においては、正しくnoframe要素を使えばほとんど問題ないと思います。

_^_

# どうすれば擬似フレームとなるか

擬似フレームそのものはJavaScriptを使えば特に難しいことはありません。
body要素の箱に、ヘッダー・メニューなどのdiv要素を適切なサイズにして配置していくだけです。サイズの算出にJavaScriptを使用します。

その際、positionはabsoluteで各divを絶対座標で配置します。
また、メニュー (menu)と本文 (main)はスクロール可能 (overflow:atuo)にし、その他はスクロール不可 (overflow:hidden)にします。

_^_

# 各部のサイズと配置を決める

各部分の配置と、サイズを決めます。

といってもそれほど複雑ではありません。
今回は「ヘッダー」と「フッター」、「メニュー」と「本文」という構成にします。
図で示すと以下のとおりです。

配置とサイズを図で示すと以下の通りです。top、leftはposition:absoluteでの各divの絶対座標です。また、「0」は「オー」ではなく、「ゼロ」です。
左側にメニューを配置した、２カラムのよくある構成です。

というわけで、各部分の場所が決まりました。
この図を元に各部分の開始位置、サイズを設定します。

x と y はbody要素のサイズそのものですので、これはいずれも100%です。
その他の l, m, n の値を適当に決めます。今回は以下の通りとします。
l = 156px
m = 30px
n = 70px

_^_

# HTMLを作成する

値が決まったところで、ベースとなるHTML文章を作成します。
ヘッダー、フッター等、載せるべきものは決まっているので、特に迷うこともありません。せっかくなので、HTML5にします（HTML5独自の機能は使いませんが）。

HTMLは以下の通りです。

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="content-style-type" content="text/css">
	<meta http-equiv="content-script-type" content="text/javascript">
	<title>frame-like page</title>
	<link rel="stylesheet" href="./csf.css">
	<script language="JavaScript" type="text/javascript" src="./jquery-1.5.min.js"></script>
	<script language="JavaScript" type="text/javascript" src="./cssframe.js"></script>
</head>
<body id="body">
<div id="header_wrapper">
	<div id="header">
		<span>Header</span>
	</div>
</div>
<div id="main_wrapper">
	<div id="main">
		Main
	</div>
</div>
<div id="menu_wrapper">
	<div id="menu">
		<span>Menu</span>
	</div>
</div>
<div id="footer_wrapper">
	<div id="copyright">
		<span>Footer</span>
	</div>
</div>
</body>
</html>

_^_

# スクリプト（JavaScript）を作成する

それでは、各部分をフレームに見えるよう、サイズと場所をJavaScriptで決めていきます。
先述のとおり、jQueryを使って作成します。

まず、各オブジェクトを入れる箱を作ります。
グローバル変数を無駄に作らないための方法ですね。

var CSF = {};

ヘッダーやフッターなどのIDを設定します。上記HTMLのID値に合わせます。
HTMLのID値が気に入らなくて変更した場合は、この値も変更してください。

//header
CSF.headerId = '#header_wrapper';
//main
CSF.mainId = '#main_wrapper';
//footer
CSF.footerId = '#footer_wrapper';
//menu
CSF.menuId = '#menu_wrapper';

ヘッダーの高さなどの、各サイズを指定します。
上記 l, m, n の値です。

CSF.headerHeight = 70;
CSF.menuWidth = 156;
CSF.footerHeight = 30;

ヘッダーなどのスタイルを設定します。
後から見て分かりやすいように、かつ、jQueryの.css()関数がハッシュ形式に対応していることから、ハッシュ形式にします。

/* html element css */
CSF.htmlElementCss = {
	'overflow' : 'hidden', 
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : '100%',
	'height' : '100%'
};

/* body element css */
CSF.bodyElementCss = {
	'display' : 'block',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : '100%',
	'height' : '100%'
};

/* header */
CSF.headerCss = {
	'position' : 'absolute',
	'top' : '0',
	'left' : '0',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : '100%',
	'height' : CSF.headerHeight
}

/* main */
CSF.mainCss = {
	'overflow' : 'auto',
	'position' : 'absolute',
	'top' : CSF.headerHeight,/*same as header height*/
	'left' : CSF.menuWidth,/*same as menu width*/
	'bottom' : '0px',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px'
}

/* footer */
CSF.footerCss = {
	'overflow' : 'hidden', 
	'position' : 'absolute',
	'left' : '0px',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : '100%',
	'height' : CSF.footerHeight
}

/* menu */
CSF.menuCss = {
	'overflow' : 'auto',
	'position' : 'absolute',
	'left' : '0px',
	'top' : CSF.headerHeight,/*same as header height*/
	'bottom' : '0px',
	'margin' : '0px',
	'border' : '0px',
	'padding' : '0px',
	'width' : CSF.menuWidth
}

以上で値の設定は終わりです。

続いて、実際の処理を行う関数を記述します。
特に難しいことはしていないので、コードに書いたコメントを読んでもらえれば十分わかるかと思います。
ポイントとしては、ブラウザがリサイズした時も各部分の大きさが変わるので、リサイズイベントにも各部分のサイズ・位置を再設定する関数を割り当てている点です。

CSF.main = function(){
	//各要素のスタイルを反映させます
	$('html').css(CSF.htmlElementCss);
	$('body').css(CSF.bodyElementCss);
	$(CSF.headerId).css(CSF.headerCss);
	$(CSF.mainId).css(CSF.mainCss);
	$(CSF.footerId).css(CSF.footerCss);
	$(CSF.menuId).css(CSF.menuCss);
	
	//サイズをあわせる
	_setSeveralElementSize();

	//リサイズ時にも各要素のサイズを適切なものに変更する。
	$(window).resize(function(){
		_setSeveralElementSize();
	});
	
	/* 内寸を元に各部分のサイズを決める内部関数 */
	function _setSeveralElementSize(){
		//ブラウザの内寸を取得
		CSF.browserWidth = $('body').outerWidth(true);
		CSF.browserHeight = $('body').outerHeight(true);

		//メニューはリサイズ可能なので、呼び出されたときのサイズを取得
		CSF.menuWidth = $(CSF.menuId).outerWidth(true);

		//以下、値を設定
		//ヘッダーのサイズ
		$(CSF.headerId).width(CSF.browserWidth);
		
		//メニューのサイズ
		$(CSF.menuId).height(CSF.browserHeight-CSF.headerHeight-CSF.footerHeight);
		
		//メイン部分のサイズ、位置
		$(CSF.mainId).width(CSF.browserWidth-CSF.menuWidth).height(CSF.browserHeight-CSF.headerHeight-CSF.footerHeight).css('left',CSF.menuWidth);
		
		//フッターの位置
		$(CSF.footerId).css('top', CSF.browserHeight-CSF.footerHeight);
	};
};

設定内容としては以上です。
あとは、$(function(){}の中でCSF.main();を設定すれば動作します。


実際に動作している例としては、ベーシック擬似フレームサンプル（http://labo.ek-pro.com/exp/2011-02-25/csf-basic/）を参照してください。

_^_

# Related Page(s)

タグ：JavaScript

HOME ＞ 2011年の記事 ＞ jQueryを使った基本的な擬似フレーム
HOMEHOME CategoryCategory HistoryHistory

Site Search :

[HTML link code]
[AddThis(Share)]
[PR]セール品のみ検索もできるAmazon検索