HTMLパーツからHTMLタグへ 【サイドバー編３】

ども、サンデーアマグラマーNorimakiです。
現在、取り上げているテーマはこちら。

「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」

です。前回は、とりあえずということで、実際にサンプルを見て
いただきました。ご覧になっていない方のために、こちらです。


http://usefultoolers.com/magazine/001/columnstyle/


スタイルを変更する選択ボックスがあるんですが、そこを色々いじると
スタイルが変わって、１カラム、２カラム、３カラムに変更されます。

HTML自体は変わっていません。スタイルシートの適用を変えている
だけです。

からくりは単純で、スタイルシートの positon:absolute; を使っている
だけです。これはあまり使いたくなかったんですが、色々考えた末、
自分の能力ではこれしかないなと。

そう思ったので、これを使いました。

ソースもダウンロードできるようにしてありますので、気になる方は
ダウンロードしてみてください。

http://usefultoolers.com/magazine/001/columnstyle/columnstyle.zip


前回も書きましたが、これを使うと、色々とスタイルシートを修正する
必要が出てくる場面に遭遇するのですが、そのときは説明書に詳しく書く
ことで対応したいと思います。

具体的には、サイドバーの高さを内容（メニューなど）によって変更
しなければいけなくなるスタイルもあるということです。全部ではない
ですけど。

そんな感じになってます。

次はメイン部分の説明に入っていきます。


ではでは。
Norimakiでした。


無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