TRIPLEXXX

横幅がキャプション（リンクテキスト）に応じて伸縮するボタンを、CSSのみ・ボタン用画像1枚だけ、で実現する方法をまとめます。これは、海外で scalable button，fancy button，sexy button，sliding doors 等と呼ばれているテクニックです。簡単に言うと「a タグに span タグを入れ子にして、それぞれの背景でボタンの左端からと右端からを表示する」となります。言うのは簡単ですが、クロスブラウザで実現するには細かなテクニックが必要です。さらに、ボタンの状態に合わせてボタンの画像を変更するテクニックも説明します。

ボタン用画像

ボタンの背景画像は、ボタンの状態に合わせてそれぞれ、通常状態，hover 状態（，active 状態）のように縦方向に連続して作成します。横幅は、サイトに使用するボタンとして十分に長いものにしてください。ここでは、透過PNG画像を使用します。

XHTML 記述例

例としてボタンのクラスを “hogebutton” とします。XHTML は a タグに span タグを入れ子にしただけのもので良いです。

XHTMLソース:

<a class="hogebutton" href="#"><span>button</span></a>;

span タグの存在が美しくない、という場合は、JavaScript でこっそり追加すると良いでしょう。以下は、前回作成した insert プラグインを使って、jQuery で button クラスを持つの DOM 要素内に span タグを追加する例です。

エントリ本文:

<a class="hogebutton" href="#">button</a>;
<!--xxx_insert:button_span,js-->

カスタムフィールド button_span:

jQuery(function() {
  jQuery('.hogebutton').each(function() {
    var me = jQuery(this);
    me.html('<span>'+ me.html() +'</span>');
  });
});

CSS 記述例

幅方向に伸縮するボタンを実現する CSS は以下の通りとてもシンプルです。

最小限の CSS:

a.hogebutton {
	float: left;
	padding-right: 20px; /* ボタン内　右側余白*/

	line-height: 42px;   /* ボタン高さ */
	background: url(hogebutton.png) right top no-repeat;

	cursor: pointer;
	margin-right: 5px;   /* ボタン外　右側余白*/
	outline: none;       /* FireFox:点線を非表示 */
}

a.hogebutton span {
	display: block;
	padding-left: 20px;  /* ボタン内　左側余白*/

	background: url(hogebutton.png) left top no-repeat;
	background-color: #E6DCDC; /* 透過部分の背景色 */
}

• a タグに floatと右余白を指定。
  背景画像は右上端を基点にします。
• span タグに display と左余白を指定
  背景画像は左上端を基点にします。
• span タグに 上位層と同じ背景色を指定します。

余白はアンカーテキストの左右に表示させるボタンの幅です。span タグに背景色を指定することで、span の背景画像の透過部分に a タグの背景画像が透けるのを防ぎます。

hover，active でボタンの画像を変更

実際は、ボタンの画像を変更するのではなく、表示する範囲を変更します。これは background-position の指定で実現できます。

hover，active の CSS:

a.hogebutton:hover {
	background-position: right -42px;
}

a.hogebutton:hover span {
	background-position: left -42px;
}

a.hogebutton:active {
	background-position: right bottom;
}

a.hogebutton:active span {
	background-position: left bottom;
}

hover 時にY方向を -42px と指定することで背景画像を上にずらしています。その結果、ブロック内に表示されるのは背景画像のY=42px からとなります。active 時の bottom 指定は、画像の下端から表示することになります。

IE:ボタンクリック後の表示

IEではボタンクリック後も active の状態で表示されてしまいます。これを回避するには、ボタンの click イベント時に this.blur(); とします。

<a class="hogebutton" href="#" onclick="this.blur();">

タグ内に JavaScript を記述したくない場合は、前述の span タグ追加と同じように jQuery で追加するのが簡単です。

jQuery(function() {
  jQuery('.hogebutton').each(function() {
    var me = jQuery(this);
		me.html('<span>'+ me.html() +'</span>');
		me.click(function() { this.blur(); });
  });
});

ボタンへの回り込みを回避する

float 指定したボタンは、以下のように以降の要素が回り込んでしまいます。

float 要素への回り込み:

button

このようにテキストがボタンに回り込んでしまいます。これを回避するためによく用いられるのは、float を解除する属性 clear: both; を使う方法です。

• float の次の要素に指定する。
  次の要素で前の float 要素の指定を解除するのは微妙？
• after 擬似要素で指定する。
  IEでは使えない。

clear を使用しない方法には、float された要素群を div で囲むというものがあります。このエントリで回り込みが発生していないボタンは、すべて以下の div で a タグ（群）を囲んでいます。このようにすると、前後に関係なくこのブロック内のみが float となるので、汎用的なコンテナとして使えます。

XHTML:

<div class="block">float要素</div>

CSS:

.block {
  overflow: hidden;
   width: 100%; /* IE */
}