第18回 マウスオンでボタンのカラーを切り替え
ある日ふと、バナーっぽく画面の脇にリンクスペースをずらりと並べたいと思った。マウスオンで色を切り替えてインタラクションを強調しつつ、ボタンぽくするにはどうしたらいいのだろう。頭を悩ますところであるが、やってみると簡単。CSSで手軽にできるのである。
■POINT
透けているようにみせる基本テクニックは、やはり背景色にとけ込むような色遣いをすること。PCで色作りをする場合は、最前面のレイヤーを透明化して色を確認すればよいので簡単だ。
今回のスタイル完成画面
とりあえず全体をマークアップする作業が先決だ。リンクリストの基本のキであるリストタグを使い、必要な情報を表示させる。今回はulに対してクラス指定によるセレクタを与えた。また、同一のリスト内に属する文字要素でも、タイトル的な要素にはstrongを付けてちょっとだけ差別化、行替えした。まず文字要素の伝達に考慮し、最終的に画像化するタイトルも見出しとして入力しておく。
?
?
【HTMLソース】
そして、レンダリング結果は【図１】のようになる。
?
【図1】スタイルなしの表示結果。行替えしたリストの体裁だ
■STEP 1
では次に背景色を決める。背景色のソースとなるのが、【ソース1】だ。
?
【ソース1】
マウスカーソルがリストにさわっていないときは、この背景色にとけ込んだような配色のグラデーションがバナーの背景に表示されるよう設定するつもりだ。
【ソース2】
ulに対して与えたクラスは上記の通り。リストスタイルの解除と、表示範囲の設定をここで行う。全体がバナーっぽく四角く見えるのは、ここで幅を300ピクセルにしているから。行が折り返されて四角くみえる。
?
【ソース3】
■STEP 2
次にliの部分に反映するスタイルを作る。float:leftを指定して左側にちゃんと頭が揃うようにした。【ソース4】のようにソースを書いていく。短いが、STEP2はこれでお終い。いよいよ重要なSTEP3に入っていく。
【ソース4】
■STEP3
リンク付きのリストのスタイルを決める。リンクを付けることが前提のスタイルなので、ここに希望するスタイルをすべてまとめてしまう。まずulとは別にここにも表示領域の指定が必要。さらに文字だけでなく矩形全体がリンクに反応するようにブロックによる表示を指定する。【図2】のように、テキストと周囲の辺の間に10ピクセルの余白を空け、リンク時の背景色を画像で指定した。
【図2】マウスアウト時の背景色。全体の背景になじむ色遣いをする
文字の色は、マウスカーソルで触れていない際背景色とあいまって全体がぼんやり薄くなって見えるよう、白に指定する。また、【図3】をよーく見るとわかるのだが、この矩形の周囲には白いボーダーがついている。これは背景色と1クッションもうけることで自然な矩形であるようにみせるためだ。
【図3】周囲の白いボーダー。これがないと、グラデーションがくっきりしすぎてちょっとかっこわるい
?
【ソース2の修正部分】
最後にマウスカーソルが触れた時にすり替える背景画像を【ソース2の修正部分】のように指定すればできあがり。【図4】や【図5】のように、ちょっとくっきりした配色設定の画像を表示する。
?
【図4】マウスオン時の背景色。はっきりさせる感じ
【図5】マウスカーソルに対して反応した完成図。さわっているところとそうでないところは、微妙な色合いながら結構明確だ
?
完成CSS
コラム：基本のキ その10
CSSの基本ABCの「aタグ」
aタグでリンク指定した部分に特定のスタイルを付けるといった作業はCSS作りの中心になることもあるだろう。このリンク指定、ブロックレベル要素をマークアップすることはできないのは基本的な知識である。つまりimgタグやテキストそのものといったインライン要素にしか付けられないということ。ようするに、liタグでマークアップしたセクション全体をaタグで挟み込むことな出来ないという意味だ。だからaタグはliの次に（というか、中に）来るのが普通である。CSSの記述とは関係ないが、これを間違えると正しいXHTMLにならないばかりか、リンク指定部分のスタイルも外れてしまうので覚えておきたい。
次回は11月21日掲載です。お楽しみに!!
 |
［プロフィール］ や の・りん●北海道足寄町生まれ。女子美術大学芸術学部芸術学科卒。著書に『Webレイアウト見本帳』、『WEBレイアウト・セオリー・ブック』（エム ディエヌコーポレーション）がある。近著『デザインする技術』（エムディエヌコーポレーション）も好評発売中。身長 152.1cm。 |
