AZ::Blog はんなりと、あずき色☆: お茶の間ＣＳＳ

お茶の間ＣＳＳ

ここんとこしばらく記事は書かかずにいましたが、「中の人」としてはちょくちょくブログのリフォーム。
小間切れの時間なので、たいしてはかどっておりませんが(´ﾍ｀；)
今回の改修工事は、見た目より中身重視…とはいえ、まだてんでできてないのですが、いわゆる「標準化」のお勉強も少ししました（近いうち外見も改装予定）。

標準化。

そもそも連休前、大藤幹さんというこのジャンルのえらい人の本を読んだです。 ^*1

CSSプロフェッショナル・スタイル―世界の「最先端」事例に学ぶWeb Designing BOOKS

本はウェブデザインのプロの人向けに書かれたもののよう（「Web Designing」連載）。
まあ、うちのような零細個人ブログにはあまり関係ないといえば関係ないのですが、この本がなかなか面白かった。
プロの人が仕事で切実に読むんじゃなくて、はたから面白がって読めばいいんで、あれこれといろんな側面からお気楽に楽しめました。
そんなわけで、フツーの人にも興味深い話がいろいろあるように思ったので、あやふやな知識ながら、そのへんのことを、ごくたよりなく書いてみます。
お茶の間での話題向けに(；・∀・)

　　＋

今世紀初頭、人類にとってウェブサイトのデザインは、いまだテーブルを使ってレイアウトするのが主流だったといいます。

本来は表を組むテーブル。
これを利用して、1ピクセルのＧＩＦをつっかい棒に、格子状に自在に配置するというやり方。京都の街みたいなもんかしら。
Dreamweaverなどのソフトを使うと、すいすいレイアウトできてしまう。

…人間が眼で見たときの見栄えは、たしかにそれで効果的に作れる。
ただネットの情報はもはや膨大、巨大なデータベース。
有効に活用したい。求めてる情報ににわかにアクセスしたい。
またそれぞれの用途のもとで自動的に抜粋・編集・加工して、新たなる創造ができないか、モトコのゴーストに会えないものか…なんて野望が生まれてくる。
これを実現するには、ネット上のデータが、機械的に扱えるように整理されてる必要がある。

こうして、情報構造をすっきり示す部分（ＸＨＴＭＬ）と、レイアウト・修飾などの見栄え部分（ＣＳＳ）を分けようという動きが出てきたそうです。
ＸＨＴＭＬで情報をマークアップし、ＣＳＳでレイアウト・デコレート。
これが標準化（らしい）。
データ構造を機械が読み取りやすくなれば、例えば検索エンジンの巡回ロボットが情報を集めやすくなるということ。
さらに巨大なサイトでも、各コンテンツの人、デザインの人と、分業によるメインテナンスがしやすくなるであろう、コストが下がるであろう…あろうあろうと期待される。
また、視覚障害者が用いる音声読み上げブラウザなどでも、情報へのアクセスがしやすくなるはず（米国ではアクセシビリティに配慮するよう法律で勧告されている）。

…というような希望的観測のもと、標準化の動きがすすみつつあります。
標準化の発想は前世紀からちゃんとあったそうです。
ただここ３年たらずの間に一気に浸透してきた。
ブラウザがしっかりと対応してきたこと（０１年ＯＰＥＲＡ６、０２年ネスケ７、０３年Ｓａｆａｒｉ、０４年Ｆｉｒｅｆｏｘ）、
ＣＳＳによるデザインの実際的な手法が蓄積されてきたことによるらしい。
ブログの普及とも期を一にしてる。

　　＋

いつものように震源地はアメリカ。
２００２年秋、アメリカのWired Newsがリニューアルした際、ＸＨＴＭＬ＋ＣＳＳを全面採用。
これが標準化祭りの始まりの合図になった。
作った人は、Douglas Bowman。
WaSP（＝The Web Standards Project）という組織のメンバー。

この組織のえらい人は、ほかにDave Shea、Jeffrey Zeldmanら。
ゼルドマンのＷ３Ｃ標準仕様の布教本はベストセラーだそう（２００３年、日本語版は２００４年）。

Designing with Web Standards―XHTML+CSSを中心とした「Web標準」によるデザインの実践Web designing books

段組の標準的なものを作ったのもこの人たちだそうです。
ダングミでは前にずいぶん苦労したので、作った人を指したい刺さねばならぬと思いつめていたのですが、これからは帰依したいと思いますヽ(´ー｀)ノ

スタイルシートスキルアップ・デザインブック〈2〉CSSマスターになるための「プロ技」集中講座Web Designing BOOKS

