ホームページ作成(メニューを作る）
無料！発信中！メール情報誌！

ホームページ作成しよう！
HTML〜スタイルシート

ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（２）

タブメニューの作り方（２）

（２）（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化した方法は、２色で表現しました。これを複数色にしてタブメニュー化

MENU:

　こうなります

MENU:

ここに内容を入れられます。

【概要】

選択されているタブの色が濃く、選択されていない方は薄い色を指定します。

下記の色を使用して背景色と罫線を変更してます。

選択中の色←→選択外の色
タブメニュー(#ff3333)タブメニュー(#ffcccc)
タブメニュー(#3333ff)タブメニュー(#ccccff)
タブメニュー(#33cc33)タブメニュー(#ccffcc)
タブメニュー(#ff6600)タブメニュー(#ffff99)

この方法は、（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化に複数の色指定を行う事で可能にしてますので、基本の作り方に関しては、（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化を参照して下さい。
下記では、色の変化のさせ方のみ説明してあります。

（その他のパターンの一覧はタブメニューのいろいろ（一覧）で見れます。）

解説　

この方法は、（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化に複数の色指定を行う事で可能にしてますので、基本の作り方に関しては、（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化を参照して下さい。
下記では、色の変化のさせ方のみ説明してあります。

【考え方】

  1. タブのリンク色を設定
  2. タブの背景色を設定
  3. 直下の<div>の罫線色を状態に合わせて変更する

のステップになります。

それでは、順番に行っていきましょう。

１．タブのリンク色を設定

４つのタブに、それぞれ２種類の背景色を指定します。

下記の８種類の様にクラス名（class）を設定します。

クラス名意味状態
tab1on左端のタブが選択されている状態タブメニュー(#ffffff)
tab1off左端のタブが選択されていない状態タブメニュー(#000000)
tab2on左から２番目のタブが選択されている状態タブメニュー(#ffffff)
tab2off左から２番目のタブが選択されていない状態タブメニュー(#000000)
tab3on右から２番目のタブが選択されている状態タブメニュー(#ffffff)
tab3off右から２番目のタブが選択されていない状態タブメニュー(#000000)
tab4on右端のタブが選択されている状態タブメニュー(#ffffff)
tab4off右端のタブが選択されていない状態タブメニュー(#000000)

そして、この８種類のリンクに対して、

  • 選択されているタブのリンク色　　→　選択中は白色リンクの文字色
  • マウスが上に来た時のリンク色　→　選択中は白色リンクの文字色
  • 選択されていないタブのリンク色　→　選択外は黒色リンクの文字色
  • マウスが上に来た時のリンク色　→　選択外は赤色リンクの文字色

と、選択してあるリンクはマウスが重なった時でも変化なく白色にして、選択してされていない別のページへのリンクのみ色の変化をする様にします。

リンクの文字色を変更するには、文字の色を変えたい（リンク部分）や下記の表にある様に、スタイルシートで指定します。

設定種類方法
まだ見ていないリンク色a:link{color:色;}
既に見たリンク色a:visited{color:色;}
カーソルが上にある場合の色a:hover{color:色;}

また、リンクの下線を外す(text-decoration:none;)、
下線を書く（text-decoration:underline;）を設定してあります。

同じスタイルを適用する為に、まとめ設定ています。この『まとめ方』は『,』で区切れば良いはずですが、最後にも『,』を入れてしまうとブラウザによっては設定できなくなりますので、最後には『,』は入れない様にしましょう。（横長になりますので改行してます。）

スタイルシート部分の書き方は

.tab1on a:link,
.tab2on a:link,
.tab3on a:link,
.tab4on a:link
        {
         color:#ffffff;
         text-decoration:none;
        }

.tab1on a:visited,
.tab2on a:visited,
.tab3on a:visited,
.tab4on a:visited
        {
         color:#ffffff;
         text-decoration:none;
        }

.tab1on a:hover,
.tab2on a:hover,
.tab3on a:hover,
.tab4on a:hover
        {
         color:#ffffff;
         text-decoration:none;	
        }

.tab1off a:link,
.tab2off a:link,
.tab3off a:link,
.tab4off a:link
        {
         color:#000000;
         text-decoration:underline;
        }

.tab1off a:visited,
.tab2off a:visited,
.tab3off a:visited,
.tab4off a:visited
        {
         color:#000000;
         text-decoration:underline;
        }

.tab1off a:hover,
.tab2off a:hover,
.tab3off a:hover,
.tab4off a:hover
        {
         color:#ff3333;
         text-decoration:underline;
        }

ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（２） > このページのＴＯＰ　▲

２．タブの背景色を設定

リンク色の設定と同じ様に背景色を設定して行きます。リンク色のスタイルに下記を追加します。

スタイルシート部分の書き方は

.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;}
　ここまで！

MENU:

ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（２） > このページのＴＯＰ　▲

３．直下の<div>の罫線色を状態に合わせて変更する

直下に同色の帯びを設置する為のスタイルシートを上記までに追加し設定します。

上記の背景色と同色を使いますが、『選択されている状態』のみで良いので、４種類設定します。

スタイルシート部分の書き方は

.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;
        }
　完成しました！

MENU:

ここに内容を入れられます。

ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（２） > このページのＴＯＰ　▲

全ての書き方です。
書き方は

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;
        }

.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="tab1on"><a href="リンク先">タブメニュー</a></li>
<li class="tab2off"><a href="リンク先">タブメニュー</a></li>
<li class="tab3off"><a href="リンク先">タブメニュー</a></li>
<li class="tab4off"><a href="リンク先">タブメニュー</a></li>
</ul>
</div>
<div class="box21">ここに内容を入れられます。</div>

ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（２） > このページのＴＯＰ　▲