タグ

ブックマーク / trans.hatenablog.jp (1)

  • デバッグ用CSS「Diagnostic Styling」とそのサンプルコード - Trans

    CSSを使って開発中のHTMLのデバッグを行ってしまうという考え方の紹介とそのサンプルコードをメモしておきます。 デバッグ用CSSとは何か。 まず、サンプルのコードを示してみます。 img[alt=""] {border: 3px dotted red;} img[title=""] {outline: 3px dotted fuchsia;} img要素に続くのは属性セレクタ(属性セレクタについてはCSS セレクタに関するおさらい | WWW WATCHが詳しいので、そちらを参考に)。alt=""とtitle=""の属性と値を持つimg要素にマッチし、それぞれのスタイルを与えます。こうしておくと、HTML内に空白のalt属性やtitle属性があれば、指定されたスタイルが適用されるになり、空白であることが分かるわけです。 もう1つサンプルとして、こんなのはどうでしょうか。 a[href="

    デバッグ用CSS「Diagnostic Styling」とそのサンプルコード - Trans
  • 1