2017年03月16日12時32分 に初出の投稿

河本孝之Takayuki Kawamoto

Last modified: 2017-03-16 12:32:20

ウェブ制作者なら意識してほしいCSS設計の基礎知識

「W3C」という言葉を掲げて何か主催している人物らしいということはわかるのだけど、もちろん単なる読書会や勉強会のオーガナイザが HTML なりウェブの業界標準に関する識者である保証など何もないし、とりわけ都内はそういう「一発屋オーガナイザ」とか「ライトニング・オーガナイザ」とか、あるいは素人による「お試し識者」みたいな言動ばかりがオンライン上にばら撒かれていて、それらを多くの人々が叩くといった、「スポーツ炎上」ないしは「カジュアル炎上」とも言うべき状況が起きやすいという印象しかない。国内ではありがちだけど、アメリカ人などと違って宗教的な責任感とかが関わっていないからか、何らかの利害関係として確立したり継続できないと活動として続かないというのが、こういう若者たちの根本的な脆弱性だと思う。忙しかろうと無職だろうと続けるライフスタイルの一部というところにまで昇華しないんだよね。なのに、中国人ほど個人主義的・合理主義的に割り切っているわけでもない。つまりは、やること考えることが場当たり的なのだ。

ほとんどのCSS設計手法に共通する考え方が、ウェブサイトをパーツの集合体として考え、そのパーツごとに分けてCSSを考えることです。例えば、ヘッダー、フッダー、大見出し、小見出し、リスト、表、ボタンなどウェブサイトに配置されているものがパーツです。

このような識者ぶったものの書き方と内容のバカバカしさとの対比を、我々のようなウェブ制作のプロから眺めると、ああこの人もグラフ理論とかモデル理論とか情報理論とか勉強しないで、数学や工学による業績の「派生的な収穫物」にすぎない HTML の仕様とかに入れ込んで技術者としての素養を身につけたと思い込んでる人物なのだなと、軽く目頭が熱くなってしまう。若者よ。

もちろん、ウェブサイトはボタンや見出しといった「ビジュアル部品」を基本的な構成要素として設計するものではなく、情報処理において構文論的に妥当な「文書構造のノード」を基本的な構成要素としている(ていうか、それ以前に「ウェブサイト」じゃなくて「ウェブページ」だろうと言いたい気がないでもないが)。それらが大見出しなのか小見出しなのかは、それらのノードが配置される文章構造の設計において指定された脈絡に依存するので、<h3 /> 要素が大見出しとなりうる文書構造もあれば、小見出しの扱いになる文書構造もある。

それら脈絡を規定するのはセマンティクスだが、この言葉に注意しなくてはいけないのは、HTML 文書や CSS のプロパティ定義はセマンティクスを反映する側であって、定義したり規定する側ではないということだ。はっきり書いてしまうと、セマンティクスとして妥当である(「或る文書構造がコンテンツを我々の理解の枠組みに適した仕方で対応づけているという意味で、一つのモデルになっている」というのが正確な表現だが)かどうかは、我々が判断するのであって、HTML ファイルのタグの書き方や CSS ファイルのプロパティの書き方が我々にセマンティクスを示すわけではない(また、“semantics” を「意味論」と翻訳していることから、単に「意味」の同義語であるかのように使う人も見受けるが、それも誤解を広げる原因である)。したがって、特定の文書のコンテンツを提供するときの「セマンティクス」と言うときには、HTML の文書構造や CSS によるプレゼンテーション定義を組み合わせたレンダリング結果が、それらを WWW ブラウザや音声出力ソフトで利用している側の我々の理解とどのように対応するかという話をしているのである。もし、「セマンティクス」をこのような意味で使わないとすれば、タグとレンダリング結果との対応関係だけが問題となってしまい、それこそユーザ不在の W3C 原理主義者やコンサル的な馬鹿話のオンパレードになってしまう。

オブジェクト指向で CSS プロパティを定義しようと、他のツールに適用した書式を導入しようと、あるいは再利用を考慮しない書き方を使おうと、そんなものは「CSS設計」の基礎知識でもなんでもなく、CSS という一つの理論(構文論上のルールからなるセット)から導出されうるバリエーション、つまりは応用でしかない。このように、プログラミング全般についても言えることだが、オブジェクト指向のアプリケーション設計ですら、背景に仮定されている数学があっての話であるという点が考慮されず、オブジェクト指向の厳密な解説を習得すれば技術的な基礎について語れると思い込む人が多いのは、要するにコンピュータ・サイエンスの教育(そこでは離散数学のような分野は必須の知識である)を受けないまま、あるいはそういう知識が自分に欠けているという事実に気づかずに、オンラインで公開されている夥しい分量の「ウェブ技術」なるものをあれこれと習得するだけで満足してしまうという、やはりこれも日本にありがちな小手先の部分最適化という「ものづくりマインド」が災いしているものと思われる。

冒頭に戻る


※ 以下の SNS 共有ボタンは JavaScript を使っておらず、ボタンを押すまでは SNS サイトと全く通信しません。

Google+ Twitter Facebook