REDLINE MAGAZINE | サーバサイドCSS、Smart*CSSを試してみたREDLINE MAGAZINEトップページへ

すべてのエントリを見る

サーバサイドCSS、Smart*CSSを試してみた

こちらの記事を拝見して興味津々で試してみました。

>>ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択
>>Smart*CSS | Lism.in

一言で言うと、こういうものらしいです。

Smart*CSSは構造化(階層化、あるいは入れ子)したCSSを動的に変換して出力するシステムです。変換はSmart*CSSが自動でやってくれるので、「手元で変換して、そのファイルをアップ」のような面倒なことは一切必要ありません。

ウノウラボさんのページ内で世の中のCSSを書く人はCドライブに保存して動かない物はいらないと書かれていて、確かにそうだろうなーと思ったけど、幸いにもSmart*CSSに必要なSmartyもローカルにインストール済みだったので、結構気軽に試せました。

Smart*CSSのインストール

>>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さん
はじめまして!コメントありがとうございます。
ページのスクロールの件ですが、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
スクロールする早さの調節もできるので便利です~。

早速お返事ありがとうございました。
実装することができました。

日々のブログ更新楽しみにしていますので、頑張って下さい。

ありがとうございました。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。