あと、標準を決めてるのは、Ｗ３Ｃ。ちゃんと「標準」どおりか検査する装置もあるのですが、作ったのは、Eric Meyer。

英語圏では、ＣＳＳコンテストみたいな催し物もよくあって、眺めるとたいへんきれいです。
見た目もきれいけど、中のコードもすっきり系。
色彩のコントラストやテクストの間合いなど洗練されています。ウィリアム・モリスに見せたいようなものも。
でも、あまり眺め続けると、自分のサイトが見たくなくなるのが欠点ｏｒｚ

・Web Standards Awards
・Stylegala - Web Design Publication
・CSS Import™ | The CSS Gallery
・css thesis ― sites, that's all

　　＋

ＣＳＳにも裏ワザがある。これがなかなか面白いです。

CSS Hack…と呼ばれてる。なんかかっちょいいっす。
少年ジャンプの格闘物のように、繰り出されるワザが次々に新ワザによって乗り越えられていくさまがステキ。感動的。涙熊しい。

例えば、古いブラウザだとＣＳＳを読み込めなかったり、物によってはフリーズする。また、ブラウザごとにバグや解釈の違いもある。
それらを回避するため、いろんな裏ワザが開発されています。

ネスケ４ｘ系統にＣＳＳを読み込ませないために、xhtmlのヘッダで外部スタイルシートを読み込ませる際に、細工する。mediaのタイプをscreen以外に指定すると、ネスケ４は排除できる。

<link href="cssのurl" type="text/css media="screen, print" />

ＩＥ４系にもスタイルシートを読ませてはやるまい。
@importを使って、一枚、経由用のスタイルシートをカマせる。

@import"ｃｓｓのurl"

ここで、@import()とカッコで囲ってしまうと、winのＩＥには読み込まれてしまうので、""で囲うのがポイントだそうです。細かいです。いまどき、４系で来る人も珍しいのです。うちでは三ヶ月に一回くらい。ウェブデザイナーさんが検証のため、４系使ってるだけだったりして(；・∀・)
このようなハックを、High Pass hackと呼ぶらしい（まちがってるかもｗ）。ワザの名称を絶叫しながら、コードを打ち込むと効くそうです。あたたたたたたた。

わりと好きなのは（使うのではなく、見た目が）、Box Model Hack。

voice-family: "\"}\""; voice-family:inherit; /*BoxModelHack*/

voice family inheritという語の並びが詩的。なんとなく砂の惑星ふう。

まだまだすごいのもあります。Band Pass Filter。ほとんど呪文です。
Ｔシャツのロゴに使うとかっこいいかも。この夏、注目のアイテム。

さっき気づいたのですが、Google Page Creatorで作ったページのＣＳＳがすごいですね。
クロスブラウザ対策が網羅されてる…ように見える（まだよくわかっとらんですｗ）。コメントもいっぱい。勉強なるなあ…しかし何のために(笑)

+

ともあれ、そこまでやらねば気がすまなくなるらしいです、ＸＨＴＭＬ＋ＣＳＳ。
この思想にはどこかストイックなところがあって、人を修道僧のごとき、ある種の潔癖症に追い込むといいます。
大藤師でさえその傾向は見られ、同じ話が繰り返し繰り返し出てくる(笑)
雑誌連載だったせいもあるのですが、口をすっぱくするほど何度も言い募られます。ロッテンマイヤーさんがハイジをアーデルハイド呼ばわりする感じというか(´ﾍ｀；)

ＸＨＴＭＬの厳密な仕様を目指す人々は、ストリクタと揶揄的に呼ばれるそうです。
揶揄、というより自嘲で、自分たちでその原理主義者のごとき潔癖ぶりを笑っておられるみたい。
われらは、この堕落しきった世界を標準化によって清浄にするためつかわされたエヴァンジェリストである。約束された未来には、厳格に清められた世界がやってくるのだ。おらといっしょに、ぱらいそさ、いくだ！

ことを突き詰めようとすると、ニンゲン、原理主義っぽくなるみたいです。
私ごときでも、すでに感染してるらしくて…こんな姉歯物件のごときブログは即刻破壊し、作者はシベリア送りにして、焼跡からやり直したい気持ちが。
あと、やたらとＣＳＳを盗み見るくせがついてきたり(；・∀・)

あと、遊び半分で眺めてるぶんには面白いけど、プロの人はたいへんそうだ。どんどん新しくなるから、どんどん追いついていかないといけないもの。せっかくマスターしたことが無駄になるのは、モチベーションを維持するのが難しそうと思った。

---