記事本文
これ自体は副産物ですが
:before 擬似要素 / :after 擬似要素の活用例 (2) で紹介したテクニックを使ったスタイルシートです。 主な XHTML 1.0 の要素の class 属性と id 属性を視覚化し、また div 要素に対して border を表示することでボックスモデルも視覚化しています。 ( div 要素を入れ子にするごとに border-color の色が変化するように設定しています。 ) Mozilla Firefox では Web Developer という拡張機能の id 属性値と class 属性値を表示するという機能でほぼ同じことが実現できるのですが、ちょっと見づらいなあと思ったので、次回書かれるであろう記事に活用するついでに作ってみました。 Movable Type 3.2 Beta 2 の華麗な div 捌きを見よ ! で活用しました。
Mozilla Firefox や Opera や Safari などの、 CSS の対応度が高い視覚系ブラウザ向けです。
作成者が私であることを明記していただければそのまま転載していただいても構いませんし、改良を加えて再配布されても構いません。
ただし、 web ページ内の link 要素から外部スタイルシートとして呼び出すことや、スタイルシート内に
@import
を記述してインポートすることはしないようにお願いしたいと思います。
( xrea では、 img 要素などによる外部からの画像リンクを制限しているので、念のため CSS ファイルについても制限したいと思います。 )
web ページ内で使用したい場合 ( そういう方はいないと思いますが ) は、一旦ローカルに保存したのち、ご自身のサーバスペースに put していただくようお願いします。
なお、この preview.css の作成に関しては Pop or Die の CSS を勝手に参考にさせていただきました。 ( ソースを見ると、更なる源流はカヅサツさん ( （´д｀;） - うへぇ - ) のようです。 渦さん ( Pop or Die ) とカヅサツさんのおふたりに勝手に感謝。 )
使用方法
そのままお使いのブラウザのユーザースタイルシートとして使っても良いのですが、常用するとなるとはっきり言って煩わしいです。 preview.css の名前が示す通り、用途としては class 属性や id 属性の確認に使うことを想定していますので、確認したい時だけ適用すれば良いと思います。
［ワツニュ］人ん家のスタイルシートで表示という、任意の web ページに任意の CSS を適用させる CGI がありますので、ここに確認したい web ページの URI を入力し、 http://hxxk.jp/common/css/preview.css を適用させると便利。 ( 他人の褌で何とやら )
