前回の続き
プログラマへ質問: こんなプログラム言語があったら── : 亜細亜ノ蛾の続きです。
CSS で「できること」「できないこと」
CSS という言語は、「できること」(文字装飾など)と、「できないこと」(サーバ通信 など)を覚えるまでは簡単です。
できることが わかっていれば、「やりたいこと」の答えは検索で すぐに見つかります。できないことも、あっさり諦められる。
問題なのは、「できなさそうで できること」(リンクに特定のアイコンを表示)と、「できそうで できないこと」(リンクに favicon を自動取得して表示)を覚えるのが やっかい。
さらに、「全てのブラウザで同じように表示させたい!」と禁断の、いや ごく普通の願いが、地獄への道しるべ。CSS 魔のダンジョンへ、ようこそ──。
「CM 入りまーす」
そこで──、すべての Web デザイナ・CSS ファン・ブロガ必見、現在絶賛発売中のホップ本(飲み口は柔らかいが辛口、のどごしスッキリ)を熟読するわけです。
これでアナタも、CSS と (X)HTML に関しては一人前だ!
──のだけれど、厄介なのは これから。
CSS ハックって……
さて、CSS の迷宮に入り込んだアナタは「CSS ハック」なるもの──呪文と出会うわけです。
ブラウザ判定といえば、他の言語だと、こんなコードになります:
if ($ie <= 6) {
$color = '#ff0000';
/* etc... */
} elseif ($ie = 7) {
$color = '#0000ff';
/* etc... */
} elseif ...
──とまぁ、「にんげんさま」でも、なんとか意味が わかる感じ。
しかし これが CSS だと:
* html body {
color: #ff0000;
/* etc... */
}
*+html body {
color: #0000ff;
/* etc... */
}
── !? 「ie」とかバージョン数とかは、どこ?
ref.: Lucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめ
まぁ、「Perl の $ とか @ みたいなもの」──とか言うと Perl Mongers に怒られそう(笑)だけど、
Perl の $/
と $\
の初期値は何?
みたいに、「じゅうばこのすみ」知識を、普段から意識してコードを書くような もどかしさ!
デザイン中は、ブラウザには常にCSSバグリスト@CSSバグ辞典スレッドや構造のマークアップなしでフロートをクリアする方法などが開いている──。というような人、多いのでは?
CSS はプログラム言語か?
いい加減、「CSS はプログラム言語ではないので、同列に並べて論じるのは無意味」という声が聞こえてきそうですが──
まさにその通り! CSS を「Web デザインに関して何でもできる魔法の言葉」と思っていると、けっこう つまづきます。
──ひょっとして、「Web デザイン = CSS」というのは、ちょっと違うのでは、と今は感じています。
CSS で できないこと
たとえば、下記の (X)HTML に書いてあるような色づけは、CSS では できない(よね?)。
<p>CSS で「このカッコの中を赤く」、
ココからココまでを青く、できる?</p>
けっきょく、下記のように (X)HTML を書き換える ことになる。
<p>CSS で「<span class="red">このカッコの中を赤く</span>」、
<span class="blue">ココからココ</span>までを青く、できる?</p>
──すると、矢のように「red
や blue
などという class
は云々」とツッコミが飛んでくる(笑)
そこで、red を attention にしたり blue を cold にしたり(ADP: class="red")、あるいは他のクラス名にしたりするワケですが──
(X)HTML に手を加えている、という点では差がない。
それ JS
で、けっきょく何が言いたいかというと──
(X)HTML に手を加えなくても、上記の色づけだったら JavaScript で できる。正規表現や XPath を駆使すれば、もっと複雑な処理もできる。
もちろん、どんどん複雑怪奇な JavaScript コードに なっていくのが、それでも、(X)HTML には必要最低限の記述だけ済む。
──ひょっとして、真に「デザインと構造を分離」できるのは、JavaScript じゃね?
ということで、Web デザインと言えば「(X)HTML + CSS」で FA だったわけだが、
2008 年は「(X)HTML + JavaScript(オンリィ)」で Web デザイン!
──というのは どうだろう。
あ、オレはパスだけど(エエー)。
『ADP』のデザインテンプレートに注目
──みたいなネタを思いついたのは、大好きなブログ『ADP』から。
2005 年から、ずっと取り組んでいるテンプレートの話(ADP: デザインテンプレート1124)があって、影ながら応援というか注目してました。
何度も書いているが、デザインテンプレート1124でやりたいことは、1段組、2段組レイアウトの切り替えだ。Firefox, Opera, Safariでは、ウインドウの横幅がある程度あれば幅固定の2段組レイアウトのように見えるけれど、ウインドウの横幅を狭くすると1段組に切り替わる。
何か自分に手伝えることがないかなー、と自分なりに試行錯誤して、それで CSS スキルを磨きました。Momomo さんに感謝!
最近、ADP: dt1124がうまくいったよという記事があって、実際にモバイル端末で意図したとおりの表示をするもの
に出会って、そろそろまじめに取り組まなければならない
、と締めていました。あ、アツいぜ! 熱すぎるぜ!
──と思う 一方、「CSS だけで実現する、というのは あまりにも大変だな」と思いました。
なので、よっぽどの「CSS マニア」以外は、CSS だけでデザインするよりも、「CSS + JavaScript」も視野に入れたほうが良いのでは?
IE7.js
というようなことは、自分がわざわざ書かなくても、IE7.js登場 – IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナルという記事が、『はてなブックマーク』で 500 近いブックマークが付いていることから、
(X)HTML + CSS だけでなんとかする、というのはゴメンだ!
──という人が多いことを示しているような。
で、ADP: IE7.js を見てガッカリする、と……。
けっきょく、CSS だけの Web デザインで、各ブラウザ間の差異を完全になくすのは(ごく単純なデザイン以外)無理なのかな……。そこが、一生懸命 CSS を勉強するコストと割が合わなく感じます。
まとめ
──まとまるのか? と思っていたら、ちょうど良い具合に、弾さんのインタビューで良い言葉を発見しました。
Q44 なんちゃってプログラマーってどんな人を指しますか?
PHP使ってる人? なんちゃってでいいところがPHPのいいところでもあり、存在理由でもあるのだけど。これはPHPをディスっているわけでも何でもなく、使いどころを間違えなければPHPもいいもの。ただ、PHPでプログラミングの奥義を究めたいと言い出すと、「それは違うだろう」と思う。(……)
New Generation Chronicle:小飼弾――35歳からのプログラミングこそ無上の至悦 (5/9) – ITmedia エンタープライズ
まさに、プログラム言語界の PHP の位置に あたるのが、Web デザイン界の CSS という気がします。基本的なレイアウトは CSS で、そこから先のブラッシュアップは JavaScript の出番、というのが良いような。