Lesson 10 テキストの長さに応じて幅が伸縮するボタン - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

Webデザイン 表現&技法の 新・スタンダード

Lesson 10

テキストの長さに応じて 幅が伸縮するボタン

	制作・文			高村香奈子（株式会社アークフィリア）
＞	To Use			CSS
＞	Browser			IE 6over | Firefox 3over | Safari 5over

ボタンの文言をテキストで表示する場合に、テキストの長さとボタン画像の背景が合わず困ったことはないだろうか。そんなときに便利なテクニックとして、テキストの長さに応じて幅が伸縮するボタンのつくり方を紹介する。

Photoshop やFireworks でボタンの背景画像をつくる。ここでは左右が10pxの角丸で、光沢感のあるデザインにした【1-1】。色調を変えてロールオーバー時 の画像もつくっておく。CSSスプライト（複数画像をひとつにまとめ、CSSのポジションで表示位置を指定すること）でボタンをロールオーバーさせるため、通常時とロールオーバー時の画像を上下に配置し、ひとつの画像として書き出す。入れたい文言によって必要なボタンの幅が変わるので、ゆとりを持った幅で作成するとよいだろう【1-2】。


【1-1】ハイライトを入れることでボタンらしい立体感が出る


【1-2】上：通常時のボタン背景。下：ロールオーバー時のボタン背景

HTMLを記述する。ここでは比較するために文言の異なる4つのボタンをつくってみる。＜a＞の中に＜span＞で囲まれたボタンのテキストを記載して入れ子構造をつくる。＜a＞には共通のクラスを振っておく【2-1】【2-2】。


【2-1】共通のクラス"btn"を振っている


【2-2】＜a＞と＜span＞を入れ子構造にすることがポイント<

【02】で入れ子構造にした＜a＞と＜span＞をボタンの文言の長さに応じて左右にスライドさせることで、角丸のデザインを保ったままボタンの幅を可変にする【3-1】。CSSで親の＜a＞はボタン画像の右端が見えるように指定する。子の＜span＞は左側が見えるように、さらに右側の10pxを短くして重ねることで、両端を角丸にすることができる。


【3-1】どんな長さの文言が入っても、左右の角丸デザインが保たれる

実際にCSSを記述していこう。まず「a.btn」をブロック要素にし、「float:left;」を指定する。これにより、幅のサイズを指定しなくても内容に応じた幅にすることができる。ボタンの高さは固定なので、ピクセルで指定する。backgroundにボタンの画像を指定し、表示位置を「top,right」にする【4-1】。続けてボタンのマージンやテキストのスタイルを指定する。ボタンの背景画像とのバランスをみて、色や太さを決めるとよいだろう【4-2】【4-3】。


【4-1】＜a＞と＜span＞はインライン要素なので、ブロック要素にする必要がある


【4-2】テキストの色や太さを指定する


【4-3】ロールオーバー時に色が変わっても違和感がないように、ホワイトの太字に指定した

「a.btn span」も同じくブロック要素にし、「float:left;」を指定する。このとき「a.btn」で表示している右端の角丸に重ならないように、右側にマージンを10pxとる。ボタンの画像は「a.btn」と同じものを使用するが、表示位置を「top,left」に指定する。このままではテキストが左寄せになるので、左側に10pxの余白をとる。縦方向についてもちょうどボタンの中央になるように、フォントサイズなどのバランスを見ながら余白を調節する【5-1】【5-2】。また、＜span＞要素のマウスカーソルの形状をリンクカーソルにしたいので、「cursor:pointer;」を指定しておく【5-3】。


【5-1】paddingでテキストの位置が中央になるように調節する


【5-2】縦の余白の値は、全体のバランスを見ながら調節する


【5-3】cursor:pointer;を指定すると指マークになる

IE6にfloatの利用時にマージンが2倍になるバグがあるため【6-1】、対応する場合はハックをかける必要がある。実際のマージンの半分の値を指定する【6-2】。


【6-1】バグのため、本来10pxのところが20pxになってしまう


【6-2】＜span＞の右マージン10pxを半分の5pxに指定

最後にCSSスプライトでロールオーバーの指定をするが、入れ子構造になっているため、＜a＞と＜span＞の両方に指定をする必要がある。通常時とロールオーバー時の画像を上下に配置しているので、縦位置の指定を「ボタンの高さをマイナスにした値」にすると、ロールオーバー時の画像が表示される。「.btn a:hover」は背景位置を「right,ボタンの高さをマイナスにした値」に、「.btna:hover span」は「left,ボタンの高さをマイナスした値」にそれぞれ設定をすれば完成だ【7-1】【7-2】。


【7-1】ひとつの画像でロールオーバーを実現


【7-2】文言の長さに応じてボタン幅が伸縮している