「img src」 と 「background: url」

以前、alt属性とtitle属性のお話をしましたが、今回は画像の入れ方についてメモ。

画像の貼り方には、

1. img src="ファイル名"でHTMLに貼り付け。
2. background: url(ファイル名); とCSSで記述。

のふたつのやり方があります。

前回と少しつながってくるのですが、
「alt属性はimg要素を使う場合必ず書かなくてはいけない属性です。
 もしテキストで表示する意味の無い画像の場合はalt=""とするように仕様書で述べられています。」
Web標準化プロジェクト：http://www.mozilla.gr.jp/standards/webtips0024.html

と記載されていますが、
代替テキストの必要のない画像をHTMLに貼り付けて、空のalt属性でごまかすのは
なんとなく汚いやりかたな気がしてしまいます。

そう考えると、おのずと上記二つの方法の使い分けができますね。
意味のある画像（ロゴ、タイトル、ボタン）＝imgタグ
装飾的な役割の画像（背景、リストマーカーなど）＝CSS指定
ということになるでしょうか。

いままでなんとなく分類してきましたが、これからは
気を遣って画像を分類していきたいですね。

余談ですが、img srcって「イメージソース」の略なんだそうですね。
これも「５年目の真実」でした。

おわび

本日始めて気がついたのですが、
今までトラックバックをさせていただいたサイト様へのリンクが
こちらからきちんと貼られていないことが分かりました。

原因は、私がトラックバックアドレス＝サイトURLという なんとも初心者な勘違いをしており、
サイトURLとしてトラックバックアドレスを指定していたためです。

申し訳ありません。

大変ご迷惑おかけいたしました。
以後十分に気をつけます。

alt属性とtitle属性

昔は、title属性にカーソルを合わせるとツールチップとして文字が表示されるのが面白くて、title属性をばんばん使っていましたが、今は全然使わなくなってしまいました。

よく考えると、alt属性とtitle違いって何なのでしょうか。
「画像だとalt属性、その他のタグはtitle属性という表記で、実際は同じ役割」
というのが、今までの私の認識でした。
実際調べてみると、きちんと意味の違いが示されています。

alt属性は、画像が表示されない場合に、代わりに表示するためのものです。
画像が表示されていれば、必要のないもの。
「画像の内容＝alt属性のテキスト」なので、
img要素にはalt属性が必須になるのです。

一方title属性は、画像やリンク先の情報を補う付加的なものです。
厳密には、「画像の内容≠title属性」ということになります。
ですので、title属性はなくても支障がありません。

ということのようです。
またひとつ勉強になりました。

参考サイト
Web標準普及プロジェクト

CSSで作る画像のロールオーバー

CSS Happylife様の
Javascriptを使わずにやるimg要素のロールオーバーサンプル
のエントリーを拝見しまして、
ロールオーバーの新しいやり方を発見したので、
今まで使っていたやり方もあわせてご紹介します。

1. 画像をCSSの背景として指定する場合(文字ナビゲーションなし)
2. 画像をCSSの背景として指定する場合(文字ナビゲーションあり)
3. 画像をimgタグでHTMLにはりつける場合

セレクタの指定方法-5年目の真実その２-

前回、clearfixのお話をしましたが･･･
まだ、私の知らない真実があったようです。
しかも超初歩的なこと。

今まで、
<div id="main">
  <ul>
    <li id="here">いち</li>
    <li>に</li>
    <li>さん</li>
    <li>よん</li>
    <li>ご</li>
  </ul>
</div>
こういう場面において
id="here"に対してCSSで指定をしたいときは

#main ul #here { プロパティ; }
と書いてごまかしてきたが

実は
#main ul li#here {プロパティ;}
って書けばいいんですよね！？

今までずっと、このくっつける記述方法を知らなくて
なんか違和感あるなーって思ってたんですが、

#main ul li #here （#mainの中のulの中のliの中の#here）じゃなくて
#main ul li#here （#mainの中のulの中の、#hereが指定されてるli）ってことなんですね！？

もうなんだか泣きたいです。