css alt属性でimgタグの見た目を変えたい
2011/01/26
Dreamweaverを使えばいいって話なんだけどさ…。
お客様の出来上がった状態のサイトを修正しないといけなくってデータはFTPから落とせっていわれてね。
画像も一緒に落とすの面倒だから必要なファイルだけ落として、<base>タグでプレビューできるようにして作業するんだけどalt属性が問題。
値が空なら「alt=””」で検索すればいいんだけど、alt属性の存在しない<img>タグを調べるのが面倒。
lintエラーでチェックすればわかるって話でもあるんだけど一個ずつチェックってのも面倒。
lintエラーはHTML lintからチェック可能。
そこでCSSで属性単位での指定ってのを使う。
alt属性の値が入っていない<img>タグを赤枠にする
- img[alt=””]{ border:5px solid red; }
「alt=” “」とかみたいに空白だったら…そこまではチェックしてられないねっていいたいんだけどさ…。
空白文字用の分も用意。
- img[alt=””],img[alt=” “],img[alt=” ”]{
- border:5px solid red;
- }
ただ、複数の空白文字のみってのは…そこまではチェックしてられない。
例えば、半角スペースが2つ入ってるとか、全角と半角スペースが一個ずつとか。
alt属性が存在しない<img>タグを赤枠にする
- img:not([alt]){ border:5px solid red; }