HTMLの構造化 - テキストボタン編 - 2/2

「HTMLの構造化 - テキストボタン編 - 1/2」では、テキストと「CSS(スタイルシート)」を使い、ボタンをデザインするところまでご紹介しました。

このボタンの利点は、テキストと「CSS」のみで作成されているため、画像で作成したボタンと比べファイルサイズが小さいことと、ボタンの中に書かれた文字はテキストのため、変更があった場合に「HTML」を修正するだけで、修正ができるという点です。

このボタンをもっとボタンらしくするためにもう一歩すすめて、「JavaScript」の「onMouseOver」で色が変わるボタンと同じ様に、「JavaScript」を使わないで、「CSS」だけで作成する方法をご紹介します。

まず、「HTMLの構造化 - テキストボタン編 - 1/2」で作成した「HTML」ソースを先に確認してください。

ここでポイントとなっているのは、「CSS」のセレクタを「.menu-list a」にし、リンクタグに適用している点です。
今回は、ボタンにカーソルが重なった時に、ボタンのバックグラウンドと文字の色を変えたいということなので、「.menu-list a」の「ダイナミック疑似クラス」を指定することにより実現させます。

指定する「ダイナミック疑似クラス」は「:hover」で、これは、対象にカーソルが重なった時の「CSS」定義になります。
まず、セレクタを「.menu-list a:hover」とし、宣言ブロックは前回のものをコピーしてきます。

次に宣言ブロックの色指定を変更します。

color: #FFFFFF;　⇒　color: #666666;
background-color: #999999;　⇒　background-color: #CCCCCC;

以下が「ダイナミック擬似クラス :hover」を指定したボタンです。

お問い合わせ

いかがでしょうか、これで「JavaScript」も画像も使わずに「onMouseOver」で色が変わるボタンを作成することができました。色の変更意外にも、宣言ブロックを変更することにより様々な変化を加えることが可能です。
このボタンは、「ＩＥ」、「Opera」、「Netscape」、「Firefox」それぞれの最新バージョンで動作することを確認しています。
なお、ボタンを形成するバックグラウンドや輪郭線の指定はリンクタグに適用されるようにすることが重要です。
それ以外のタグに適用すると、「ＩＥ」では動作しなくなるのでご注意ください。

次回は「HTMLの構造化 - リストタグ レイアウト編」でご紹介したリストタグで作成したメニューにこの「CSS」定義を適用したいと思います。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選