今回紹介するサイトは、デザインにインスピレーションを与えてくれるサイト。
ちょっと煮詰まった時なんかに見るといい刺激をくれますよ＾＾

FAVEUP

海外のサイトですけど、画像がメインなので、英語が分からなくても得るものがたくさんあります(僕も英語ダメダメです)。
ロゴ画像の下に
「Logos」「Business Cards」「Flash Websites」「CSS Websites」とカテゴリーが分かれてるので、インスピレーションを得たいものを選びましょう＾＾／

最近制作されたWebサイトの多くは950px前後の幅で制作される事が多いです。 以前は750px前後でした。
それは何故でしょう？

モニターサイズの平均値が上がった

前は15インチモニターが主流で1024 × 768だった解像度が19インチが主流になってきて1280 × 1024の解像度でパソコン見てる人が多くなったからって事ですね。
後、この前電気屋さんで聞いたところによると、各メーカーもワイドモニターに力を入れてるとの事。 んでなんで前は750pxで今は950pxかって言うと。

IEで左サイドにお気に入りを開きながらサイトを閲覧する人の事を考えてるんですね。 もちろんその左サイドお気に入りバーの横幅は使用者の任意で変える事が出来ますが、あくまでデフォルトの値って事で。 なので主流のモニターサイズが変わった事が制作にも影響してるんですね。

黄金比

よく見てみるとすごい名前です。
黄金比は人間が美しいと思ってしまう比率なんて言われています。

有名なところだとレオナルド・ダ・ヴィンチのモナリザも黄金比でつくられてたり、皆さんが日頃なじみ深い名刺やカード類などもこの黄金比でつくられてます。 その他にも美容整形の分野でも黄金比が使われてますし、建築などでも使われる事が多いようです。
前にTVで見ましたが、オードリー・ヘプバーンの顔の比率はほぼ完璧な黄金比らしいですｗ

さて豆知識はここらへんにしといて、Web制作と黄金比の関係をいってみましょう。

黄金比は「1:1.618」

Webサイトの横幅を決めた時に使ってみましょう。
例えば960pxの場合

でも実際にはグリッドデザインを用いないと、読みにくかったりします。
そこでサンプルとしてThe 404 Blogを紹介。
このサイトは各余白部分に31pxを適用してシンプルな値にしています。

元ネタ：http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

グリッド好きな人も多いと思いますが、一度試してみてはいかがでしょう？

白銀比

別名「大和比」！
日本建築なんかでよく使われてます。
代表としては法隆寺の五重塔です。日本の大工道具の指矩（さしがね）の裏面には白銀比の目盛がある等、日本と非常に深いかかわりのある比率だと言えます。
実はA4用紙も白銀比です。
A4用紙を半分に折るとA5更に半分に折るとA6・・・半分にしてもその比率を保つのが白銀比の特徴と言えます。

白銀比は「1:1.4141」。

さて黄金比と同じく横幅960pxと仮定してみましょう。

こんな感じです。
よく和物のサイトなんかでこの比率をあえて使ってるのとかあります。
黄金比でサイドが広いなんて思ったらこっちを使ってもいいかもしれませんね。

min-heightは初心者の方はあんまり使った事のないプロパティかなと思いますが、知るととても便利なのでちょいと勉強しておきましょう＾＾

min-heightとは？

min-heightは高さの最低値を指定するプロパティです。
CSSではmin-height以外にも最低値や最高値を指定出来るプロパティがあるのですが、残念な事にIE6はそれらのプロパティには対応していません。
それをjsファイルでIE6に対応させるのが「minmax.js」です。
IE6に適応させるjsファイルは以下の通り。

• min-height
  高さの最低値をあらかじめ指定
• max-height
  高さの最高値をあらかじめ指定
• min-width
  幅の最低値をあらかじめ指定
• max-width
  幅の最高値をあらかじめ指定

使い方

まずはjsファイルをダウンロードしましょう。

ダウンロードが出来たなら次はhtmlのhead内にjsファイルを読み込んで完了です。

