今まで、Webページを作るときは、HTMLで書式設定をしていました。タグ内にすべて属性を入れてしまう、古典的なレイアウト方法です。でも、これは正しい方法ではないらしく、正式には、スタイルシートを使って、微調整をするものだそうです。実際、Adobe ImageReadyなどから出力される、ガチガチに組まれたテーブルは、手動で調整しようとすると、全体のレイアウトが崩れ、とてもじゃないけど運用性がいいとは思えません。
そこで、生まれて初めて、スタイルシートをページレイアウトに使ってみました。幸い、Dreamweaverの最新版が、スタイルシートによるレイアウトに対応したので、この機能を使ってみたのです。手書きではここまで出来ないんですけど、ソフトを使えば、簡単にできます。このチュートリアルを参考にしながら作ってみました。

おもしろい!! これはおもしろい!!

HTML内においては、すべての要素を、名前を付けたdivコンテナを並べただけ。そのdivコンテナのレイアウトを、スタイルシートで定義する、という方法。

実際、HTMLはすごいです。本当にdivだらけ。というより、divだけ。画像ファイルさえ、スタイルシートでリンクしています。HTMLだけ眺めてると、なんのページなのかさっぱりわからない、ただ名前の付いたdivが入れ子になっていっぱい並べてるだけ・・・そんなページです。

いままで、ImageReadyの作ったテーブルを基本に、HTMLでレイアウト編集していくという従来のやり方とは、根本的に違う、まったく異次元の作業になります。あまりに違いすぎるので、最初はわからないことだらけでしたが、実際、Dreamweaverで、スタイルシートを編集後、リアルタイムにプレビューしていくと、とても楽しいんです!!

まだまだテーブルで組んだページが多いですけど、これから、CSSを使ったページも増えてくるんじゃないか、と思います。何よりも、blogのシステム自体、CSSを基本としたレイアウトですからね。