CSSフレームワークは良くないと思った理由

  • CreateDate : 2013-02-07
  • LastUpdate : 2013-04-19
  • Category : 未分類
  • tag : |

もっと挑発的なタイトルにして冒頭で「このタイトルは釣りです」とか書こうとか思ったけど、各方面からの報復が怖いので止めた(←どこから)。

本日、お仕事で初めてCSSフレームワークを使う機会があってその仕様的なものを初めて見たのだけれども、かなりショックというか思うところがあったのでエントリにすることにした。

CSSフレームワークとは

おそらくTwitter Bootstrapが最も有名かつ実際に利用されている、と思われる。

マルチカラムレイアウトとか、角丸でお洒落なメールフォームとか、アコーディオンなメニューとかのデザインがあらかじめ良く設計されよく作り込まれていて、HTMLの制作者はclass属性にちょちょいと記載するだけでお手軽に「今風」なセンスでWebデザインを組み立てられるというもの。フレームワークという呼び名には疑義もあるようだけれど、海外でもそう呼ばれているので今回はCSSフレームワークという総称で話を進めたいと思う。

冒頭に書いたとおり今日初めて真面目に触ったので、そらで言えるのはそれこそBootstrapくらいだったわけだが、調べて見ると次のようなものが見つかった。

どれも、flexibleでresponsibleでstylishであるらしいことが分かる。IE6のCSS実装バグと泣きながら一昼夜闘っていたあの頃を思うと、これはまさにエボンの賜物級の優しさに包まれたテクノロジーであろう。ただ、このエントリはCSSフレームワークをポジティブに捉えたものでは全くない。

逆行するCSSフレームワーク

先に言っておくと、最初に調べたものがKubeだったのが悪かったのかも知れない。Bootstrapは(後述する意味において)もっと美しかったし、結局使ってみたいと思って採用したのはHTML KickStartだった。だからこのエントリのタイトルは「一部の」CSSフレームワークについて、としたほうが適切かも知れない。

Kube のサンプルページ : Goodiesを見て欲しい。書いてあることは、リンクの色を赤くしたければ class属性の値を red にすれば良いし、bigとすればフォントサイズが周りよりも少し大きくなるよ、という内容だ。

これはまるで古の font color=”red” や b 要素そのものではないか。W3Cが躍起になって排除してきたHTMLの歴史にまるで逆行している。これがこのエントリを書く動機になった。

原理主義的な観点からのHTML

HTMLは論理構造を定義(マークアップ)するものであってデザインの一切を定義しない。これが構造とデザインの分離の基本的な考え方だ。デザインとは何を指すかというと、「色が赤い」とか「フォントサイズが12pxである」とか「左サイドに寄っている」ということで、そこに論理的な意味を持たないものたちのことだ。

では逆に論理的に意味を持つとはどのようなことか。「警告」とか「引用」とか「見出し」などがそうである。多くの場合、「警告」の意味を持って書かれたテキストは赤い。赤く塗られている。でも赤いというそれ自体は意味を持っていない。だから、「野生動物がいます!」という文書をマークアップするときに

とやるのは良くないことで、例えば次のようにするべきである。

「野生動物がいます!」の文字を大きな太字の赤色にしたければ、em とか strong 要素のスタイルを、CSSでそのように設定する。赤かろうが青かろうが、em でマークアップされた要素は他のセンテンスよりも注意深く読まなければならないことが促されている。

また良くある例として、floatなどを使って2カラムのデザイン(左がサブメニュー、右がメインエリア)で制作するときに、次のような設計になっているものがある。このWeblogも2カラムレイアウトを採用している。

本当にそのメニューは左サイドに表示されるのだろうか?要素の中身が左に割り付けられるか右に割り付けられるかをHTMLは知らない。知っているのはCSSである。だから例えば次のようであるべきだ。

Twitter Bootstrapが(相対的に言って)美しい設計だと思ったのは、Bootstrapのボタンのclass属性の指定が、「btn btn-danger」や「btn btn-warning」となっていたからだ。サンプルでは、dangerは赤く、warningは黄に塗られている。これは論理構造とデザインを分離しよう、という制作者の意図が垣間見える設計になっている。(もちろん、ボタンを指し示しているだろう btn が論理構造を持つか?というと、持たないと思うが。。)

CSSフレームワークで失われるもの

先に挙げたそれほど悪くない例もあれば、left や right の表記が散見されるもの、最悪な例、色々ある。これはCSSフレームワークが、「あなたがデザインを作りたいときに、CSSを修正しなくても良いのだ」という思想に基づいて作られているからだと思う。だから当たり前と言えば当たり前だし、もしもHTML5以前と以後、という分水嶺が存在するなら、HTML5以後の世界ではもうデザインと構造の分離などという思想はすっかり放棄されたのかも知れない。

または、あくまでもこれらはフレームワークなのだから、red は warning であるというように、フレームワークを再定義(マッピング・置換)すれば良いではないかという考え方もできる。僕も途中で「これは実はそういった類のものなのではないか?」と考えていた。だが、CSSフレームワークが「お手軽にお洒落なデザインを組みたい」目的で利用されることを考えると、一体そんな七面倒くさいことをするユーザーが存在するだろうか?僕は存在しないと思う。赤いボタンはredとして、センタリングテキストはcenterとして定義されるのだ。

僕はこれによって、Markup LanguageとしてのHTMLの再利用性や、ユーザーエージェントに依存しないアクセシビリティなHTMLの性質はどんどんと失われていくと思う。誰もがスマートフォンやタブレットのための「レスポンシブルな」HTMLを書き、音声読み上げ式クライアントや、モノクロプリントまでを考慮したHTMLは書かれなくなっていく。(プリント向けのCSSフレームワークなんていうものがあったのは大きな皮肉だ!)

さて、これは悪いことだろうか。みんなが気軽に、Webデザインに興じられるテクノロジーに懐疑的な視線を向けるほうこそが間違っているのかも知れない。

それでも、版を重ねるごとにW3Cによって非推奨扱いにされ、最後にはいなくなってしまった要素たちのこと、時々で良いから、思い出してください。(CV:青木麻由子