サーバサイドCSS、Smart*CSSを試してみた
こちらの記事を拝見して興味津々で試してみました。
>>ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択
>>Smart*CSS | Lism.in
一言で言うと、こういうものらしいです。
Smart*CSSは構造化(階層化、あるいは入れ子)したCSSを動的に変換して出力するシステムです。変換はSmart*CSSが自動でやってくれるので、「手元で変換して、そのファイルをアップ」のような面倒なことは一切必要ありません。
ウノウラボさんのページ内で世の中のCSSを書く人はCドライブに保存して動かない物はいらない
と書かれていて、確かにそうだろうなーと思ったけど、幸いにもSmart*CSSに必要なSmartyもローカルにインストール済みだったので、結構気軽に試せました。
Smart*CSSのインストール
こちらのページから本体をダウンロード。書かれた通りにCSSを置くディレクトリに展開。common.scss、CHANGELOG、LICENCEの3つは動作には必要ないと書かれていたので削除。Smartyに関しては別所に予め置いてあるので、同梱されていた「smart_css.php」の31行目辺りの「// Smarty settings」以下の部分でパスを書き換える。
scssファイルを作る
上記インストール方法のページの一番下の欄にあるように、Smart*CSSはそのまんまの名前のCSSファイルがある場合はそれを呼び出すんだけど、xxx.cssという名前のファイルがブラウザから呼び出された時にそのファイルがなくて代わりにxxx.scssという名前のファイルがあれば、そいつを変換してxxx.cssとして出力してくれるとのこと。
ということで、さっき展開したファイルを置いたCSSディレクトリにとりあえず上記サイトに書かれていたサンプルのソースを参考に簡単にスタイルを入れ子にして書いてtest.scssとして保存。
@charset "utf-8";
#content{
p {
border:1px solid #f00;
padding:3px;
}
ul {
list-style:none;
li {
background:#cfc;
padding:3px;
margin:3px;
}
}
}
htmlファイルの作成
テスト用のhtmlファイルを用意。body内には上で書いたソースに合わせて#contentの中にpとul、liを適当に入れました。そのhtmlを「test.html」として保存。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
<title>Smart_Css サンプル</title>
</head>
<body>
<div id="content">
<p>テストテストテストテストテストテストテストテストテストテストテストテスト</p>
<ul>
<li>テステステステス</li>
<li>テステステステス</li>
<li>テステステステス</li>
<li>テステステステス</li>
</ul>
</div>
</body>
</html>
CSSを呼びだすlinkには、上で作った.scssファイルと同名の.cssファイルをlinkで指定。これで準備OK。
いよいよプレビュー
ドキドキの瞬間プレビュータイムがやってまいりました。・・・見事にCSSが反映されました。やっほー。
コンパイル済ファイルのディレクトリ(/templates_c)を確認すると、ちゃんとSmartyがコンパイルしたファイルが増えてます。
変換後のCSSソースも確認してみます。・・・いい感じ!
@charset "utf-8";
#content p {
border:1px solid #f00;
padding:3px;
}
#content ul {
list-style:none;
}
#content ul li {
background:#cfc;
padding:3px;
margin:3px;
}
.scssにコメントを入れておく
CSSを階層化して記述できるのはかなり面白いし、htmlと見比べた時にも把握しやすいなーと感じました。でも何かの拍子にインデントがズレると階層の把握が視覚的に難しくなる、また階層が深くなるとこの「 } 」はどこの「 } 」だっけ?と一瞬戸惑う。
ので、.scssファイル内の閉じる「}」付近にコメントを置くことにしました。Smart*CSSのサイトに書いてないっぽいんですが(いや、書いてあるのを見逃してるのかもしれないですが)smart_css.phpを見てみると、デリミタが、
$smarty->left_delimiter = '[';
$smarty->right_delimiter = ']';
と変更されていたので、コメントは[* ここコメント *]という形でいけそうです。ということで、上記の.scssファイルにコメントを追加してみました。
@charset "utf-8";
#content {
p {
border:1px solid #f00;
padding:3px;
}
ul {
list-style:none;
li {
background:#cfc;
padding:3px;
margin:3px;
}
}[* ul-end *]
}[* content-end *]
Smartyのコメントは出力されず、最終的に人目に触れないので(作業してる人しか見えないので)自分が分かりやすい位置にコメントを置いておくとより便利かなと思いました。
その他感想
- Smarty使ってるけどSmartyの知識、あんまりいらない。設置が終わればSmarty意識しなくてもとりあえず使える。(多分)
- 変数も使えるのはかなり熱い。管理が楽になる。
- 構造化されたhtmlファイルとCSSを見比べるのが楽。
- でもやっぱりローカルでPHPを動かす環境を整えてないデザイナ、コーダーには少し遠い存在なのかも。
- CSSをすべて手打ちできない人にはキツい。
- 「今後の予定」に「Smartyを外す」と書かれていたので取り掛かりの敷居は下がるかも。
- 何にせよ、今後が楽しみ。
<< 変な定義リストをスッキリさせたい | 気になった初期化CSS >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/167
コメント (3)
始めまして!!
いつも拝見しています。
参考になる記事ばかりで、ありがとうございます。
それにしても、ビジュアルが素敵です!!
話は変わりますが、このブログのページのトップに戻るボタンのスライドはどうやっているのですか?
あつかましいお願いで申し訳ありませんが、教えていただけませんか?
よろしくお願いいたします。
投稿者: takuya | 2007年09月15日 01:42
>takuyaさん
はじめまして!コメントありがとうございます。
ページのスクロールの件ですが、jQueryとinterface.jsを使ってます。
http://redline.hippy.jp/lab/mt/post_38.php
↑このページの「ついでにスムーススクロールも。」っていう部分にも少し書いたんですが、Emotional Webさんのこちらの記事内で書かれている方法を利用させていただいてます。
Interface.jsで簡単スムーススクロール - Emotional Web
http://www.lllcolor.com/web/jquery/74.html
スクロールする早さの調節もできるので便利です~。
投稿者: Red | 2007年09月15日 11:58
早速お返事ありがとうございました。
実装することができました。
日々のブログ更新楽しみにしていますので、頑張って下さい。
ありがとうございました。
投稿者: takuya | 2007年09月15日 13:08