<script type="text/javascript" src="./minmax.js"></script>

これだけで完了。
楽ちんで便利です＾＾

PNGとは？

画像にはビットマップ、JPEG、GIF、PNGとフォーマットがいくつかあります。
その中でPNGはJPEG、GIFに代わってウェブ上で使われる事を目的として開発された画像フォーマットです。

PNGはかつてGIFで特許問題が起こった際に、GIF形式のフリーな代替フォーマットとして開発されました。
その為GIFによく似てます。
以下にJPEG、GIF、PNGを特徴分けにしてみました。

• 写真や、写真的なグラデの多い画像の圧縮はJPEGに分があります。PNGだとファイル容量がおおきくなりがち。
• GIFとPNGは似ているがPNGはアニメーションが出来ない。
• GIF、PNG共に透過画像をつくる事が出来るが、PNGのみアルファチャンネルをつかって半透明の画像をつくる事が出来る。

PNGを上手に使うと文字以外の部分が綺麗に透過しているロゴ画像や、半透明で背景をすかしたコンテンツ背景などなど様々な場面で活躍してくれるはずです。

PNGの問題・・・というかまたIE6がやってくれてます。

先に述べた便利な透過PNGちゃんをサポートしていないのがIE6です。
IE6で透過PNGを配置すると、アルファ100％(つまりは透過ナシの部分)のみ表示されて、99％以下の半透明と透明の部分がグレーになってしまいます。
今回はIE6への対応を書いておきます～

iepngfix.jsで透過PNGを使う。

元”韓流”プログラマ、ユンサンがつくった「iepngfix.js」ってjsファイルを使った透過PNG処理の方法を紹介です。
これは「iepngfix.htc」ってIEの独自CSS機能をつかった方法です。
まずはjsファイルをダウンロードして、head内で読み込みましょう。
※ダウンロードページ内のiepngfix.jsってのがダウンロードファイルへのリンクになってます。

<script type="text/javascript" src="./iepngfix.js" charset="utf-8"></script>

んでもってCSSに

.iepngfix {
	behavior: expression(IEPNGFIX.fix(this));
}

これで準備完了です。

imgの場合

<img src="./example.png" class="iepngfix" width="" height="" />

imgのロールオーバーの場合

<img class="iepngfix" src="./example.png" onmouseover="this.src='./example_on.png',IEPNGFIX.fix(this)" onmouseout="this.src='./example.png',IEPNGFIX.fix(this)" width="" height="" alt="画像タイトル">

※imgロールオーバーはユンサンのところで紹介されているものとは違うものを使ってます。

aタグの背景で指定する(:hoverもついでに・・・)。

<a href="#" class="iepngfix">サンプルテキスト</a>

だとして

a	{
	display: block;
	width: 100px;
	height: 100px;
	background: url(./example.png) no-repeat;
}
a:hover	{
	background: url(./example_on.png) no-repeat;
}

こんな感じ。
ただJPEGやGIFと同じように背景で右下に配置したり、gnaviとかであらかじめホーバー画像とセットで縦2倍の画像つくってCSSでつくろうとしたりすると予期せぬ事態がおこります。
あくまで縦横の幅がちゃんと決まったものの中に同サイズのPNGを入れる必要があるので、そこらへんは注意が必要です。

alphafilter.jsで透過PNGを使う。

こちらはto-Rさんで配布されてるjsファイルで以前はprototype.jsとセットで稼動するものだったのですが、バージョンアップによって、なしでも動くようになったとの事です。 まずはjsファイルをダウンロードしてhead内で読み込みましょう。 ※不具合報告や、修正情報の更新などもダウンロードページで見る事が出来ます。

<script type="text/javascript" defer="defer" src="./alphafilter.js"></script>

読み込んだ後は「alphafilter」ってクラス名を対応する要素に追加してあげるだけです。

imgの場合

<img src="./example.png" class="alphafilter" alt="" />

CSSの場合

<a class="alphafilter">サンプルテキスト</a>

jQueryをつかって透過PNGを使う方法「jquery.pngfix.js」

