CSSテクニック

ロールオーバーリンク3

ロールオーバーリンク1にさらに手を加えたサンプルをいくつか紹介します。
画像なしの限界を極めるのもいいかもしれませんね。

ボーダーを応用する(縦メニュー編)

ちょっとした計算が必要になってきます。

a.sample{
    display:block;
    background-color:#FFFFA7;
    padding:0.5em	20px;
    width:80px;
    height:15px;
    text-decoration:none;
}
a:hover.sample{
    background-color:#FFFFD5;
    padding:0.5em	20px 0.5em 10px;
    border-left:solid 10px #CC9966;
}
a:active.sample{
    background-color:#FFFFD5;
    padding:0.5em	20px 0.5em 10px;
    border-left:solid 10px #FFCC00;
}

このサンプルを使うには、あらかじめ使いたいページを標準準拠モードで書く必要があります。 それでもIE5.5などではちょっと表示が崩れてしまいます。
さらにテクニックを追加すれば大丈夫なのですが、今回はそこまでやっていません。

なぜ条件が細かいかというと、padding、border-widthの値を微調整する必要があるからです。

a:hover&activeの左側のpaddingの値(10px)とボーダーの太さの値(10px)の和をa.samleで指定した左側のpadding(20px)と同じにしなければなりません。 これをやらずにボーダーだけを追加してしまうと、文字の位置がずれたり、全体の長さが変わってしまいます。

ボーダーを応用する(横メニュー編)

ulタグでメニューと組み合わせて横並びバージョンにしてみました。

ul.sample1{
    list-style:none;
    margin-left:0em;
    padding-left:0em;
}
li.sample1{
    list-style:none;
    float:left;
}
a.sample1{
    display:block;
    background-color:#FFFFA7;
    padding:6px 20px;
    width:80px;
    height:15px;
    text-decoration:none;
}
a:hover.sample1{
    background-color:#FFFFD5;
    padding:6px 20px 3px 20px;
    border-bottom:solid 3px #CC9966;
}
a:active.sample1{
    background-color:#FFFFD5;
    padding:6px 20px 3px 20px;
    border-bottom:solid 3px #FFCC00;
}

こちらはaの下側のpaddingの値(6px)と、a:hover&activeの下側のpaddingの値(3px)とボーダーの太さの値(3px)の和を同じにする必要があります。 これをやらずにボーダーだけを追加してしまうと、文字の位置がずれたり、全体の高さが変わってしまいます。
pxではなく、emなどでも指定できますが、微妙に高さが変わってしまうことがあります。


使いこなすための+α

使いこなすためには、とにかくやってみることです。思いついたアイディアをどんどん試してみてください。
何気に今回はクリックするとさらにボーダーの色が変わる3段変化になっています。
activeの部分をいじればもっと凄いことができるかもしれません。


一覧へ戻る


Last Modified 2004-11-21 © きくちゃん 2004 - All Rights Reserved