先日ご紹介した
HTML2CSSのデラックス版をリリースします。機能とデザインが強化されているので、前回のブクマを使っている方もこちらをお使いください。
なお、oitakeのHTML2CSSは、
Jonathan Holstさんが作られたHTML2CSSにインスパイアされて作ったものです。oitakeのは機能的に不完全ですが、ブックマークレットから簡単に呼び出せるメリットがあります。
HTML2CSS デラックス版
上のリンクをお気に入りやブックマークレットに登録、任意のページで呼び出してください。ページ上部にHTMLから生成された空のCSSが表示されます。
IEをお使いの方は「Copy CSS」をクリックしてください。CSSをコピーすることができます。
シンプル版(旧版)ではネストされた要素を列挙できませんでしたが、デラックス版では全ての要素を列挙できます。例えばこんな感じです。
div {
}
div#all {
}
div#all img {
}
div#all div#main {
}
(中略)
div#all div#main div#menu img {
}
div#all div#footer {
}
div#all div#footer div {
}
div#all div#footer a {
}
ただし、class属性もid属性もない要素の子要素は(故意に)列挙しません。
<div><strong>このstrong要素は無視されます。</strong></div>
また、ふたつ以上のclass属性値には未対応です。
div#all div#main div.entry div.block!text {
}
セパレータの半角スペースを「!」に変換するだけなので注意してください。
最終的にはテキストエディタ上で何らかの置換作業を行うことになりそうです。次のような長いセレクタはid属性の親要素を削除することで簡略化できます。
div#all div#main div#menu div.list div.links#ad div.linktext img {
}
複雑な構造のウェブページでは使わない方が良いかもしれませんね。
※前回、縦書きのアップグレード版をリリースすると書きましたが、めっさ面倒くさいことに気が付いたので、また今度。