oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

HTML2CSS:HTMLを解析して空のCSSを生成するブクマ

※20070831:デラックス版をリリースしました。こちらをお使いください。
※20070830:Firefoxでは改行文字がそのまま表示されてしまうため、別途Firefox用のブクマを用意しました。テキストエリアではなくページ上にそのまま表示してしまいますが、とりあえずFirefoxユーザーの方はこちらをお使いください。


Jonathan Holstさんの作られた「HTML2CSS」というプログラムがGoogle Codeで公開されています。国内でも少し話題になりました。
HTML2CSSは、HTMLからCSSのセレクタだけを生成してくれるので、コーダーの方には有用だと思います。CSSを一から書き起こす際に手間が省けますからね。
ただ、このプログラムはPythonで書かれているので、経験のある人でなければ起動することすら難しいでしょう。

というわけで、HTML2CSSと同じ動作をするプログラムをブックマークレット(JavaScript)で作ってみました。
同じ動作、といっても、HolstさんのHTML2CSSほど優秀ではありません。要素名とclass属性値、id属性値を適当につなげて出力するだけです。
もっとも、実際にCSSを記述する際は、それほど複雑なセレクタにまで手を加えたりはしないので、これはこれで良いかとも思います。

HTML2CSS

HTML2CSS(Firefox用)

※このリンクをクリックすると不具合が発生します。
 右クリックメニューからお気に入りに登録してお使いください。


仕様です。

・任意のウェブページ上で起動してください。
 ページ上部にCSSの記述されたテキストエリアが表示されます。
・CSSは要素名でソートされます。
・全ての要素名と属性値は小文字に変換されます。
・br・style・script・noscriptタグは無視します。

本当はもっと機能を詰め込んだり、品質を高めたりしたかったのですが、ブクマの文字数制限から断念しました。
外部.jsファイルを動的に読み込むスタイルで再挑戦するかもしれません。

スポンサーサイト


2009.12.16 Wednesday | 13:07 | - | - | -

コメント

こんにちは。Firefox2.0.0.5 Windowsで改行が¥r¥nと出力され、行が繋がって表示されました。昼過ぎに確認したのでもしかすると直して頂いてたらすみません。
mattn | 2007/08/29 10:41 PM
ご報告ありがとうございます。
ひとまずFirefox用のブクマを作ってみたので、そちらを使ってみてください。
oitake | 2007/08/30 10:33 AM

アーカイブ

広告