「(X)HTML + CSS だけで Web デザイン」時代の終わり?

シェアする

前回の続き

プログラマへ質問: こんなプログラム言語があったら── : 亜細亜ノ蛾の続きです。

CSS で「できること」「できないこと」

CSS という言語は、「できること」(文字装飾など)と、「できないこと」(サーバ通信 など)を覚えるまでは簡単です。

できることが わかっていれば、「やりたいこと」の答えは検索で すぐに見つかります。できないことも、あっさり諦められる。

問題なのは、「できなさそうで できること」(リンクに特定のアイコンを表示)と、「できそうで できないこと」(リンクに favicon を自動取得して表示)を覚えるのが やっかい。

さらに、「全てのブラウザで同じように表示させたい!」と禁断の、いや ごく普通の願いが、地獄への道しるべ。CSS 魔のダンジョンへ、ようこそ──。

「CM 入りまーす」

そこで──、すべての Web デザイナ・CSS ファン・ブロガ必見、現在絶賛発売中のホップ本(飲み口は柔らかいが辛口、のどごしスッキリ)を熟読するわけです。

これでアナタも、CSS と (X)HTML に関しては一人前だ!

photo

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
市瀬 裕哉 福島 英児 望月 真琴
九天社 2007-02

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 できる大事典 HTML & CSS (できる大事典) Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト スタイルシート・デザイン XHTML + CSSで実践するWeb標準デザイン講座 Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

by G-Tools , 2008/01/10

──のだけれど、厄介なのは これから。

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>

──すると、矢のように「redblue などという 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』から。

ADP: Web KonetaアーカイブADP: Web Konetaアーカイブ

2005 年から、ずっと取り組んでいるテンプレートの話(ADP: デザインテンプレート1124)があって、影ながら応援というか注目してました。

何度も書いているが、デザインテンプレート1124でやりたいことは、1段組、2段組レイアウトの切り替えだ。Firefox, Opera, Safariでは、ウインドウの横幅がある程度あれば幅固定の2段組レイアウトのように見えるけれど、ウインドウの横幅を狭くすると1段組に切り替わる。

ADP: デザインテンプレート1124

何か自分に手伝えることがないかなー、と自分なりに試行錯誤して、それで 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 の出番、というのが良いような。