Webデザイン |
Lesson 10 | テキストの長さに応じて 幅が伸縮するボタン |
制作・文 | 高村香奈子(株式会社アークフィリア) | |||
> | To Use | CSS | ||
> | Browser | IE 6over | Firefox 3over | Safari 5over |
ボタンの文言をテキストで表示する場合に、テキストの長さとボタン画像の背景が合わず困ったことはないだろうか。そんなときに便利なテクニックとして、テキストの長さに応じて幅が伸縮するボタンのつくり方を紹介する。 |
01
【1-1】ハイライトを入れることでボタンらしい立体感が出る
【1-2】上:通常時のボタン背景。下:ロールオーバー時のボタン背景
02
【2-1】共通のクラス"btn"を振っている
【2-2】<a>と<span>を入れ子構造にすることがポイント<
03
【3-1】どんな長さの文言が入っても、左右の角丸デザインが保たれる
04
【4-1】<a>と<span>はインライン要素なので、ブロック要素にする必要がある
【4-2】テキストの色や太さを指定する
【4-3】ロールオーバー時に色が変わっても違和感がないように、ホワイトの太字に指定した
05
【5-1】paddingでテキストの位置が中央になるように調節する
【5-2】縦の余白の値は、全体のバランスを見ながら調節する
【5-3】cursor:pointer;を指定すると指マークになる
06
【6-1】バグのため、本来10pxのところが20pxになってしまう
【6-2】<span>の右マージン10pxを半分の5pxに指定
07
【7-1】ひとつの画像でロールオーバーを実現
【7-2】文言の長さに応じてボタン幅が伸縮している