alt属性 と title属性 の違い

WordPressの画像アップロード時の入力項目と、表示された画像にポップアップするツールチップについて聞かれたので備忘録エントリです。

まずIEを使っていて、”画像にマウスをのせるとalt属性の内容がポップアップする”という状況が考え方のベースになっていると根本的におかしい。それとtitle属性を使うというのが一般的じゃない(気がする?)のも間違いの元かも。

alt属性:代替テキスト
title属性:補足情報
※とりあえずこのエントリではimgに関してです。

alt属性は何らかの原因で画像がレンダリングされない場合(またはそのようなUA)の代替テキストで、title属性はその要素に対する補足説明です。
画像が正常に表示された場合、代替テキストは必要ないのでtitle属性がポップアップするというのが、一般的なブラウザの挙動であって、IEは間違っていると言うよりalt属性もポップアップしてくれるという感じでしょうか(IEはalt、titleの両方が指定してあるとtitleがポップアップします)。

WordPressの場合は、title属性が入力必須(デフォルトでファイル名)になっているので、一般的に画像非表示の環境が少ないし(意図して非表示にしている人は無視していい範囲かな)、テキストブラウザや音声ブラウザに関してはtitle属性で対応できると言う事ではないでしょうか。
知る限りでは、音声ブラウザはIEと同じ挙動をします(altはもちろん読むし、両方書いてあればtitleのみ読む)。

2011年1月31日追記
少し勘違いがあったので追記です。知る限りでは音声ブラウザ~~~と買いましたが、音声ブラウザではなくスクリーンリーダーの事でした。スクリーンリーダーを持っているわけではないので、ハンディキャプのある方から聞いた内容ですが、JAWSはIEと同じ挙動をするようです。PC-Talkerも同じじゃなかと思ってます。

title属性だけでいいじゃんと言う気もするのですが、alt属性はHTMLの仕様上は必須なので書かないとvalidになりませんね。

この使い方はあっているのか?

スクリーンショット(東京都のホームページ)

例えば東京都のホームページの左ナビにあるバナー(「東京・あの日・あの時」)のソースは以下のようになってます。こういう書き方はよく見かけるけど正しいのだろうか?

<a href="リンク先アドレス" title="東京WEB写真館「東京・あの日・あの時」ページへ">
<img src="画像アドレス" alt="東京WEB写真館「東京・あの日・あの時」" width="196" height="50" vspace="3">
</a>

こっちのほうがいいのかな?ん?どうなんだ?

<a href="リンク先アドレス">
<img src="画像アドレス" alt="東京WEB写真館「東京・あの日・あの時」" title="東京WEB写真館「東京・あの日・あの時」ページへ" width="196" height="50" vspace="3">
</a>

CSSハックとコンディショナルコメント

ブラウザ別CSSハック

使わないに越したことはないのですが、使おうとする度に調べることが多いのでブラウザ別のCSSハック(IE6、IE7、IE8用)を覚書。世の中のすべてのブラウザがHTML5&CSS3対応になればいいのにと夢のような事を。。。

FirefoxやSafari、Chromeはあまり必要性を感じないので、IE向けのハックで必要な物を簡潔に。たくさんありますけど、それぞれ個別に適用出来るハックが1つあればほぼ問題ないのでは?と思います。
すべてセレクタは#sample、プロパティはwidth:100%;としています。

【IE6以下に適用】
プロパティの前に”_”を付けるアンダースコアハック(invalid)
セレクタの前に”*html”を付けるスターハック(valid)

#sample{
	_width:100%;
}/*アンダースコアハック */

*html #sample{
	width:100%;
}/* スターハック */

【IE7のみ適用】
プロパティの前に”*:first-child+html”を付ける(valid)
プロパティの前に”*+html”を付ける(valid)

*:first-child+html #sample{
	width:100%;
}

*+html #sample{
	width:100%;
}

【IE8のみ適用】
未検証。要確認。なんだかかなり気持ち悪い感じ(invalid)

html>/**/body #sample{
	width /*\**/:100%\9;
}

コンディショナルコメントで振り分ける

IEには条件分岐で特定のバージョンだけにスタイルシートを適用する方法があります。
あまり使ってないのですが、どこかで線引きをしてブラウザを切り捨てる事になった時に、こっちの方がさっぱりして気持ちいいかなと思います。head内で読み込みます(ファイル名とパスは適宜変更で)

【IEすべてに適用】

<!--&#91;if IE&#93;>
<link rel="stylesheet" href="ie.css" type="text/css" />
<!&#91;endif&#93;-->

【IE以外に適用】

<!--&#91;if !IE&#93;>
<link rel="stylesheet" href="others.css" type="text/css" />
<!&#91;endif&#93;-->

【IE7のみ適用】

<!--&#91;if IE 7 &#93;>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<!&#91;endif&#93;-->

【IE6以下に適用】

<!--&#91;if lte IE 6 &#93;>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<!&#91;endif&#93;-->

lte”の部分はcomparisonと言われる適用範囲を示す値で、lt、lte、gt、gteが指定できます。左から順に未満、以下、超、以上です。

