「Treesaver.js」は、ウェブサイトをリッチにデザインできるJavaScriptで作られたフレームワーク。

Treesaver.js
http://www.treesaverjs.com/

普段CSSやJavaScriptなどを触らない人にとっては、ちょっとした努力で相当リッチなデザインが構築できる。

本家デモ画面
http://demo.nomadeditions.com/real-eats/

Treesaver.jsはフレームワークであるため、多彩なデザインが構築できるらしいのだが、今回は最小限の機能のみを実装することにした。

自作デモ画面
http://lab.mikuriya.biz/treesaver/

実装したデザインのダウンロード(zip)

では、簡単な解説をする。
※詳しくはHTML内のコメントに

■resourses.html
フレームワークの中核となる骨組み部分の定義を記述するファイル。
画面左にタブを置くかどうかや、画面下にメニューを設置するか、画面中央のコンテンツ部分の段組みはどうするか、などなど。

■style.css
まんまスタイルシート。段組みの幅やフォントなどを定義する。

■toc.html
画面左タブを開いた時に表示されるコンテンツを定義する。また、タブと画面中央は連動しているため、タブのひとつをクリックした時に画面中央に何を表示するかも定義しなくてはならない。

■index.html,page01.html,page02.html
画面中央に表示するメインコンテンツを記述する。
適当にclass=articleで囲っとけば、あとはresources.htmlで定義した骨組みでTreesaver.jsが自動的にきれいにしてくれる。

ざっと解説したが、巷でよくあるJavaScript tipsとは違い、ウェブサイトをまるまる格好良くしてくれるので、修得すればかなり役立つと思う。

あとは自力でよろしく。