ツールチップみたいな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;の中身を読まないみたいですが、今回みたいな指定の場合はどうなのでしょうか?その辺も不明です。

Webフォント

ブラウザ間の差異は頭の痛い問題だし、WEBフォントが正式に実装されるのは随分先だろうけど使い方次第で面白そうですね。

独自拡張じゃなくって、こうゆう事をぜひIEに真っ先にやってもらいたいものです。絶対的なシェアに胡坐をかいてるように思えてどうも好かんっす。

文字のアウトラインを表示する–FirefoxとSafariのCSS対応

Bye bye for now !!

定義リスト横並びの続き

たくさん情報は出てくるのでソースは以下のような感じで落ち着いたのですが、1つ気になった事はこのソースのSS(IE7のSSです)を見てもらえば分かるのですが、真ん中の行の半角数字のところで左ボーダーが切れてdlに指定した背景色が見えちゃってます。
IE6でも同様、FirefoxとOpera(共に最新版)は問題なく表示されます。
ただこのフォントはメイリオなのでMSPゴシックだとどのブラウザでも問題なし(ねすけはわかりません;)
メイリオでもテキストの中に1文字でも全角が入れば直ります。もしかしたら高さ関係のプロパティで直せるのかな?
こんなの常識??私が無知なだけなのかも^^;覚書です。

htmlはこんな感じで

<dl>
	<dt>定義リスト</dt>
	<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
	<dt>定義リスト</dt>
	<dd>0123456789</dd>
	<dt>定義リスト</dt>
	<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

CSSはこんな感じ

@charset "utf-8";
dl{
	width:600px;
	border:1px solid #333333;
	border-top:none;
	background:#CCCCCC;
}
dt{
	border-top:1px solid #333333;
	padding:5px;
	float:left;
	clear:left;
	width:100px;
}
dd{
	margin-left:100px;
	border-top:1px solid #333333;
	border-left:1px solid #333333;
	padding:5px;
	background:#FFFFFF;
}

Bye bye for now !!

定義リスト横並び

なんか教科書どうりにはまったという思い・・・

dl dt ddを横並びにしてテーブル風にしたいと思い、dtを左floatしてdtの幅指定と同じ値をddの左マージンに指定して、って定番のやりかたみたいですが、、、

IEさんどこか逝ってくれ

と思うのは私だけじゃないよね^^;

ハックとかよく解らないしボーダーを完全なテーブル風まで付けなければ
なんとか見れる程度にはなる気がするので
よさげな感じに落ち着いたら覚えでソース書きます。

Bye bye for now !!

暗中摸索

さぼり過ぎだなぁ、10日ほど間が空いてしまった。

最近CSSの事で頭の中がいっぱいな感じ^^;
基本的に理解がまだまだ浅いのが一番問題ではあるのですが、各ブラウザ間のデコボコを出来るだけクリアできる自分なりのデフォルトが欲しいと思うわけです。

全称セレクタで

*{ margin:0; padding:0; }

とすればいいじゃんと思えれば簡単ですが、どうもしっくりこない。ちなみに全称セレクタ(*)とbodyに上記の指定をした結果は継承の関係で違います。全称セレクタは継承の有無は関係なくすべてって事ですね。
こうゆう関係の話題はたくさんあって参考になる情報は多いので自分なりのデフォルトが出来るといいなって感じです。

頭を悩ました分、先が楽になる事を願って。。。

関連リンク
Yahoo!UiLibrary
http://developer.yahoo.com/yui/reset/
1ピクセルのずれも許せないWebデザイナのためにResetting Again
http://journal.mycom.co.jp/news/2008/02/08/037/

Bye bye for now !!