◎ 【jQuery】twitter BootstrapなどのCSSセットを書き換えてカスタマイズする際、元のCSSの各セレクタの範囲や振る舞いを確かめておきたいので、自分用に確認用スクリプトを入れたhtmlを作ってみた。

twitterが公開、提供しているCSSフレームワークのBootstrapを利用することで、フルードグリッドを使ったレスポンシブなページの作成が簡単かつスピーディーに進行できる。とても重宝するが、その反面、同様にbootstrapを使用した他所のものと同じデザインにならないよう差別化するには、それなりに手間がかかる。CSSの解析というほどではないが、CSSが及ぼす範囲や振る舞いをざっと確認しておく必要がある。

また、BootstrapのCSSセットに限らず、他人の作ったコードを触っていると、些細なことで引っ掛かり、ときとして出口の無い迷路に入り込むことがある。

そんなこんなで、事前にCSSを確認しておくためのスクリプト（jQueryを使用）を入れたhtmlを作ってみた。

サンプルは、配布されているBootstrapのテンプレート「bootstrap-fluidlayoutr.html」の中に簡単なスクリプトとselectやinputといったタグを仕込んだだけのもの。

あらかじめ、主要なCSSセレクタ（主にclass）や、後で問題がおきそうなものを選んで、selectの中に入れて選べるようにしておいた。スタイルは、とりあえず赤い色のボーダーでセレクタの範囲を表示するようにした。inputのテキストフィールド内のセレクタやスタイルは書き換え可能なので、その他のスタイル、例えばmarginやpaddingなどを指定して、変化の様子も確認できる。

▶ サンプルページ（googledrive.comを利用）