手軽にAjaxを自分のサイトに実装出来るライブラリjsファイル「jQuery」を使った透過PNGの使用方法です。
Emotional Webさんで紹介されてた方法です。

まずはjQueryとjQueryプラグイン「jquery.pngfix.js」をダウンロードしましょう。
そしてはjsファイルをhead内で読み込みましょう。

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.pngfix.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// ここにコードを記述します。
</script>

こんな感じ。
さてコードを記述してみましょう。

img要素がPNGだった場合は透過処理を実行する記述

$(document).ready(function() {
$("img[@src$=png]").pngfix();
});

id名、class名を指定してみる

$(document).ready(function() {
$("img[@src$=png], #image-one, .image-two").pngfix();
});;

こんな感じです。

jQueryをつかった透過PNG処理の方法としては
「jquery.pngFix.js」なんてのもあります。

先ほど紹介したEmotional Webさんでは便利なjQueryライブラリがたくさん紹介されています。
興味のある人は一度見てみて損はないですよ＾＾

とまぁここまで色んな方法を書いてみましたが、ご自身でお好みのものを選んでつかってみてください。

今回はWeb制作初心者向けにブラウザについてダラダラ語ってみたいと思います。

まずは・・・

ブラウザって何？

Wikipediaからまんまパクりますと
コンピュータ上の情報を一定の目的に沿って表示し閲覧に供するソフトウェア一般を指す語。
って事になります。

つまりは何かしらの情報を人間が見やすいように表示してくれてるソフトって事です。

いっぱいあるブラウザ達

現在アナタは何てブラウザを使っていますか？

多分多くの人はInternet Explorer 6（以下IE6）で閲覧してる事と思います。
その次に多いのはInternet Explorer 7（以下IE7）。
それからFirefoxやOpera、Mac標準ブラウザのSafari。
メモリは食うけど便利なSleipnir。

今あげたブラウザはWindows環境なら全て無料でダウンロードして使う事が出来るもの達です。
日本では圧倒的にIEがシェアを占めてますが、Microsoft嫌いの欧米各国の中にはFirefoxが過半数を占めてる国なんかもあります。

ブラウザがたくさんある事でのWeb制作者への影響

ブラウザは制作者が作ったHTMLやCSSを読み込んで解釈し、表示します。
今でこそWeb標準というものがあって各ブラウザもそれを意識した解釈をしますが、それでも解釈の仕方に微妙な違いがあります。

つまり正確にマークアップしたサイトでも各ブラウザによって表示の違いが出てくるので、どのブラウザで見ても同じ見た目になるように制作者は日々ブラウザと戦いを繰り広げているわけです。

ホントにダメ男なIE6（時々7も・・・）

いくらIE6が今一番シェアが多いと言ってもIE6を基準にしてサイトを制作すると、今後主要ブラウザのシェア数の移行に伴って作ったサイトの表示が崩れるなんて事になりかねません。
何故かと言うと先にあげたブラウザ達の中でIE6はWeb標準準拠度が低いからです。
それは正確にマークアップしたのに、思い通りに表示されない可能性の高いブラウザと言えます。

とは言えIE7を基準にしてたら大丈夫なのか？と言われるとそうでもなかったりします。
IE7も6よりマシかと思いきや以外とダダっ子だったりするので、僕はFirefox、Opera、Safariを軸にして、IEの6と7を後から処理するようにしてます。

制作時に気をつけたいポイント

完成品として納品する以上は、IE6、IE7、Firefox、Opera、Safariなどの主要ブラウザと、Mac環境での確認が絶対条件だと思います。
どうしたらいいか迷ったあげく、CSS Hackを頼ってしまう事も多々あるかとは思いますが、慣れてくるとあまり使わなくても大丈夫になってくるものです。

っと今日はブラウザについて書いてみました。

CSSレイアウト初心者がまずぶつかる壁がおそらくこのバグだと思います。

まずはサンプルソースを見てみて下さい。
サンプルをダウンロード。

HTML

