スタイルシートでデザインとロジックを分離する

Posted on 2007年07月11日 | Comment (0) | TrackBack (0)

お仕事で大小様々なwebアプリを作りました。javaだったりperlだったりphpだったり、何で作るかはいろいろ。
そして毎回頭を抱えていたのが、体裁の整ったレイアウトのページを動的に生成することの難しさ。

昔はスタイルシートなんてのはほとんど利用されなくて、テーブルによるレイアウト技術を駆使し(笑)、それはそれは職人芸的なページを作ることが要求されました。
最初にhtmlの雛形を作って、それをもとに動的なページを生成するコードを書いていましたが、何か修正しようと思うとこれがまた難しく、、とってもイヤな仕事でした。

そんなわけで、社内向けのwebアプリを作る際などは、html内に一切の装飾を含めず(笑)、「しんぷるいずべすと!」と言いながらそのまま使わせていたこともありました。

デザインとロジックを分離する機構は当時もあったけど

フレームワークを使ったりすると、デザインとロジックを分離することがややラクになって、当然積極的に利用してました。けど、分離するって言っても、、そんなに完璧じゃぁないんですよね^^
当たり前ですが、テンプレート相当のファイルに出力する変数を埋め込んだり、繰り返し情報を出力するような命令を埋め込んだりで、htmlしか分かりませんな人にはやっぱり扱えませんでした。

スタイルシート便利です

実は最近までスタイルシートの便利さを理解していませんでした。あへへ^^
これがまたびっくり仰天。なんの装飾もない僕のhtmlコードが、見事なデザインのページに早変わりです。さらにデザインの修正はスタイルシートをいぢるだけ。htmlコードに一切手を入れることなく、いろんなデザインのページになります。
こんな便利なものがあるなら、webアプリもそういう作りにしとけばよかったなぁと、今更ながら思います。

良く分かんない人のためにサンプルページを作りました。どちらも内容は同じです。スタイルシートなしの方は、スタイルシートの定義文を削除しただけ。