ＣＳＳ応用編
-1 デザイン切り替え
ここからは、CSS応用編と銘打っております。
当方が、制作中に気付いた点（主に失敗例…）、あるいは テストケースとして実験した点などを随時まとめていこうと思っております。少々、くだけた（？）内容になります。
あくまでも一例としてご参照いただき、技術的詳細につきましては関連資料をご参考にしていただけますよう、あらかじめおことわりさせていただきます。
デザインを着替える
前述してきました構造と見栄えの分離を図ることによって、構造はそのままに、つまり手を加えることなく、見栄え＝デザインを変更することが容易になります。
(X)HTML文書からデザイン性を別立てして設置した、CSSファイルの設定を変更することによってそれが可能となります。
ここでは その変化を視覚的に実験するに留めておりますが、活用の場はいろいろと考えられると思います。
サイト全般のデザインをリニューアルする、あるいは ユーザーにお好みのデザインの選択肢を提供する等々、応用範囲は様々です。
下図をクリックすると別ウインドウが開きますので、ページ内部「スタイルを選んで下さい」と表記のあるプルダウンメニューよりデザインを選択してください。サンプルベースは当サイトトップページです。(X)HTML文書はどのページも同一のものです。また、別ウインドウ内表示ページではページリンクしておりません。
動作・表示はWIN版IE5.5及びIE6.0で問題なく表示されるよう整えて確認しました。また、FireFox1.5での表示確認も問題ありませんでした。
但し、NN7.1で、レイアウトによっては一部表示の乱れが出ております。Opera8.5では切り替えスクリプト自体が動作しません。
ここで使用したデザイン切り替えのスクリプトは、「いちゆうポータル様」より引用させて頂きました。
上述した通り、ブラウザによる表示差異が出るレイアウトデザインもありますので、差異の出ないレイアウト手法を模索する必要性を感じる次第です。ここでは表示差異もそのままに検討課題として掲載させていただきますこと、勝手ながらご了承いただければ幸いです。
今後ともデザインバリエーションを研究・更新していく所存です。
