Web Frontier

スタイルシートの切換を行えば、当サイトのトップページのようにデザインを切り替えたりする事ができます。 ただし、Javascriptをオフにしていると全く表示されなかったりしますので注意して下さい。 スタイルシートで切換を行うためにはHTMLの書き方に注意しなくてはなりません。 例えば、リスト項目で表せる所はul要素やdl要素を使って、後はスタイルシートにデザインを任せる形にしなければなりません。 変にbgcolor属性をタグ内に記述してしまうと、変更が効きませんから、 タグ内にデザインやレイアウトを設定するものはこのテクニックを使う時には厳禁となります。 しかし、HTMLで文書構造をしっかり分かるように記述すればいかようにもデザインの変更がしやすくなります。

<h1>見出し</h1>
<ul>
   <li>項目1</li>
   <li>項目2</li>
   <li>項目3</li>
</ul>
<h2>小見出し1</h2>
<p>コンテンツ内容</p>
<h2>小見出し2</h2>
<p>コンテンツ内容</p>

このように文書構造を明らかにした上でスタイルシートで すべてデザイン・レイアウトを行う形にすればうまく行きます。 座標を操作する時には「position」を使えば良い訳ですし、背景に画像を使いたい場合には「background」を使えば良いです。 また、リストを横に並べたい場合はスタイルシートの「display: inline;」でインライン要素に書き換えしまえば良いのです。 試しに当サイトのトップページのソースを見てみてください。

ソースコードは至ってシンプルですね。 これをスタイルシートをかけない状態だと全く無骨なデザインになります。 試しに、一番右下で「No Style」を選べばスタイルシートをかけない状態になります。

スタイルシートの切り替えシステムは"Outsider reflex"で配布されています。 私のサイトは以前はトップページのみでしたが、全体的に切り替えられたらおもしろそうというので導入しました。 また、Javascriptではなく、最近ではCGI(SSI)バージョンもあるようです。 ネット上の統計だとJavascriptをオフにしている人は20人に1人という事でかなり少数派だと思うのですが、 一度、スタイルシートを作ってしまえば、タグの編集をしなくても link要素のスタイルシートのURL先の指定を変えるだけで自分の好みに合わせることができます。

例えば、段組を3つに分けたい時には予め、div要素などでエリア用のスタイルシート・クラスを作っておくと良いでしょう。 スタイルシートを適応しない場合には、段組にはなりませんので、色々な応用が効きますよね。

デザイン定義ごとにフォルダを用意して、その中に画像とスタイルシートファイルを入れておくと管理がしやすいでしょう。 とはいえ、私も一番最初のウェブサイトを公開した時にはマイクロソフト社の「Frontpage Express」を使っていました。 当時は「手打ちなんてレベルが高くて到底できない」って思っていましたが、 文書構造だけをHTMLで書くのであれば、慣れた場合にははっきり言って手打ちの方が早くなると思っています。 後はスタイルシートを書きながらプレビューして確かめると言った方法がベターでしょうか。

このコンテンツが理解できるような人は恐らくスタイルシートでの切り替えシステムも十分にできると思いますので、 試行錯誤してみてください。