ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSで便利だと感じるのは構造を階層化できる点だが、逆にきちんと構造化しておかないと欠点にもなりかねない。別な所で定義した名称と重複してしまい、どうもうまくいかないという経験がある人も多いはずだ。

まず現状どういった構造になっているのか、それを把握する所からはじめてみよう。それが分かればうまく構造化できるはずだ。

今回紹介するオープンソース・ソフトウェアはhtml2css、HTML文書を解析してCSSファイルにするソフトウェアだ。

html2cssはclassやid、そしてタグの構造を解析して、それをCSS形式で出力してくれる。これを見てみると、CSSのネストした構造がどの位深いのか良く分かる。無駄な点があればそれも見えてくるだろう。ソースとしてファイル、文字列またはURLを利用できる。

最上位がhtml bodyからはじまるので、大抵ネストは深くなるだろう。だが、そこから不要なものは抜き出して記述していけば、別な定義へ影響を及ぼしづらい綺麗なCSSに仕上がるはずだ。

場合によってはこれだけでは足らず、定義を付け足す必要があるだろう。だが、初期段階やある程度運用が進んだ状態で整理する際には便利に使えそうだ。

html2css - Google Code

http://code.google.com/p/html2css/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2