あなたは勘違いしてないか？ 真相究明！ CSS都市伝説
これがCSS都市伝説の実態だ！
CSSはウェブ制作者にとっても発注者にとっても、メリットの多い技術である。しかし、CSSの普及にともないさまざまな都市伝説が流れているという。ここでは、実際のウェブ制作の現場で本当にあった話を検証してみることにした。（text：かわちれい子＋森川眞行）
CSSを使うと制約が増えるので、クリエイティブが犠牲になります
確かに、かつてCSSを使用しているサイトは、W3Cなどの学術系のサイトに多かったことは事実だ。また、昔はブラウザがCSSに対応していなかったので、CSSによる表現が確保できなかった時代もあった。しかし、これも過去の話。現在は主なブラウザがほとんどCSSを正しく表示できるようになっている。クリエイティブを保証できないというのは、単にデザインできるスキルがないだけだろう。
既存のページはすべてCSSをレイアウトに使用していないので、いまさら新しいことはできません
これはある意味深刻である。しかし、世の中が構造化したHTMLとCSSに向かっている。これがスタンダードになりつつある今、やるかやらないかではなく、いつやるのかが問題なのである。ちゃんと設計が行われたサイトは、運用面で従来よりもコストを軽減できることも事実。ここでコストを吸収し、当初の設計にコストをかけることが、長期的に見てコストダウンにつながるだろう。
見た目を良くするには予算が取りやすいが、CSSのようにページの裏側に関しての費用は予算請求しづらい
ある企業ウェブマスターの証言だが、これも制作時の設計工程に関係することだろう。CSSを使うということは、それ以前にHTMLを構造化しなくてはならない。そのためにはページの設計を行い、サイト全体の設計を行う。このコストをどう考えるかだ。一度設計を行ったサイトならば、見た目をよくするコストに関しては、逆に従来よりも安価に発注できるはずだ。
CSSは文字の色や大きさを決められるだけです
話にならない。CSSとは表示のための言語である。たとえば、文字なら色や大きさはもちろん、罫線、行間、位置、マージン、さらに背景色や、背景画像などもすべて設定できる。さらにHTMLのdiv要素とCSSのボックスモデルを組み合わせれば、レイアウトも自在にコントロールできる。ナビゲーションのためのリンクボタンを、左メニューから右に変更するのも、CSSファイルを数行変更するだけで、サイト全体で瞬時に変えられる。
CSSを使ってレイアウトすると、修正が発生したときに更新するファイルが増えるので、テキストを1行入れ替えるだけで6万円になります
ありえない。テキスト1行入れ替える際にかかる工数は、5分もあれば十分である。ということは5分で6万円のコーディング経費ということになる。
皮肉はともかくとして、これだけのコストを請求するというのは、外部CSSファイルの設計を行っていないのではないだろうか。いきあたりばったりでスタイルを設定しているので、どのスタイルを修正すればいいのかわからず、一日作業になっているのではないだろうか。自分たちの設計ミスをコストに反映させているとしか考えられない。
前ページの始めに話した「建築物」の話で言えば、「切れた蛍光灯を取り替えるのに6万円かかります」と言われているようなもの。なぜなら「図面がどこにあるのか解らない」からだ。あるいは「図面を作らないで適当に蛍光灯を設置したので、今からマンションを調査します」と言っているようなものである。
CSSを書ける人は数が少なく、ギャラも高いので制作費が高くつきます
これはある程度事実である。ただ、人数が少ないのでギャラが高いというのではなく、サイトを設計する工程に時間がかかると考えてもよいだろう。設計者と、実装するエンジニアの作業分担ができていない制作会社の場合は、こういう回答をしかねない。
CSSを使ってレイアウトすると、すべてのページを同じデザインにしないといけません
確かにCSSを使用しているサイトの多くは、同じデザインのモノが多いが、それは意味があって行っていることである。これは、サイト全体の設計を組み立て、同じデザインやレイアウトにすることが、利用者を惑わせずに情報を伝える手段であるからだろう。要するにブランディングが上手なのだ。
そして、必要であればページのデザインは、CSSを使っていても自由に表現することが可能である。外部スタイルシートファイルの組み合わせをあらかじめ設計しておけば何の問題もない。要するにCSSの問題である以前に、サイトの表現計画をうまく設計できていないといえる。
HTML4制定以前に作ったガイドラインを全面改訂しないとCSSを使ったページ作りに踏み込めないが、そこまでの費用がありません
問題は、やるかやらないかではなく、「いつ」CSSレイアウトに移行するのかということである。CSSレイアウトを導入することは、ウェブマスターにとって多くのメリットがあることは、すでに本記事で列挙したが、これらは直接的に何らかの効果を発揮するものではない。あるいは、当面の効果に比較してコストがかかりすぎてしまう。
http://tokyo.fun.cx/web/2006/05/post_18.html
しかし、CSSを使ってウェブサイトの設計を見直さなくてはならない時期が迫っているのは事実である。こうした問題はウェブマスターはもちろん、制作の現場でも多くの議論が行われている。こうした問題を考える際に参考にしてもらいたいサイトがある。「東京webデザイナー日記」というブログの中に「日経平均銘柄225社サイトの脱テーブル率調査」というコンテンツがある（図3）。これは「CSS Nite」（図4）というウェブクリエイターの関連イベントでも紹介され、多くの制作会社が刺激を受けた。そうした現場での議論は、クライアントであるウェブマスターにも飛び火し、現在多くの企業がCSSレイアウトに対して積極的になっていることも事実だ。今後は、CSSレイアウトを実施していない企業サイトは、ある意味「遅れている」といわれかねない状況に向かっていることも事実である。
いずれにせよ、企業がウェブサイトを、利用者に対してよりよいサービスを実施するためのツールとして考えるなら、CSSはいずれ実装しなければならないだろう。
CSS Niteは、CSSを中心にWeb標準の話題にスポットを当てたクリエイター向けのイベントだ。ウェブ担当者にとっても、制作現場の話題に触れる絶好の場である。
http://www.cssnite.jp/
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
デジタルマーケティングの即戦力を2日間で育てます！ 第24期「企業Web担当者 初級講座」6/13・6/14【2024年6月度】
4,867 いいね！「第6回 Googleアナリティクス4実践講座～GA4を使いこなす！ 計測設定からレポート・分析活用まで」オンライン開催
1,164 いいね！Web担 編集後記 2024年3月
441 いいね！ライオンでアドビのCMSを導入！ 導入の背景や活用方法を聞いた
432 いいね！【満員御礼】「GA4祭り」をテーマにアクセス解析の専門家が集結！ 3月21日（木）＠渋谷【Web担当者Forum Meet UP #2】
88 いいね！生成AI「Copilot」でMicrosoft 広告はどう変わる？ ―Web担編集長・四谷が根掘り葉掘り聞いてきた！
85 いいね！STUDIO導入・内製化で運用コストが40分の1に！ パシフィコ横浜のWebサイトフルリニューアルの成果
82 いいね！
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に対応していない環境であっても、正しく内容をつかむことはできるのですが。