css alt属性でimgタグの見た目を変えたい

2011/01/26

Dreamweaverを使えばいいって話なんだけどさ…。

お客様の出来上がった状態のサイトを修正しないといけなくってデータはFTPから落とせっていわれてね。
画像も一緒に落とすの面倒だから必要なファイルだけ落として、<base>タグでプレビューできるようにして作業するんだけどalt属性が問題。

値が空なら「alt=””」で検索すればいいんだけど、alt属性の存在しない<img>タグを調べるのが面倒。
lintエラーでチェックすればわかるって話でもあるんだけど一個ずつチェックってのも面倒。

lintエラーはHTML lintからチェック可能。

そこでCSSで属性単位での指定ってのを使う。

alt属性の値が入っていない<img>タグを赤枠にする

  1. img[alt=””]{ border:5px solid red; }

「alt=” “」とかみたいに空白だったら…そこまではチェックしてられないねっていいたいんだけどさ…。
空白文字用の分も用意。

  1. img[alt=””],img[alt=” “],img[alt=” ”]{
  2.  border:5px solid red;
  3. }

ただ、複数の空白文字のみってのは…そこまではチェックしてられない。
例えば、半角スペースが2つ入ってるとか、全角と半角スペースが一個ずつとか。

alt属性が存在しない<img>タグを赤枠にする

  1. img:not([alt]){ border:5px solid red; }

■参考
CSS 「input type=”text”」のみスタイル指定

新着(ニュース関連以外)

2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。