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”」のみスタイル指定

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

2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい
2017-11-30
Xampp+FuelPHP1.8をサーバーにupしたらエラーになった。