<div id="container">
	<div id="leftContents"></div>
	<div id="rightContents"></div>
</div>

CSS

#container	{
	width: 500px;
	height: auto;
}
#leftContents	{
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
	margin-right: 10px;
	margin-left: 10px;
}
#rightContents	{
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
	margin-right: 10px;
}

※サンプルで見てみたい人の為に各idに色つけてあります。

この場合だと下図のようになると思いますよね？

だけどIE6は駄々っこなので、この横に指定したmarginを2倍とってしまいます(実質20pxずつとってしまいます。)

対処方法はいくつかあるのでご紹介します。

そもそもmarginを指定しない。

親要素にpaddingを指定して子要素でのmarginをやめちゃうってのも手です。

CSS

#container	{
	width: 480px;
	height: auto;
	padding: 0 10px 0 10px;
}
#leftContents	{
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
}
#rightContents	{
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
}

※その場合は親要素のwidthから20px引きましょう。
元々はborderもpaddingも無かったので純粋に横幅=500pxだったものにpaddingを指定してあげたので
左padding10px+右padding10px+width480px=500px
って感じになります。

アンダースコアハックでIE6のみに指定する。

出来ればCSSハックはさけたいところなので、使わなくて済むやり方を見つけれたらそっちにしましょうね。

CSS

#container	{
	width: 500px;
	height: auto;
}
#leftContents	{
	display: inline;
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
	_margin: 0 5px 0 5px;
	margin: 0 10px 0 10px;
}
#rightContents	{
	display: inline;
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
	_margin: 0 5px 0 0;
	margin: 0 10px 0 0;
}

IE6が2倍とるなら半分で指定してやるって方法です。
IE6以外は通常どおり指定します。
ちなみにmarginと_marginの順番が変わると作用しません。

スターハックでも同じような事が出来ます。

display: inline;を使ってみるとあら不思議

CSS

#container	{
	width: 500px;
	height: auto;
}
#leftContents	{
	display: inline;
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
	margin: 0 10px 0 10px;
}
#rightContents	{
	display: inline;
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
	margin: 0 10px 0 0;
}

これだけで治ります。。。がブロック要素をインライン要素に変えてるので、個人的になんか好きじゃなくてほとんど使いません。

IE6のみインライン要素するってんなら許せるけど。。。完璧個人的こだわりです。すいませんでした＞＜

ひとまずこれだけおさえておけば、あんまり困る事は無いと思います。

これはCSS覚えたての頃よく泣かされました。 ちょっとややこしいので今回は図をつかって説明します。

まずは背景のついた親要素の中に子要素がある場合。

こんな感じっすね。

でもでも子要素にfloatを指定すると・・・

見たまんまですが、子要素が浮き上がって、親要素がその存在を認識できないので、子要素のあるところまで背景が伸びません＞＜

ってな感じです。

これを解決するにはfloatした子要素の次要素にclearを指定して防ぎます。

結構ビギナーの頃は思ったとおりレイアウト出来なくて、次要素にclearを指定する事が多いと思いますが、これも誰もが通る道！ 慣れるまでは我慢です＾＾

今回はブラウザのお話です。
皆さんは何のブラウザを使っていますか？
日本ではInternet Explorerのシェアが80%を超えています。
そのうちIE6が50％超、IE7が25％超。
VistaにIE7が標準で搭載されてたり、XPでもIE7がアップロードに同封されてたりの都合でユーザーは増えましたが、やはりまだまだIE6が強いのが現状です。
3位はFirefoxで5％強、4位がSafariで3％と続きます。

Webサイトを制作するにあたってはIE6、IE7、Firefox、Safariと後Operaあたりで確認を行っていればほとんど大丈夫と言えます。(あくまでほとんどね。。。OSの違いによる表示の違いなんかもあるので、WinユーザーはMacで。MacユーザーはWinでも確認しましょう。)

さてここで困るのが、ブラウザ毎の解釈の違いです。

デフォルトスタイルシートの初期化

