CSS おれおれ Advent Calendar 2012 – 24日目
CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。
先に結論を申し上げると
CSSがあるお陰でJavaScriptが便利に！ JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利！ というお話です。
なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。（もちろん、あれも楽しいよね！） あ、あとSVGやらも範囲外です。
断定的に申していても、常々例外はあるものです。
JavaScriptで出来る事、出来ない事
JavaScriptそれ自体が出来る事は、あまりありません。数値を計算したり文章を編集したりってのが関の山です。
しかし現実にはJavaScriptを用いた、多くの「派手な」実装があります。クリックすると画面が切り替わったり、メッセージが表示されたり、あるいはゲームが進行することもあります。
これはどういう事かと言うと、その「周辺仕様のAPI」をJavaScript経由で利用しているのです。（これは他の言語でも一緒ですが。）
JavaScriptだけじゃ何も出来ない
処理した数値や文章を出力するには、それ相応の出力を行わねばなりません。が、JavaScriptの言語中核仕様にはあらゆる出力は規定されていません。往年のalert()も近年のconsole.log()も、あるいはdocument.write()やelement.innerHTMLも全てJavaScriptそれ自体ではなく周辺仕様の類です。
例えば通信処理を行う場合はXMLHttpRequestという仕様をJavaScriptから利用して行います。例えば音楽を鳴らす場合はFlashをJavaScriptから操作します。（最近はHTML5がありますが、JavaScriptではありません。）
そして、その最たるものが、HTMLとCSSです。
CSSで出来る事、JavaScriptとの繋がり
というわけで閑話休題。
JavaScriptであれやこれやと計算をして、例えば画像を動かすような場合、その場所を指定するのにCSSを利用します。もちろん、JavaScriptなしでCSSだけで場所を指定する場面も多々ある事でしょう。そうやって配置したものを動かすときに使うのが、JavaScriptです。あるいは逆に見ると、JavaScriptから画像の位置を動かすには、CSSを使う他ありません。
配置を例に上げましたが、CSSの多彩な表現はそれに留まりません。文字の大きさや背景の色、矩形の大きさを定めたり影を付けたり、余白、不透明度の指定まで出来ます。これらを駆使して画面を彩ります。
JavaScriptにはそれが出来ません。出来るのは、そういう「CSSを使う」ところまでです。JavaScriptでそういった動きを実現するために、我々はCSS（とHTML）についても合わせて学ぶ必要があります。
JavaScriptから見たCSS
前述の通り、JavaScriptから画面を操作しようとした場合、HTMLとCSSが必須となります。
ですが、これは良い事です。視覚的な細かい処理を自分でやる必要がなくなりますから。
例えば枠線を描く、といった処理を自前で作成するのは楽ではありません。特定の文字列領域を探して来て、矩形領域を計算し、適切なブラシを以てパスを描画する、なんて面倒でやっていられません。
セレクター（あ、これも実に強力ですね！）で検索して、指定の形式border:dotted 3px redを「設定」するだけで、完了です。楽ちんです。
特に最近ではCSS 3の登場により、視覚表現が飛躍的に強化されています。
影を自前で描画する事を考えてください。背景用に複数の画像の配置を自前で計測する事を考えてください。立体的な矩形の変形を自前で演算する事を考えてください。
気が遠くなりそうです。でも、CSSがこのあたりを全部引き受けてくれるので（ブラウザーが既に実装してくれているので）、我々は簡単に視覚表現を実装する事が出来ます。
ありがとう、CSS！ ありがとう、ブラウザーベンダー！ でもIE 6は爆発しろ！
学ぶ
CSSから始めてJavaScriptを学ぶ場合
あ、もちろんHTMLもCSSと一緒にやっといてくださいね。
先にCSSを知っている人は、プログラミングなるものを学ぶ事になります。これはなかなか難易度が高いです。
が、取っ掛かりはしやすいはずです。何と言ってもすぐに結果が出ますから。
具体的にやりたい事というのは、既にご存知のはずです。例えば最近流行りの視差表現（パララックス）を実現したいなら、「よくわかんないけどスクロールしたらpositionを操作すりゃ良いんでしょ」とまではわかるはずです。あとは順番に（「スクロールしたら」ってどうやってわかるの？ positionを設定する要素はどこから探すの？ というかCSSを設定するってどうやるの？）解決してゆけば、全て実装できます。
大丈夫。
JavaScriptのためにCSSを学ぶ場合
CSSで表現の幅が増えたという事は、CSSを使ったJavaScriptの表現も幅もそれ以上に増えたという事です。
例えば先程掲載したCSS 3D Butterflyをキーボードから動かせたら、もうちょっとしたゲームが作れますね。
そこまで高度でなくても、フォームの入力内容を確認してエラーを表示するとか、一覧を動的に検索して強調表示するとか、そういうのはCSSも知っていないと実装しづらいと思います。サイズを変えるならボックスモデルや、配置するなら包含ブロックについての知識も必要でしょう。（いずれもCSSの仕様です。）
おしまい
つらつらと書いてみましたが、まあ誰が得するんだよって感じに仕上がりました。
うーん。まあ良いか。一応、これで本年のひとりAdvent Calendarは完走という事にしたいと思います。（うちは本家に合わせて24日で終わり。） いやあ、明日からは早寝早起きをしたいと思います。
とっぴんぱらりのぷう。