CSSがよくみえる

Bokmarkletとは、 JavaScriptで記述された小さなプログラムで、ブラウザのブックマーク（お気に入り）から利用することができるものです。インターネットを徘徊しているとたくさんのBookmarkletを見つける事が出来、日本語のサイトだとこのサイトがオススメです。

今回紹介するのは、スタイルシートで定義したCLASS, ID, ブロックレベルのタグをアウトライン化してくれるBookmarkletです。定義名も見せてくれるので、何処にどのCLASSが指定されているかも一目瞭然です。お気に入りのサイトがどのようにレイアウトを組んでいるのかを知るのには大変便利なスクリプトかもしれません。
Bookmarklet：CSSブロック表示

セットアップは比較的簡単です。まず上のBookmarkletをブックマークに追加したあと、このCSSファイルをダウンロードしてください。落としたCSSファイルをあなたのサイトのサーバーに置くか、ローカルサーバーにアップロード。このとき何処にアップロードしたのかをちゃんと覚えておいてくださいね。Bookmarkletのソースコードは以下のとおりです。

javascript:(
  function(){
     var newSS;
     newSS=document.getElementById('codepoetry-debug-stylesheet');
     if(newSS){
        newSS.href=null;
        document.documentElement.childNodes[0].removeChild(newSS);
      } else {
        newSS=document.createElement('link');
        newSS.rel='stylesheet';
        newSS.type='text/css';
        newSS.href='http://www.stylesheet-stylebook.net/stuff/css-debug-2.css';
        newSS.id='codepoetry-debug-stylesheet';
        document.documentElement.childNodes[0].appendChild(newSS);
      }
   }
)()

ブックマークに追加したBookmarkletの情報を表示させ、アドレスの部分を任意の場所に変えて準備完了です。残念ながらマック版IEでは上手く動きませんが、それ以外の新しいブラウザなら上手く動きます。レイアウトチェックには使えるかもしれませんね。

《参考資料》codepoetry：CSS Debugger, Redux