前回のエントリでテレビや書籍と異なり,ウェブは多様な環境でコンテンツが表示・閲覧されることを指摘し,そのためコンテンツとデザインを分離するという技術が生まれたことを紹介しました.そのコンテンツとデザインを分離するための技術がスタイルシートであり,その標準仕様がCSS(Cascading Style Sheets)です.
では,具体的にCSSとはどのようなものなのでしょうか,,,という技術的な解説は当日のカンファレンスやワークショップにお任せするとして,ここでは具体的にCSSが活用されているサイトを1つ紹介しておきたいと思います.
ウェブの標準規格の策定,普及活動を担う団体W3C(World Wide Web Consortium)の3つあるホストの中の1つ,慶應義塾大学湘南藤沢キャンパス(SFC)のウェブサイトにアクセスしてみてください.
トップページにあるSFCの3文字をかたどったロゴの横に鴨の絵が描かれ,その横にdesign switchという文字と3本の直線が横に並んでいると思います.その直線のうちどれかをクリックしてみてください.すると内容=リンクはそのままに,背景などデザインだけが変化するのが見てとれるかと思います.この直線はCSSのファイル=デザインを選択するためのリンクです.クリックするたびにCSSが切り替わり,それに対応して表示が変化したというわけです.
この例をご覧になって,「なんだ,単なるギミックじゃないか」とか,「デザイン面でのアピールにしかつながらないなんて」と思ってはいけません.CSSを導入する=コンテンツとデザインを分離することは他にもさまざまなメリットがあるとともに,それによりウェブサイトを活用した中長期的なコミュニケーション戦略立案にまで影響をもたらすのです.
1つ目のメリットは前回のエントリから繰り返し述べているように,多様なデバイスでの閲覧への対応が低コストで行えるということです.PDAやスマートフォン,iPhoneなど,次々と発売される多様なデバイスに対し,普及の都度コンテンツをまるごと造りかえるのはあまりに非効率です.デザインとコンテンツを分離することにより,対応はCSSのメンテナンスのみで済むようになります.
もう1つの大きなメリットは,企業の営業施策の変化によるコンテンツの追加・変更と流行の変化にともなうサイトデザインのリフレッシュを連動させて行う必要がないということです.
昨今の企業(組織)を取り巻く環境の変化は急激です.これに対応して部署や商品ラインナップの新設・廃止・再編が実施される頻度も多くなっています.それにあわせてウェブサイトの全面的な刷新を行うのはコスト面から考えると非効率です.逆に会社概要などめったに内容が変更とならない,もしくは項目は固定されており細かなデータが入れ替わるだけといったコンテンツまで,ウェブサイトのデザイン変更にあわせて全て作り直しというのも非効率的です.CSSの導入に代表されるコンテンツとデザインの分離はこのような非効率性を排除するというメリットがあります.
ということは,ウェブサイトの維持・メンテナンスに関する中期・長期的な予算配分や機能追加を考えるとき,コンテンツ製作に対する投資とデザインのブラッシュアップに対する投資とはあらかじめ分けて検討しておかなければならないのです.もちろん,いくらコンテンツとデザインの分離を導入しても,ウェブサイト構築・運営に対する総合的な判断や戦略立案の必要性がなくなったわけではありません.しかし,こうした技術的背景を認識しておかないと,無駄なコストが発生したり,効果的なリニューアルや機能追加が難しくなる危険性も存在します.CSS1つとっても,ウェブに介在する全ての人に技術的背景の認識が必要とされる現状をご理解いただけるかと思います.














2008年9月1日 10:40 PM
慶應SFCのサイトは、「クリックするたびにCSSが切り替わり,それに対応して表示が変化」する例としてはやや不適切だと思います。HTMLソースを比較すればおわかりになるように、このサイトでは異なるビジュアルデザインを、スタイルシートのみならず文書構造をも変更して実現しているからです。SFCのサイトではCSSに加えXSLTを用いてこの処理を行っていると聞いています。下記の記事をご参照ください。
IMJ | 企業情報 | プレスルーム | W3C仕様への準拠。コンテンツをXMLで定義し、CMSで管理を行う「慶應義塾大学湘南藤沢キャンパス」サイト リニューアルオープン
http://www.imjp.co.jp/company/press/release/20040601-000016.html
2008年9月5日 9:46 AM
↑ 確かにWWW
2008年9月10日 5:23 PM
Kazu様,ご指摘いただきましてありがとうございます.
確かにCSSだけで,という例として出すには不適切な例でした.
コンテンツとデザインの分離に関する技術は,ご指摘いただいたとおりCSS意外にもいろいろとあります.W3Cのホストということで,例として選んだ慶應SFCのサイトですが,それだけに最新の標準が次々と採用されています.
もちろんwdeでは,このような最新の動向も紹介される予定です.私も会場で学びたいと思います.