あなたは勘違いしてないか？ 真相究明！ CSS都市伝説
イケてるCSSデザインサイト紹介
CSSでは決まった退屈なデザインしかできない？ そんなバカな！
ここでは、CSSデザインの参考になる3つのサイトを紹介する。（text: 森川眞行）
イケてるCSSデザインサイト(1)
css Zen Garden
http://www.csszengarden.com/
CSSによるデザイン表現を知るには最高のウェブサイト。2003年にカナダのクリエイターが開始したこのサイトには、現在500以上のCSSのデザインサンプルが登録されている。クリエイティブ表現が確保できないという都市伝説などは、このサイトの前では、CSSでデザインできないクリエイターの言い訳にすぎないことを立証しているといってもよい。
そして、驚くべきことに、登録されているすべてのCSSデザインは、同じ1つのHTMLファイル用に作られている。
デザイナーは、このサイトからHTMLとCSSファイルをダウンロードし、CSSファイルだけを登録する。世界中からグラフィック表現とCSSにこだわるクリエイターが技を競い合い、自分たちの役割をデモンストレーションするためのウェブサイトなのである。CSSの可能性を見るには圧倒的な質と量を一気に経験できる貴重なサイトだ。
イケてるCSSデザインサイト(2)
慶応義塾大学 湘南藤沢キャンパス
http://www.sfc.keio.ac.jp/
2004年4月に公開された「慶応義塾大学湘南藤沢キャンパス」のウェブサイトは、XHTMLとCSSによって作られている。このサイトの最大の特徴は、ページ内に配置されている「design switch」という機能だ。
3つ並んだボタンの1つを選んでクリックすると、サイト全体のデザインが切り替わるというもので、それぞれのデザインコンセプトは、「Simple・アクセシビリティ」「Cool・キャンパスライフ」「Hot・自然と人の融合」となっている。もちろん、これはCSSによって文書構造と視覚要素を分離しているからこそ実現できる機能で、1つのHTMLに対して3種類のCSSを用意している。
注目すべきは、2004年という早い段階で、CSSを導入したことと、サイト全体のデザイン切り替えを可能にする設計力の高さだ。アクセシビリティガイドラインへの準拠も果たしており、ガイドラインに沿ったコンテンツの制作を行っている。
イケてるCSSデザインサイト(3)
日本メナード化粧品
http://www.menard.co.jp/
Web-JISの交付以来、企業サイトがリニューアルする際の条件の1つに、CSSレイアウトやアクセシビリティが盛り込まれるようになってきている。
「日本メナード化粧品」のサイトも、すべてCSSによってレイアウトされていて、2006年8月にリニューアルされたばかりだ。
化粧品会社という特性から、視覚的要素の重要度は高いはずだが、この企業では、そういった視覚的な部分の完成度を高く保ちつつ、しっかりHTMLとCSSで情報と視覚的要素を分離させている。
デザイン表現についても、トップページから第二階層のドアページ、第三階層以下のページを、デザインコンセプトを統一させて、バリエーションを展開する部分は「企業サイトがCSSを使うとデザインが単調になる」という都市伝説を払拭するものであるといえる。視覚障害者や高齢者に配慮した文字サイズの変更ボタンや、印刷用のCSSを用意して、プリントアウト時に必要な情報だけを印刷するように配慮している点も見逃せない。
アクセシビリティとクリエイティビティを考えるフォーラム
「アックゼロヨン」
CSSレイアウトや、アクセシビリティに取り組む際に問題となるのがクリエイティブとのバランスだ。アックゼロヨンは、アクセシビリティとクリエイティビティを両立させたウェブサイトが広く一般に作られることを目的としたフォーラムで、2006年もアワードやセミナーなど積極的な活動を行っている。
アックゼロヨンの名前の由来は、Accessibility＋Creativityという意味それぞれの単語の頭文字からAcC（アック）という造語にゼロヨンを追加したものだ。ゼロヨンとは、日本のアクセシビリティにとってJISが規格を公布した年でもある2004年に由来している。
アックゼロヨン最大の活動は、アクセシビリティとクリエイティビティに優れたサイトを選出していこうというもので、「アックゼロヨン・アワード」を毎年実施している。この活動は、社会福祉法人プロップ・ステーションとの共同で行われているもので、後援として、総務省、経済産業省、国土交通省、厚生労働省、文部科学省、外務省の合計6省庁が名前を連ねている。
アワードに関してはグランプリや部門賞を設けている以外に、それぞれの省庁の大臣賞も制定されている。これはウェブの業界では他に例がないものだ。アワードの結果は、2006年10月31日に発表されウェブサイトで公開されている。
また、アワードをサポートする形で、アックゼロヨンでは無料のセミナーを開催している。セミナーの内容はアクセシビリティやクリエイティビティだけに限らず、ウェブサイトを構築するための多くの要素をサポートしており、アクセスログ解析や、SEOといったテーマで専門家を招いたプレゼンテーションを行っている。
アックゼロヨン
http://www.acc04.jp/
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
コメント
アクセシビリティ
「特にフルCSSでレイアウトされたウェブページは、全盲の利用者が使用する「音声ブラウザ」で正しい読み上げが可能だ。」
森川さんなので、あえてコメントつけさせていただきます :-)
CSSでレイアウトすれば、音声ブラウザで正しい読み上げが可能になるわけではありません。CSSでレイアウトしても、読み上げ順序がメチャクチャなサイトも実際にあります。
逆に、テーブルでレイアウトしても、音声ブラウザで正しい読み上げが可能なサイトもあります。
音声ブラウザは、(X)HTMLのソースーコードに記述されている順序で読み上げるので、テーブルでレイアウトしていようが、CSSでレイアウトしていようが、音声読み上げ順序には関係ないんです。
ただ、CSSでレイアウトすると、(X)HTMLでの文書構造のマークアップを意識するようになるので、たとえば、見出しのh要素を適切に使用していれば、読み上げの利便性が向上することになります。これはテーブルレイアウトでもできることなので、やはり"CSSだから"というわけではありませんけどね。
植木（インフォアクシア）
Re: アクセシビリティ
> 正しい読み上げが可能だ。
とあるので、指摘するほどじゃない気がします。
逆に table でレイアウトしているもので読み上げに対応できているのは、たまたまか、よほど簡素・シンプルなデザインだから実現できているのであって、通常は「できない」と判断したほうが正しいかと。
読み上げブラウザに対応するなら CSS というのはスマートな気がします。
Re: アクセシビリティ
> 通常は「できない」と判断したほうが正しいかと。
通常は「できない」と判断するのも決して正しくないかと。実際、弊社のサイトはテーブルで、ビジュアルにもこだわってますけど、「できてます」。そんなに難しくもないですよ。というより、読み上げブラウザのユーザを意識してるかどうかじゃないですか？ テーブルだから「できない」、CSSなら「できる」というわけじゃないし、CSSだろうが、テーブルだろうが、やっぱり読み上げブラウザのことを意識してれば「できる」んですよ。だから、「読み上げブラウザに対応するなら CSS というのはスマート」というわけでもないと思いますが。
とはいえ、うちのサイトもテーブルからCSSへそろそろ移行したいんですけどね（苦笑）
植木さんへ
出てくるのが遅くなりました。すみません。森川です。
植木さんのおっしゃる通りで。CSSでレイアウトすれば、アクセシビリティの問題が解決する訳ではありません。実際にCSSでレイアウトされているウェブページでも、見出し要素と段落の付け方がおかしかったり、定義リストがおかしかったりしますものね。
ただ、植木さんが仰るように、CSSをハンドリングするようになってから、情報伝達の本質が気になるというか、文書構造というものに向かい合う意識を持つようになったことは事実。
もちろんテーブルレイアウトでも、文書構造を保持する事は可能ですけど、やはりCSSでレイアウトすると、すっきりしますよね。
ただしCSSでレイアウトしているページでも、観念としてテーブルレイアウトのように表示にこだわったdiv要素を、テーブルのセルのように使ってしまうと、時として意味的な構造よりも、装飾的な要素を重視してしまいがちなので、注意したほうがよいですよね。
基礎デザインにCSSを用いることへの質問
IE独自の解釈により、CSSを使うと他のUAと表示がずれる、
或いはその調整のために大幅な手間がかかるということに対し、
筆者殿がどのような考えをお持ちかお聞かせ願いたいです。
Re:基礎デザインにCSSを用いることへの質問
ご投稿ありがとうございます。
本来の情報伝達という意味では、まず意味的にマークアップされたHTML文書ありきで、表示に関しては制作者はデバイスに振り回されるべきではないと考えます。ですから、譲れない部分としては、文書構造を明確にしたHTMLありきだと思います。
考え方として、表示の多くが「読みやすさ」を満たすものであれば、ブラウザの仕様によって、重箱の端をつつくようなことは行う工程は、さほど意味がないと考えます。本質として。
ただ、実際問題としてIEが仕様に基づくCSSの解釈とレンダリングを実装していない以上は、おっしゃるように調整に大幅な手間がかかる事は事実ですよね。ここから先は、制作者の本質と、サイト情報提供者（依頼者＝クライアント）との考え方だと思います。
私の今までの経験では、一般的な手法として、モダンブラウザ対応のマークアップを行い、IEに対しては、コメントハックなどの手法で対応します。
ここから先は、ちょっとぶっちゃけですが…CSSに慣れてくると、インタフェース設計や、視覚デザインの段階で、大幅なIE対応でのハックを前提としないモノを提案することも可能になるんです。実際現場は、工数と時間との闘いですから（笑）、依頼主とゴタゴタしないような関係を作っておくことは重要ですものね。
ということは、提案の際に設計者あるいはプロデューサーは、そういった技術的な裏付けも持ち合わせていなければならなくなる…ってことも重要なのだと缶ファ得ます。
丁寧な返信ありがと
丁寧な返信ありがとうございます。
たしかに、HTMLの本質を考えれば重箱の隅をつつくような行為に
意味がない、という部分には頷けます。
状況的にそれで通すことができないのが困りモノですが･･･。
設計段階で、ハックを必要としないものを提案するということには
なるほど、と膝を叩きました。
細部に関する技術よりもこういった部分こそが重要なのかもしれませんね。
Re: アクセシビリティ
植木です、コメントありがとうございます。
「テーブルでレイアウトしたページは、アクセシブルではない」
「アクセシブルにするには、CSSでレイアウトしなければならない」
という誤解が少なくないので、そういうふうに誤解されないように補足させていただいた次第です。このことは、森川さんも当然よくご存知なはずですからね :-)
テーブルレイアウトでも音声ブラウザやスクリーンリーダーでの読み上げに対応できているのは、たしかに、"たまたま" の場合もあれば、"よほど簡素・シンプルなデザインだから" という場合もあります。でも、それはテーブルレイアウトに限った話ではないですし、CSSでレイアウトしたページにも当てはまることです。逆に、複雑な凝ったレイアウトでも対応はできます。
テーブルとCSSのどちらでレイアウトするか、というのは手法であって、2人目の方がおっしゃているように、ポイントは音声読み上げにも対応することを前提にしているかどうかだと思います。
音声ブラウザやスクリーンリーダーが正しく読み上げる上で、レイアウトがテーブルかCSSかということ自体は問題ではなく、音声読み上げ順序や文書構造のマークアップなどが適切かどうかがポイントです。
たとえアクセシビリティを抜きにしたとしても、今後はCSSでレイアウトするのが一般的になっていくことは疑う余地のないところでしょうし、そのメリットや課題などは森川さんが書かれている通りです。そして、いわゆる「構造と表現の分離」などがされることで、音声読み上げに限らず、いろいろなユーザーにとってのアクセシビリティの確保にもつながると思います。
植木（インフォアクシア）
Re: アクセシビリティ
> 読み上げブラウザのユーザを意識してるかどうかじゃないですか？
仰るとおりですね。前言撤回。
マークアップの本質を考えるとテーブルレイアウトは "悪" なのは確かなわけで。
レイアウトもテーブルだ、とか言う人がいるかもしれませんが、もうそれは趣味の問題かもしれない。とにかく、テーブルレイアウトは "悪" だから嫌い。
っつーかテーブルきらい。
最近どこへ行ってもCS
最近どこへ行ってもCSS
CSSに対応してない環境なので肩身が狭いです。
もっとも、正しく読み上げできるサイトなら、CSSに対応していない環境であっても、正しく内容をつかむことはできるのですが。