Coda Tips – コメントアウトのショートカット

文字列を選択した状態で ⌘ + /
ファイルタイプは気にする必要がなく、必要に応じた形式のコメントアウトが自動的に入ります。

PHPは複数行選択してコメントアウトするとCSSと同じ形式のコメントアウトになるのですが、個人的に1行コメントがいいなと思ったりしてます。変更出来ないのかな?
RubyとかPythonは複数行選択しても1行タイプのコメントアウトになります。

あと、Codaにはidやclassなどなどを拾ってくれるナビゲータという機能があって普通はコメント内は拾わないようですが、
<!ーー !コメントアウト ーー>
って書くと拾ってくれます。便利?かな?

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>

width と height の読み方

物凄く今更感があるのですが、調べてみると身近に正しい呼び方をしている人がいなかったので書き留めておこうかと。

  • width は ウィズ
  • height は ハイト

と言う読み方が正しいようです。

え~個人的にはウィドスとヘイトだったりするのですが、何となく言葉に出すときは曖昧なモヤモヤ感があって、幅と高さって言ったりします。しません?
正しい読み方が分かっても心のなかではウィドスのままかもw

ちなみにもうひとつ間違っていたのがciteで、ずっとシテだと。。。これサイトなんですね。引用(citation)と言う意味です。これは~なんだろう無意識のうちにsiteと区別して読んでた気がします。

基本的に僕の頭の中は見たまま読んでるっぽいです^^;恥さらしなエントリでした。

ツールチップみたいなCSS

テキストリンクにマウスオーバーした時に画像やテキストをピョコっと出したいなぁ~と言う事で、スクリプトをいろいろ探したりしながら悩み探すこと数時間。割とシンプルなCSSでいい感じの物が出来たので載せておきます。
PHPSPOTさんのところで紹介してあるものを多少アレンジした物です。

以下のサンプルページのような感じになります。
CSSでツールチップのサンプルページ
IETesterで見たところ、IE5.5は不具合があるけどそれ以外は大丈夫そうです。

HTMLソース

<ul>
<li><a href="index.html" class="tooltip">テキスト<span>
<img src="exmple1.jpg" alt="例1" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span>
<img src="exmple2.jpg" alt="例2" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span>
<img src="exmple2.jpg" alt="例3" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span>ココはテキストのみにしてみた</span></a></li>
</ul>

CSSソース

a:hover {
	background:#ffffff;
	text-decoration:none;
}
a.tooltip span {
	display:none;
	padding:5px;
	margin-left:8px;
	width:200px;
	height:auto;
}
a.tooltip:hover span {
	display:inline;
	position:absolute;
	background:#fffaf0;
	border:3px double #a0522d;
	color:#583822;
	font-size:0.8em;
	line-height:1.3;
}
a.tooltip:hover span img{
	float:left;
	border:none;
	margin:0px 7px 5px 0px;
}

CSSはほとんどサイズ調整とか装飾なので必要なのは少しだけですね。スクリプト使わなくても意外とシンプルに出来るもんです。

2008/10/16追記
ロボットが隠しテキストと見なしてスパム扱いするかは不明ですので、ご注意を。ユーザビリティでした事であって、意図した隠しでなければ問題ないと思いたいです。
あと、音声ブラウザはdisplay:none;の中身を読まないみたいですが、今回みたいな指定の場合はどうなのでしょうか?その辺も不明です。