ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（３）
タブメニューの作り方（３）
（３）タブメニューの作り方（３）で複数色にしてタブメニュー化した方法に、背景に角丸の画像を設置し、背景色を隠す（白色）の画像を使用しタブメニュー化します。
下記の画像の様に右上・左上の角を白色（丸くなるように）にしたものを背景に設置し、背景色を隠します。
（下記の黒色の部分は、透明にして下さい。また、枠線も必要ありません。）
こうなります
（その他のパターンの一覧はタブメニューのいろいろ（一覧）で見れます。）
解説
この方法は、（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化に（２）複数の色指定に背景画像を行う事で可能にしてますので、基本の作り方に関しては、（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化と（２）複数の色指定を参照して下さい。
下記では、背景画像の設置方法のみ説明してあります。
【考え方】
- タブの背景画像を、繰返しなく、上部の中央に設定します。
になります。
それでは、行っていきましょう。
１．タブの背景画像を、繰返しなく、上部の中央に設定します。
背景画像を各タブメニューである<li>のスタイルに追加します。
| 追加スタイル | 意味 |
|---|---|
| background-image:url(画像); | 背景画像の指定 |
| background-repeat:no-repeat; | 繰返し表示しない |
| background-position:center top; | 位置を上部中央にする |
それぞれの設定に関しては背景画像の場所を指定すると背景に画像を表示する（繰返さない）を参照して下さい。
スタイルシート部分の書き方は
.tab1on,.tab1off,.tab2on,.tab2off,.tab3on,.tab3off,.tab4on,.tab4off
{
background-image:url(画像);
background-repeat:no-repeat;
background-position:center top;
}
完成しました！
ここに内容を入れられます。
ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（３） > このページのＴＯＰ ▲
全ての書き方です。
書き方は
p {
float:left;
margin:0px;
display:block;
width:60px;
margin-top:5px;
}
li {float:left;display:block;}
.box1 {height:26px;}
ul {margin:0px;}
.tab1on a:link,
.tab2on a:link,
.tab3on a:link,
.tab4on a:link
{
color:#ffffff;
text-decoration:none;
display:block;
margin-top:5px
}
.tab1on a:visited,
.tab2on a:visited,
.tab3on a:visited,
.tab4on a:visited
{
color:#ffffff;
text-decoration:none;
display:block;
margin-top:5px
}
.tab1on a:hover,
.tab2on a:hover,
.tab3on a:hover,
.tab4on a:hover
{
color:#ffffff;
text-decoration:none;
display:block;
margin-top:5px
}
.tab1off a:link,
.tab2off a:link,
.tab3off a:link,
.tab4off a:link
{
color:#000000;
text-decoration:underline;
display:block;
margin-top:5px
}
.tab1off a:visited,
.tab2off a:visited,
.tab3off a:visited,
.tab4off a:visited
{
color:#000000;
text-decoration:underline;
display:block;
margin-top:5px
}
.tab1off a:hover,
.tab2off a:hover,
.tab3off a:hover,
.tab4off a:hover
{
color:#ff3333;
text-decoration:underline;
display:block;
margin-top:5px
}
.tab1on {background-color:#ff3333;}
.tab1off {background-color:#ffcccc;}
.tab2on {background-color:#3333ff;}
.tab2off {background-color:#ccccff;}
.tab3on {background-color:#33cc33;}
.tab3off {background-color:#ccffcc;}
.tab4on {background-color:#ff6600;}
.tab4off {background-color:#ffff99;}
.tab1on,.tab1off,.tab2on,.tab2off,.tab3on,.tab3off,.tab4on,.tab4off
{
display:block;
width:100px;
height:26px;
float:left;
margin-right:5px;
text-align:center;
background-image:url(画像);
background-repeat:no-repeat;
background-position:center top;
}
.box21
{
clear:both;
border-top:solid 10px #ff3300;
border-bottom:solid 1px #ff3300;
border-left:solid 1px #ff3300;
border-right:solid 1px #ff3300;
}
.box22
{
clear:both;
border-top:solid 10px #3333ff;
border-bottom:solid 1px #3333ff;
border-left:solid 1px #3333ff;
border-right:solid 1px #3333ff;
}
.box23
{
clear:both;
border-top:solid 10px #33cc33;
border-bottom:solid 1px #33cc33;
border-left:solid 1px #33cc33;
border-right:solid 1px #33cc33;
}
.box24
{
clear:both;
border-top:solid 10px #ff6600;
border-bottom:solid 1px #ff6600;
border-left:solid 1px #ff6600;
border-right:solid 1px #ff6600;
}
<div class="box1">
<p>MENU:</p>
<ul>
<li class="tab1off"><a href="リンク先">タブメニュー</a></li>
<li class="tab2on"><a href="リンク先">タブメニュー</a></li>
<li class="tab3off"><a href="リンク先">タブメニュー</a></li>
<li class="tab4off"><a href="リンク先">タブメニュー</a></li>
</ul>
</div>
<div class="box22">ここに内容を入れられます。</div>
ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（３） > このページのＴＯＰ ▲
