alt属性が空なら、CSSで背景画像として扱うべきなの？CommentsAdd Star – TRANS [hatena]

HTMLをマークアップしている時に、IMGのalt属性に何て書こうか悩むことってありますよね。

「この画像に意味（ふさわしい代替テキスト）なんて無いしaltは空にしとくか」っていう人は珍しくないと思うのですが、最近 「alt属性が空なら、CSSで背景画像として扱うべきなの？」 という面白い記事を発見したので、ちょっとalt属性や背景画像について自分なりに整理してみることにします。

先日ベータ版がリリースされたGoogleのWebブラウザ Google Chrome 。残念ながらまだWindows版しか公開されていないため、Macユーザーの僕はBoot Campで試しに触ってみた程度なのですが、第一印象としてはなかなか速そうですね。キビキビ動く感じがします。

Apple Safariと同じWebKitをレンダリングエンジンにしているものの、描画にSafariのような強い個性はありません。外観もとてもシンプルでいかにもGoogleらしい。ぼちぼちシェアを獲得するのではないかと思うので、Webデザイナーにとっては頭の痛い話ですがまたひとつ表示の確認を迫られるブラウザが増えそうです・・・。

今回のエントリーはそんなGoogle ChromeのユーザーエージェントやCSSに関して、まだベータ版ではありますが少しばかり調べた情報をまとめてみることにします。

今更聞き飽きた感のある方も多いであろうネタですが、Webデザインの仕事をするうちに思い直した “画像置換” に関する僕個人の見解。

まず、 画像置換（Image Replacement） とはそもそも何かというと、その名の通り、CSSのbackgroundプロパティを使って、テキストを画像に置き換えてしまおうというもの。広く普及しているCSSの基本テクニックと言えるでしょう。

当サイトもページ上部のグローバルナビなどでこの手法を用いていて、以下のようなHTMLとCSSで画像置換を行っています。

備忘録として2008年7月現在、自分がWeb制作に使用しているCSSハックをまとめてみます。ブラウザによってはいくつもCSSハックの記述方法があるものもありますが、今回まとめたのは自分にとって最低限必要なものだけ。Firefox 2.0&3.0を表示の基準とし、CSSハックの対象にするブラウザはInternet Explorer 6.0&7.0、Opera 9.27&9.5、Safari 3.1です。

記述例はすべて<div>タグに対して通常のブラウザにはvisibility:hidden、CSSハック対象ブラウザのみにvisibility:visibleと指定した場合です。

6月12日のOpera 9.5正式リリースに続き、6月17日にはついにFirefox 3が正式リリース。24時間以内に最も多くダウンロードされたソフトウェアとしてギネス記録を狙ったキャンペーンを展開したFirefox 3は、結果的に24時間で800万を超えるダウンロード数を記録したとか。

メジャーなモダンブラウザが立て続けにアップデートされたこの機会に、 リセットCSS をアップデートすることにしました。前回は各ブラウザのデフォルトCSSをとにかくリセットしてしまう Reset CSS のみのエントリーでしたが、今回はテキストボックスやラジオボタンなどフォーム部品の細かなズレの解消などを目的として、各ブラウザで基本となる汎用的なスタイルを定義する Basic CSS なるものも書いてみました。