Happy Swing

htmlのソース自体はとってもシンプル。1ボタンに使っているタグは、spanとaのみ。すげーー！それで丸角ボタンがテキストベースで作れるって・・・しかも、長さは中のテキストに応じて可変できるって、どんなソースなんだ！？と思ってCSSを見てみると・・・？

知らない要素があるというのはおいといて、最後にあるjavascriptみたいなコードは何だ！？
僕は、Javascriptとかが苦手なので、このソースは書けないし、分からないなぁ・・・
どうも、ここで何やらspanなどに変数でクラス名を設定できるようにして、そのクラスに対していろいろなCSSを掛けているっぽいんですが、さっぱりわかりません(´Д⊂
うぅ・・・

あまりに悔しいので、これの元になったCSSテクニックというのもあったので、そっちも見てみることにしました。

Create Link Buttons with simple CSS and HTML

こちらはホントにCSSとHTMLのみで構成されているようです。
さっそくHTMLファイルとCSSソースをチェック。
どうやら、DIVと、aタグ、そしてspanと2枚の画像だけで出来るようです！すごい！CSSソースはこんな感じ。

div.btns{
	zoom:1;
	white-space:nowrap;
}

div.btns:after
{
	display:block;
	clear:both;
	content:'';
}

div.btns a.btn{
	float:left;
	background:buttonface url(border-2.gif) no-repeat;
	cursor:pointer;
	font-size:0;
	text-align:center;
	display:block;
	_width:140px;
	min-width:140px;
	text-decoration:none;
	margin:3px 2px;
}

div.btns a.btn:hover span{
	opacity:0.6;
	filter:alpha(opacity:80);
}

div.btns a.btn span
{
	padding:3px 8px 4px 8px;
	text-align:center;
	position:relative;
	left:1px;top:1px;
	display:block;
	text-decoration:none;
	background:url(border.gif) right bottom no-repeat;
	font:small/1 Verdana;
	color:#222;
}

xmp{
	margin:0;
	font-size:1.2em;
}
body{
	font:0.75em/1.3 Verdana;
}

まず、aタグの背景として、左上が起点となるように背景Aを設定し（左枠、上枠の線になります）、aタグのインライン要素として設定されているspanの背景として、こちらは右下が起点になるように背景Bを設定（右枠、下枠の線になります）。
こうすることで、中の文字数が増えても、列が増えても見える、幅高さ可変のボタンになるという仕組みらしい。なるほど！
背景画像で設定した画像の横幅・高さまでしか対応できないので、影や枠線の画像は、すこし大きめに作っておくといいみたいです。

ただし注意点が一つあって、マウスがボタンに乗ったときのロールオーバー時の設定が、このソースだとalphaという透明度を指定することで実現されています。これは、IE7以前のIEでは対応していないプロパティなので、IEで見ている人だと「ロールオーバーしない」ように見えてしまいますので気をつけましょう。
その部分だけ要・改良かな？

でも、このボタンはすごいと思います！
blogだとなかなかボタンは使わないけど、仕事でこういったものが使えそうならどんどん使っていきたいなーって思いました。もちろん、alphaは使わない方法を考えないとですが・・・ｗ
早くIE7に切り替わってしまえばいいのにー