指定した値を含まずそれ以上を表すのって「超」って言うんですね。1つ賢くなった。lteはless than equalらしいのですが、gは何の略だろうか?~より多いだとmore thanな気がするんだけど。。。ちなみにGoogle翻訳でless thanを通すと以下って出るけど、これ間違ってないか?

他にもIE7.js、IE8.js、IE9.jsを使うってのも1つの手ですね。

おまけでclearfix

floatした子要素を内包する親要素の背景が伸びない時は、overflow:hidden;ばかり使ってたのですが、印刷時に問題が出るようなので、印刷用のCSSでautoに戻すか、clearfixを使ったほうがいいかも。
clearfixの決定版を作るを参考に少し追加しました。ピリオドや空白よりいいかも。

.clearfix:after {
	content:url(pixel.gif);
	display:block;
	clear:both;
	height:0;
}
*html .clearfix{
	zoom:1;
}
*:first-child+html .clearfix{
	zoom:1;
}
現場のプロから学ぶXHTML+CSS
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ
売り上げランキング: 2487
おすすめ度の平均: 4.5

4 XHTML+CSSのバイブル的存在。
5 理解しやすい!
2 広く深く まとまりの無い教科書
4 分かりやすくて実践的
2 リファレンスとしては使えません

Dreamweaverでzen codingを使ってみた。

dreamweaver + zen coding

先日、@seltzerさんのUSTREAMを見てからすっかり zen coding に取り憑かれたボク。あ、もちろんPHP入門も素晴らしかったです(次回も楽しみにしています)

残念ながらMacユーザーじゃないので、Codaとか使えないわけですが、Windows環境でもDreamweaver CS4で使えるって事で入れてみました(他にも幾つか対応しているエディタはあります)

このページからZen Coding for Dreamweaver v0.5というバージョンのZen Coding.mxpを拾ってきて実行。そうするとEXTENSION MANAGER CS4が立ち上がるので、画面に従いインストールするだけで完了です。

早速幾つか入力。
DWは新規でhtmlやphpを作ると、設定されているドキュメントタイプのタグが入った状態になりますが、HTML5は設定が無い(どこかでEXTENSIONがあった気もする)ので

html:5

と入力してCtrl+カンマで展開するとさっと以下のようなタグが!!

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title></title>
	<meta charset="UTF-8">
</head>
<body>
	
</body>
</html>

さらにこんな感じで入力して展開すると

div#header>ul.menu>li.name$*3
<div id="header">
  <ul class="menu">
    <li class="name1"></li>
    <li class="name2"></li>
    <li class="name3"></li>
  </ul>
</div>

どーん!素晴らしー!

独自の書き方は覚えなければいけないものの、直感的に分かる気がするのでなんとかなりそう。ただCSSに関しては標準の入力補完で十分かなって思いますね。

wikiっていうタブの中にタグの書き方が載ってます。
HTMLセレクタはこれ

あとlang属性がen-USが標準になっているので、以下のjsファイルの設定値を修正すればOKです。このファイルの中身を眺めてみると、展開する内容の修正も出来そうなので、head内でよく使うタグなんかは追加しておいてもいいかも。

Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js

WordPressであればプラグインもこちらにあります。
WP Zen-Coding

やっぱりMacを買おうかな~

Zen Coding
http://code.google.com/p/zen-coding/

IE6で透過PNGを利用してz-indexで画像を重ねる

ie6png

やろうと思ったことがz-indexを利用しないとうまく出来ないなーと思いつつ、PNG画像を作ってサンプル書いてみたけど、まぁ~当然のように逝ってほしいIE6が立ちはだかる。はぁ~めんどい。

Googleが配布しているie7.jsなんかを使えば透過PNG以外にもイマドキな感じに改造してくれるけど、あまりいい印象が無いので(やたらと重かった?)、他を探してみたら簡単で使いやすそうなDD_belatedPNG.jsを見つけました。

まず配布サイトからjs(今日現在0.0.7a)を拾ってきてhead部分でIE6用に読み込みます。

<!--&#91;if lte IE 6&#93;>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png_img');
</script>
<!&#91;endif&#93;-->

4行目のfix()内で要素名やid、classを指定します(ココではクラス名をpng_imgとしています)あとは該当のimgにこのクラスを指定するだけ。楽チン!

サンプルはこちら http://vayu.asia/sample/ie6png/

元画像にはクラス指定をしてないのでIE6では周囲がグレーになっていると思います。
ソースは以下のようになってます。

html

<div id="original">元画像(クラス指定なし)<br />
<a href=""><img src="img/sample.png" alt="" /></a></div>
<br />
<div id="block1">ブロック1</div>
<div id="block2">ブロック2</div>
<div id="block3">ブロック3
<a href=""><img class="png_img" src="img/sample.png" alt="" /></a>
</div>

css

#original{
	background:#FFDFFB;
	width:500px;
	height:300px;
}
#original img{
	border:none;
}
#block1{
	background:#0C0;
	width:500px;
	height:300px;
}
#block2{
	background:#FFF;
	width:500px;
	height:30px;
}
#block3{
	background:#999;
	width:500px;
	height:300px;
	position:relative;
	z-index:1;
}
#block3 img{
	position:absolute;
	z-index:10;
	top:-120px;
	left:120px;
	border:none;
}

このブログではPNG対策はしていないので、一番上の画像はグレーっぽいはずです。