Entry

CSS の自動生成とか

2007年05月25日

サイトのデザインを少しいぢろうかと思って,ゴニョゴニョしているんですけれど,CSS を書くのが面倒で困っています。

巷の自動生成を謳ったツールは,エディタで書いていたのが,マウスに置き換わっただけのものが多いようで,キーボードばかりバシバシ打っているあたしには,ちょっと向かない感じ。設定項目が異常に多いツールを使うなら,手で書いた方が早いと思うんですけど……どうなんでしょ。また id 属性や class 属性でページを構造化するときにも,レイアウトや構造(属性の値とか)が決め打ちで固定化されるものが多いので,ちょっと使いづらいです。

そういうわけで,役に立ちそうなツールを考えてみました。ちょっと最近時間が無くて,作ってる暇が取れないんですけれど,明日あたり作ってアップロードしようかなー……と思います。

コンセプトとしては,以下のような感じ。

  • ひな型になる HTML を先に書く。
  • ひな型の HTML を元にして CSS を生成する。
  • デフォルトの色やサイズをまとめて管理しておけるようにする。
  • 使う画像(背景画像)なんかもひな型に書けるようにする。

ページを作るときって,普通,次のような段階を踏むんだと思うんですね。少なくとも,あたしはこうしてます。

  • ラフスケッチを描く
  • HTML の構造に分割する
  • 必要な画像を用意する
  • CSS を書く
  • 調整する(バグ取り)

このうち,「HTML の構造に分割する」ってところと,「CSS を書く」ってところで2段階踏むのが,少し無駄だと思うんです。構造が決まっていて使うタグが分かるんだから,CSS を書く段階で,使うセレクタも大体分かってるはずですよね。それだったら,ひな型を作って,そこから CSS を生成した方が楽なんじゃないか……と。これなら,HTML の構造が変わってもすぐに対応できるし,凡ミスでスタイルを付け忘れる心配も少なくなります。

今のところ,HTML のひな型から,セレクタしかない CSS を作るところくらいまでしか書いていないんですけれど,他にどんな機能を作ろうか,ちょっと考え中です。

CSS のコメントを HTML のひな型に埋め込めるようにする機能は,少し便利そう……。あとは,どこまで自動生成するかです。あまりにガチガチに既定値を作っちゃうと使いづらそうだし,かといって,オプションを増やすと「手で書いた方が早いんじゃね?」みたいなことになりそうですもんね。上に一応考えていることは挙げてみたんですけれど,使い方の学習に時間がかかるようだったら,作ってもあまり意味がありません。

できれば,コマンド一発でそれっぽい CSS のひな型ができればいいんですけど……もう少し考えます。

Trackback
Trackback URL:
Ads
About
Search This Site
Ads
Categories
Recent Entries
Log Archive
Syndicate This Site
Info.
クリエイティブ・コモンズ・ライセンス
Movable Type 3.36
Valid XHTML 1.1!
Valid CSS!
ブログタイムズ

© 2003-2012 AIAN