メリハリがない

危険度：★

76　テキストリンクがパッとしないのを解決
文＝福島英児


のちのちのデザイン変更などのメンテナンスを考えた場合、リンクに画像を使わずそのままテキストを生かしたテキストリンクとして使用したい場合があるが、そのままでは味気なくつまらない。そこで、テキストはそのままでもボタン画像を用意してCSSで背景画像として配置させれば印象は良くなる。また、マウスオーバー時に画像が切り替わるロールオーバー効果を表現することでメリハリも出る。デザイン変更時もCSSの変更だけなのでメンテナンス性も高くおすすめだ。

---

HTML

CSS

【1】インライン要素であるa要素をブロック化する。ここでボタンとして機能させたいサイズは横320px、縦85pxなので、そのサイズと同値をCSSで指定しておく。また、ボタン内のテキストの位置については、左右のセンター指定はtext-alignプロパティで「center」に、上下のセンターはline-heigtプロパティにheighhtと同値を指定すればよい。


【2】ボタンとなる部分に配置する背景画像は、通常時とマウスオーバー時の2種類を上下に並べてひとつにまとめたものだ。この画像をブロック化したa要素の背景画像として、左上を原点として繰り返しなしで配置する。a要素に指定している高さのサイズ85pxによって、画像下半分のマウスオーバー時の部分は表示されないという仕組みだ。

CSS



【3】最後に、:hover疑似クラスを利用して、マウスオーバーした際にボタンが変化するように見せるロールオーバー効果を出すための指定をしておく。マウスオーバー時に背景画像の隠れていた下側部分が表示されるよう、画像の配置位置を上に85px移動するようにしておくことで完成だ。


［INDEX］
●整理されていない
>>>　03　リストマーカーと個条書きのバランスが悪いのを解決
>>>　04　大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>>　33　表の背景がきれいに表示されないのを解決
>>>　34　写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>>　41　長方形のボックスにインパクトが足りないのを解決
>>>　42　枠にとらわれたデザインになるのを解決
●メリハリがない
>>>　75　画像とテキストの上辺の位置がそろわないのを解決
>>>　76　テキストリンクがパッとしないのを解決