[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。

すぐに役立つＣＳＳ実践テクニック・ＴＩＰＳ集

ロールオーバー風のリンクボタンを作ろう　～リストタグ編　その２～

　リストタグ編その１では、ブロックレベル要素のリストタグにＣＳＳのフロートを設定して横に１列にボタンを並べましたが、今回は縦に並べるタイプのリンクボタンをデザインを変えて作ってみたいと思います。

スタイルシート適用前

　リストタグは前後に改行が入るブロックレベル要素なので、フロートの設定を変えなければ、リスト領域はデフォルトで一つずつ縦に並びます。以下のサンプルでは、理解のために<li>タグにボーダーを設定してあります。

HTMLソースコードサンプル

　リンクタグ編その１とまったく同じソースコードです。ちなみに、リンク先を「#（シャープ）」にするとページトップを表示するリンクができます。

<ul>
<li><a href="#">リンクＡ</a></li>
<li><a href="#">リンクＢ</a></li>
<li><a href="#">リンクＣ</a></li>
</ul>

スタイルシート適用後

　スタイルシートの理解を深めるために、やや極端なサンプルをご用意しました。ポイントは、カーソルをリンクの上に乗せた時のスタイルとして、ボックス要素の相対指定をマイナス方向へ設定したことです。

HTMLソースコードサンプル

　リンクタグ編その１では<DIV>タグでリストタグを囲みましたが、本サンプルでは、<ul>タグにクラスを設定してみました。リンクタグ編その１と比べて、<li>との親子関係に変化がないことに注目してください。

<ul class="sample04">
<li><a href="#">リンクＡ</a></li>
<li><a href="#">リンクＢ</a></li>
<li><a href="#">リンクＣ</a></li>
</ul>

スタイルシートサンプル

　<a>タグは前後に改行が入らないインラインレベル要素なので、リンクの幅を設定するためにブロックレベル要素に変更します。

　更に、ホバー時に浮いたような動きをつけるために、ブロックレベル要素に変更したボックス領域を相対指定でマイナス方向へ数ピクセルずらし、<li>タグの背景を黒に設定して影のように見せています。デザイン的には稚拙ですが、スタイルの学習には役立つでしょう。

.sample04 li {
　　list-style-type:none;
　　width:200px;
　　margin:0 0 6px 0;
　　 background: #333333;
　　color:#FFFFFF;
 　　}
.sample04 a {
　　display:block;
　　width:188px;
　　padding:12px 0 12px 12px;
　　text-decoration:none;
　　background:#3399FF;
　　color:#FFFFFF;
　　background-image:url(背景画像へのパス);
　　background-repeat:repeat-y;
　　}
.sample04 a:hover {
　　position:relative;
　　top:-4px;
　　left:-6px;
　　}

サイトトップページへ戻る