CSS技研:ロールオーバーボタンで吹き出しを表示する

エ・ビスコム・テック・ラボ
2009-03-10 12:22:01
  • このエントリーをはてなブックマークに追加

カーソルを重ねたときに吹き出しを表示する

 今回のサンプルではリンクを設定したボタンにカーソルを重ねると、ボタンの下に吹き出しを表示するように設定した。カーソルの動作によってボタンとは別の場所に何かを表示する場合、一般的にはJavaScriptを利用するが、ここではCSSだけで設定している。

サンプル完成図 サンプル完成図
ボタンごとに異なる吹き出しが表示される ボタンごとに異なる吹き出しが表示される
a{
display: block;
width: 120px;
height: 30px;
overflow: hidden;
}

span{
display: block;
width: 193px;
height: 112px;
background-image: url(home.png);
background-repeat: no-repeat;
text-indent: -9999px;
cursor: pointer;
}

#movie span{background-image: url(movie.png)}
#contact span{background-image: url(contact.png)}

a:hover{
overflow: visible;
}

ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 120px;
}

li{
display: block;
margin-right: 5px;
position: absolute;
top: 0;
}

li#home{left: 0}
li#movie{left: 125px}
li#contact{left: 250px}

ブラウザで表示を確認する

 なお、このロールオーバーボタンの表示にはInternet Explorer 5.5以上とFirefox、Safari、Operaなど、主要ブラウザが対応している。

 それでは、ボタンの作成手順と吹き出しを表示する仕組みを見ていこう。

ステップ1 ボタンと吹き出しの画像を用意する

 ボタンと吹き出しは1枚の画像で次のように作成する。ボタン部分の大きさと画像全体の大きさは、後からCSSで指定する必要があるので正確に確認しておく。ここではボタン部分を120×30ピクセルで、全体を193×112ピクセルで作成している。また、ボタン部分は画像の左上に配置する。

用意した画像下記のリンクからhome.pngを参照してほしい 用意した画像。下記のリンクからhome.pngを参照してほしい
ブラウザで表示を確認する

ステップ2 ボタンと吹き出しの画像を表示する

 次に、リンクをで作成して、の背景画像として(1)で用意した画像(home.png)を表示する。

 このとき、CSSではwidthとheightプロパティでの大きさを指定する。にはステップ1で確認したボタン部分の大きさを、には画像全体の大きさを指定するのがポイントだ。

ボタンと吹き出しの画像を表示したもの ボタンと吹き出しの画像を表示したもの
a{
display: block;
width: 120px;
height: 30px;
}

span{
display: block;
width: 193px;
height: 112px;
background-image: url(home.png);
background-repeat: no-repeat;
text-indent: -9999px;
cursor: pointer;
}


HOME


ブラウザで表示を確認する

 これでが構成するボックスは次のようになり、はカーソルを重ねていないとき、はカーソルを重ねたときの画像の表示エリアとなる。なお、が内包する要素なので、のボックスからはみ出して表示された状態となっている。

ステップ3 からはみ出した部分を隠す

 に対して「overflow:hidden」と指定して、のボックスからはみ出した部分を隠す。これで次のような表示となり、カーソルを重ねていない状態のボタンとなる。ただし、この段階ではカーソルを重ねても吹き出しは表示されない。

ボタン部分だけが表示される ボタン部分だけが表示される
a{
display: block;
width: 120px;
height: 30px;
overflow: hidden;
}
ブラウザで表示を確認する

 なお、overflowは、ボックスからはみ出したコンテンツの表示方法を指定するプロパティだ。overflowプロパティについて詳しくは、「ボックスに収まらないコンテンツの表示方法」を参照してほしい。

ステップ4 ボタンにカーソルを重ねたときの表示を指定する

 ボタンにカーソルを重ねたときのデザインをa:hover {〜}で指定する。ここではステップ3で隠した部分を表示するため、「overflow:visible」と指定する。これで、ボタンにカーソルを重ねると吹き出しが表示されるようになる。

カーソルを重ねたときの表示 カーソルを重ねたときの表示
a:hover{
overflow: visible;
}
ブラウザで表示を確認する

ステップ5 複数のボタンを横に並べて表示する

 作成したロールオーバーボタンは、通常のリンクと同じように

  • でリストとしてマークアップして横に並べて表示することができる。

     ただし、横に並べる際には通常はfloatプロパティを利用するが、ここではpositionプロパティで配置を指定する。floatを利用した場合、Internet Explorer 6でレイアウトが崩れるという問題が発生するためだ。そこで、サンプルでは

  • に対して「position:absolute」と指定し、ボタンごとに左端からの表示位置を指定している。

    ボタンを横に並べて表示したもの ボタンを横に並べて表示したもの
    ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 120px;
    }
    
    li{
    display: block;
    margin-right: 5px;
    position: absolute;
    top: 0;
    }
    
    li#home{left: 0}
    li#movie{left: 125px}
    li#contact{left: 250px}
    
    
    
    ブラウザで表示を確認する

     以上でサンプルは完成だ。なお、今回は画像だけでボタンと吹き出しを作成したが、文字の部分をHTMLあるいはXHTMLで記述することもできる。文字を使って作成する方法については、また別の回に改めて紹介したい。

  • コメント(1件)
#1 anonymous   2009-03-24 10:01:38
この場合では予め設けた空間に吹き出しが表示されますが、横並びナビゲーションの下には、普通はコンテンツ領域があると思いますので、その辺りも考慮して頂くと良いと思いました。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]