てんぽ : CSS切り替えテンプレート

以前から予告していたCSS切り替えによる典型的な段組のパターンを網羅したテンプレート（ようやくブログで試用する段階になりました）。 フォーラムでよく見かける「2カラムを3カラムにしたい（あるいはその逆）」「サイドバーの左右を入れ替えたい」という要望を簡単に実現することができます。 このテンプレではエリア変数の使用は控えめです。

とりあえずHTMLはこんな感じになっています（3カラムのHTMLのケース4）。

<div id="container">
  <h1></h1>
  <p></p>
  <form></form>

  <div id="primary">
     <h2></h2>

  </div>

  <div id="secondary">
    <h2></h2>

  </div>

  <div id="tertiary">
    <h2></h2>

  </div>

  <div id="footer"></div>
</div>

footerがちょっと浮いていて、h2の内容をどうするかというのも検討すべき課題ですが、それはひとまずおいておいて。

このHTMLに対してCSSで三段組の方法を応用して実現します。 フロートとマージン辺の関係に注意しつつ、Netscape7.1とIE6のclearできないバグも考慮します。 2カラムでは2つ目のサイドバーでclearしておくのもポイントです。

基本のスタイルに加えて、レイアウト用のCSS（全10種）を作ったら、それらのうちの1つをJavaScriptを用いて追加で読み込みます。 CSSの切り替えスクリプトをWeb上で探すと以下のようなものが見つかります。

スタイルシート切り替えスクリプト

代替スタイルシートとしてlink要素に記述しなくとも、JavaScriptファイルからCSSを追加で読み込める。OperaやSafariでは正常に動作しない模様。 再配布できる。

Alt Style

sugさん作シンプルなスクリプト。OperaやSafariでも正常に動作する。

Website Options

ページの使いやすさの向上を目的とした機能を持つスクリプト。詳細な設定が可能。

あとは10種のレイアウトすべてに対応できる基本スタイルを洗練させるだけです。ここが一番難しいのですが。