デバッグCSSはStylishを使うとすこぶる便利な件

先日TRANSさんで紹介されていたデバッグCSS、Firefxの拡張「Stylish」を使えば便利だと思うのですよ。
以前書いたFx拡張まとめでも挙げているように、Stylishはユーザースタイルシートの編集・管理をする拡張です。

デバッグ用CSS「Diagnostic Styling」とそのサンプルコード - TRANS [hatena]

http://d.hatena.ne.jp/aratako0/20080119/p1

サイトのチェックをするたびにデバッグCSSを追記するのもちょっと面倒ですよね？
Stylishに登録しておいてチェックの時だけ有効にすれば、制作済みのファイルを汚すこともなくとても便利です。自分はこの方法でチェックをやっています。Web制作者なら大抵Firefoxをインストールされていると思うので、試しにやってみてはどうでしょう。（以下はWindowsでの手順です。）

1. Stylishをインストール
2. ステータスバー右にあるアイコンを右クリック→スタイルを書く→空のスタイル
3. スタイルを追加ウィンドウが開くので、概要を入力
4. 有効のチェックをはずす
5. 下枠にデバッグ用CSSを入力
6. 保存

登録はこれで終わり。
チェックをするときは「アイコンを左クリック→グローバル・スタイル→デバッグにチェックを入れる」とすればOKです。

 

以下は自分の登録しているデバッグ用CSSです。グローバル部分はDreamweaverのテンプレートや外部ファイル化してチェックの手間があまり無いので、対象を本文に絞っています。2行目はページ内のアンカーが対象にならないようにする記述です。（下2行はTRANCEさんで紹介されていたもの。）

div#main a {background:yellow;border:3px solid yellow;}
div#main a[name] {background:inherit;border:none;}
div#main a[href="#"] {background: lime;}
div#main a[href=""] {background: fuchsia;}

…と便利なStylishですが、他にはこんなものも登録してすぐに呼び出せるようにしています。

body{font-family:"ＭＳ Ｐゴシック" !important;}

font-familyでヒラギノなどが指定されていると、同フォントがPCにインストールされている環境ではそちらが優先してしまう場合があります。一般のWindowsユーザは大抵ＭＳ Ｐゴシックなので、チェック時はこれを有効にしてます。

あと、マニアックすぎて役に立たないと思うので紹介だけにしておきますが、ALT属性の正誤チェックにもStylishを活用しています。以前書いた「画像alt属性の正誤チェック効率化を考えてみる」というエントリーの後、行き着いたのが以下の方法です。

1. WebDeveloperツールバーの画像ALTを表示する
2. グローバル部分を非表示にして本文だけにする
3. img要素をdisplay:blockにする
4. 上記ツールバーでCSSを非適用にする
5. 印刷する
6. 紙上で、誤植とALTの正誤チェックをまとめてする
   

本来の使い方とは若干ずれますが、こういう使い方もあるよーという紹介でした。
※Stylishで既存サイトの再レイアウトするのも、属性セレクタのいい勉強になると思います。