各ブラウザ毎に「デフォルトスタイルシート」ってのがあります。
デフォルトスタイルシートは各ブラウザが独自にもっているスタイルシートで、こちらが何の指定もしなければ勝手に余白をとったりしてきます。
やっかいなのは全てのブラウザでこのデフォルトスタイルシートが共通では無いところです。
IEでは出なかった余白がFirefoxでは出ちゃったりします。

制作において、CSSを使用する場合にはまずこのデフォルトスタイルシートを初期化して、何の指定もされていない状態にします。

やり方は簡単でデフォルト用のスタイルシートを用意するなりして、外部で読み込むだけ。
ちなみにデモの代わりにこのサイトのデフォルトスタイルシートを見たい方は下記からどうぞ

CSSMAKERのデフォルトCSSをダウンロード

これが本題。ブラウザ毎の解釈の違い(ボックスモデルについて)

IE6は現在主流の他ブラウザに比べると、Web標準準拠度が低いです。
なので、CSSに対する解釈もなんかボケてるというか・・・。
とにかくバグが多いブラウザなので、制作してて最初にバグるのは大抵IE6です。(慣れてくるといちいちプレビューしなくてもコードだけで、あぁこれだとIE6こうなるから、こうして～みたいな感じでIE6のバグに慣れてくる自分がいましたｗ)

さてその中で初心者が一番陥りやすいIE6の罠がボックスモデルの解釈です。
まずは正確なボックスモデルの解釈と、IE6の解釈を比べてみましょう。

っとこのように

正：width+padding+margin+border
IE6：width-(padding+margin+border)

って感じの解釈になってます。

なのでちゃんとCSS書いてるのに。。。(涙
ってなっちゃってる人は一度計算してみましょう。

実際にCSSをマークアップする際にはこういう現象が起きないようにマークアップするか、IE6用のCSSハックを書いてバグ回避するかする事になってきます。

CSS着せ替えテンプレートプロジェクトってのがあります。
有識者の方々が同じHTMLをいじって様々なデザインのテンプレートを配布するってもんです。
CSSやWeb制作初心者の方がそのテンプレートから色々と勉強したり、自分のサイトに流用したりと結構面白い企画です。
基本的に同じHTMLを使っていますので、画像とCSSファイルを変更するだけで色んなデザインを楽しむ事が出来る上に勉強にもなるってわけなので、そんな企画にCSS Makerもいっちょのっかってみようかと思ってます。

実際のテンプレートはおいおい公開予定です＾＾ｂ

デザイン初心者の頃って何かと色彩で困る事が多いもんです。
そんな時に役にたつWebアプリをご紹介します。

ColorBlender.com

使い方は実際にいじいじすればすぐわかると思います～

皆さんはサイトのhタグの装飾をどのように行っていますか？

画像で指定しているのでしょうか？ それともCSSで指定していますか？

SEO的に見てもせっかくのhタグですから、画像でなくテキストで入れたいところです（altにテキスト入れられますが、純粋なテキストよりもSEO的効果は薄いなんて言われてます。）。

今回は簡単につくれるhタグの装飾をいくつかご紹介します。

まずはこんなのはどでしょうか？

※まわりの点線は含みません

<div class="title">
<h3>2008.04.07</h3>
<h2>ここにタイトルが入ります</h2>
</div>

.title	{
border-left: 3px solid #CCC;
}
.title h3	{
font-size: 80%;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
color: #909090;
padding: 0 0 0 10px;
}
.title h2	{
font-size: 120%;
color:#6B6B6B;
padding: 0 0 0 10px;
letter-spacing: 1px;
}

おつぎはこんなのいかがですか？

<h2>ここにタイトルが入ります</h2>

h2	{
font-size: 120%;
background: #F4F4F4;
padding: 5px 0 2px 10px;
border-left: 10px solid #80A852;
border-bottom: 1px solid #A1A1A1;
color:#6B6B6B;
}

ラストは:first-letterを使った見出しの表現

<h2>ここにタイトルが入ります</h2>

h2	{
font-size: 120%;
border-bottom: 1px dotted #A1A1A1;
color:#6B6B6B;
letter-spacing: 1px;
}
h2:first-letter	{
font-size: 1.5em;
}

こんな感じです。

基本、罫線と字間やfont-familyでいじります。色々ためしてみましょう。

IE7の普及でアルファPNGが使いやすくなりました。
とは言ってもIE6のユーザーはまだまだ多いので、ちょっとしたテクニックがいります。
今回紹介するサイトは透過PNGと背景画像を上手に利用してスクロールするのが楽しくなっちゃうサイトです。

The portfolio of Bryan Katzel

ただ残念な事にIE6への処理が出来てないので、IE6で見るとなんじゃこりゃ？ってなってますｗ

ちゃんと勉強してちゃんとマークアップしてるはずなのに、ブラウザによって表示に違いが出てしまう；；

なんて事がWeb制作してるとたくさんあります。
ってか無い時のが少ない＞＜

特に日本だとIE6の普及率が異常に高いです。
他のブラウザ（IE7とかFirefoxとかOperaとかSafariとか）に比べるとIE6はWeb標準への準拠度が比較的低い為、ちゃんとマークアップしても色々と問題が起きてしまいます。
IE6だけでなく他のブラウザも多少問題を持ってます。

そんなバグに出会った時、各々のブラウザにのみ対応したCSSを分けて記述出来たら便利だと思いませんか？
それがCSSハックです。

CSSハックの多くは各々のブラウザのバグを利用して適用させたいブラウザのみ（または適用させたくないブラウザをはじく）事で問題が起きたブラウザへのCSSの対処を実現させてはいますが、あくまでバグを利用してのものですので、あまり使いまくらない方がいいです。

使わないですむなら、その方が優秀なコーディングですので、最終手段ぐらいに思っておきましょう。
でも使わないと出来ない表現もあるので、ある程度はお勉強しておきましょうｗ

アンダースコアハック

IE6のみにスタイルを適用させたい場合に使用するハックです。
使い方は簡単で適応させたいプロパティ冒頭に「_（アンダースコア）」を記述するだけ。
では実際の適用例を見てみましょう。

<p>サンプルテキスト</p>

p	{
margin: 10px 10px 10px 10px;
_margin_top: 5px;
}

上記のように記述すると、IE6以外のブラウザでは<p>～</p>のマージンを上下左右10pxずつとります。
IE6のみ上マージン5px、下左右10pxになります。
つまりはIE6のみ上書きしてるんです。

問題点：ただW3C CSS Validatorには通らないので、使わない方がいいっちゃいいです。

スターハック

<p>サンプルテキスト</p>

* html p	{
margin: 5px 5px 5px 5px;
}
p	{
margin: 10px 10px 10px 10px;
}

こんな感じで記述します。まずスターハックを使用した方を記述してから、それ以外のブラウザに向けたCSSを記述します。
上記の記述だとIE6は上下左右のマージンを5pxずつ、それ以外のブラウザは10pxずつとります。

追記

今回はひとまずIE6向けのハックを書いてみました。
ただ前述のとおり、使用せずにサイトを構築出来るならそれにこした事はないので、あまり頼らないようにしましょう。
（僕はビギナーの時、ハックだらけでした＾＾；）

CSSはまずスタイルをどのセレクタ(HTMLタグとかid名とかclass名とか・・・)に指定するかを記述して、その後に「 { プロパティ: 値; } 」と記述して具体的なスタイルを指定するのが基本です。

記述例：

適用先	{ プロパティ: 値; }
h1	{ color: red; }

上記の場合だと、<h1>タグ内に記述されたテキストは全て赤文字になります。

さらに複数同時に指定したい場合には「,」(カンマ)で区切って複数してします。

記述例：

適用先1, 適用先2, 適用先3	{ プロパティ: 値; }
h1, h2, p	{ color: red; }

上記の場合だと、<h1><h2><p>に入るテキストが赤文字で表示されます。

CSSを記述する場合に半角スペースやタブスペース、開業を任意の場所に入れる事が出来ますが、やっちゃいけない事もあります。

基本例：

h1,h2,p{color:red;}

半角スペース例：

h1, h2, p { color: red; }

タブスペース例：

h1,	h2,	p	{	color:	red;	}

改行例：

h1,
h2,
p
{
color:
red;
}

やっちゃいけない例：

h 1,h2,p{co lor:r ed;}

適用先、プロパティ、値の記述途中に半角スペースを入れてしまったダメな例です。 タブスペースや改行も記述途中に入れてはいけません。 ちなみに私が一番使う記述の仕方は

h1, h2, p	{
	color: red;
}

こんな感じです＾＾

自分なりのやりやすい方法を確立しましょう。
今後お仕事にしたい方は他の人にも見やすいコーディングを心掛けましょう。

dfFlexGrid.jsを使うと、制作したサイトのグリッドやフォントサイズの変更ができ、変更したスタイルをクッキーに保存することができます。
今回はこのdfFlexGrid.jsのデモページを見ながら簡単に解説していきます。
デモページ　(別ウィンドウで開きます)

まずはdfFlexiGrid.jsに触れてみましょう

デモページのヘッダー部分のメニューをクリックすると、ページ全体が動的に変化します。特にグリッドの変更時は気持ちのいいスムースです。まずは色々と触って動きを確かめてみましょう。
各メニューの昨日は以下の通りです。

• Toggle Left
  左側のカラムの表示・非表示
• Left Accordion
  左側のカラムをアコーディオン化
• Toggle Right
  右側のカラムの表示・非表示
• 800px
  ページ全体の幅を800pxに変更
• 1000px
  ページ全体の幅を1000pxに変更
• 100%
  ページ全体の幅を100%に変更
• +Font、-Font
  フォントサイズの変更

導入のやり方

まずはdfFlexGrid一式をダウンロードしましょう　＞　Deziner Folio

ファイルの中身は「dfFlexiGrid.html」「dfFlexiGrid.css」「dfFlexiGrid.js」となっていて、デモページの構成ファイルです。
まずはサーバーに「dfFlexiGrid.css」「dfFlexiGrid.js」をアップロードして、サイトの<head>～</head>内に下記の記述をしてください。

<script type="text/javascript" src="dfFlexiGrid.jsへの相対パス"></script>
<link rel="stylesheet" media="screen, projection" href="dfFlexiGrid.cssへの相対パス">

ブログなんかで使う場合には絶対パスで指定してあげましょう
※下記はMTの場合

<script type="text/javascript" src="<$MTBlogURL$>dfFlexiGrid.js"></script>
<link rel="stylesheet" media="screen, projection" href="<$MTBlogURL$>dfFlexiGrid.css">

ソースを見てもらうと上記CSSとjsファイルを読み込んでいる以外はいたってシンプルです。下記の部分に注目してみましょう。

<a href="#" onclick="mygrid.toggleLeft();">Toggle Left</a>
<a href="#" onclick="mygrid.toggleBlock('block1');">Left Accordion</a>
<a href="#" onclick="mygrid.toggleRight();">Toggle Right</a>
<a href="#" onclick="mygrid.resize(700,'px');">800 PX</a>
<a href="#" onclick="mygrid.resize(1000,'px');">1000 PX</a>
<a href="#" onclick="mygrid.resize(100,'%');">100%</a>
<a href="#" onclick="mygrid.resizeFont(0.05);">+ Font</a>
<a href="#" onclick="mygrid.resizeFont(-0.05);">- Font</a>

	:
	:
	:

<a class="accord_toggle" href="#" onclick="mygrid.toggleBlock('block1');">TOGGLE(+/-)</a>

上記ソースの上の6列のaタグは各機能を実行するメニューの部分になります。
下のaタグはレフトカラムのアコーディオンを実行する為のタグです。

dfFlexGridはIE6, 7, Fx1.5, Op9.1, Safari3のブラウザに対応しています。

自由にデザインしていい場合なんかは試してみてもいいかもしれませんね。