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

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

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

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

（５）（１）〜（４）までを少し変えて、画像が重なっているように見えるタブメニューを作成します。

基本的な作り方は、（４）リンク自体に画像を使用してタブメニュー化で設置した画像を、立体的に見える画像に変更し、それぞれの画像の隙間を無くしてタブメニュー化を行います。

MENU:

　こうなります

MENU:

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

【重要】

同幅の画像が重なる事になりますので、リンクの範囲指定の幅を下記の様に指定する事で可能になります。

この様に、左端の範囲は画像全ての範囲として設定し、そこから右側画像の範囲は、重なりの部分は範囲に入れずに設定します。

この場合に、画像を切り替える際には、下記に注意しないと重なりが表現できません。

  • 移動先のリンクの画像を切り替える
  • 移動先のリンクの左側の画像も切り替える
  • 移動元のリンクの画像を切り替える

 

この様に、移動元（もともと居たページ）のリンク画像を切り替える事は勿論ですが、隣接する画像（今回は左側）も同時に変更する必要があります。

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

解説　

この方法は、

の（１）〜（４）までの方法を少し変更して、上記の様にタブ画像がお互い重なっている様な画像を用意して、立体的なタブメニューを表現します。、基本の作り方に関しては、上記（１）〜（４）を順番に確認して下さい。

下記では、背景画像の切り替え方法を説明してあります。

【考え方】

上記の切り替える場所を参考にしながら下記のスタイルを決定していきます。

  1. クラス名の種類を１１種類用意し画像指定する。
  2. リンク部分の幅指定を２種類にする。

になります。

クラス名を下記の一覧にします。（１１種類）

対応場所クラス名クラス名クラス名
タブメニュー１tab1ontab1off-1tab1off-2
タブメニュー２tab2ontab2off-1tab2off-2
タブメニュー３tab3ontab3off-1tab3off-2
タブメニュー４tab4ontab4off設定なし

クラス名と画像の設定対応が下記になります。

クラス名→tab1ontab2off-1tab3off-1tab4off
使用画像→

クラス名→tab1off-2tab2ontab3off-1tab4off
使用画像→

クラス名→tab1off-1tab2off-2tab3ontab4off
使用画像→

クラス名→tab1off-1tab2off-1tab3off-2tab4on
使用画像→

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

１．クラス名の種類を１１種類用意し画像指定する。

上記に記載したクラス名一覧の通り１１種類の背景画像指定を行います。

（４）背景画像をリンク全体に設置して画像にてリンクしている様にするでは、

  • リスト部分である<li>に背景画像と同じ大きさを指定
  • さらに、リンク部分である<a href="">でも背景画像と同様の大きさを指定

するといった背景画像と、リンク部分を別々にしていましたので複雑になりました。

そこで、『背景画像を表示する部分』と『リンクする部分』を１つにする為に、リンク部分自体の背景に画像を設定する様にします。

（各クラス名の範囲は<li>〜</li>ですので、その中にある<a href="">に対しての指定という意味になります。）

書き方は

.tab1on a    {background-image:url(画像);}
.tab1off-1 a {background-image:url(画像);}
.tab1off-2 a {background-image:url(画像);}
.tab2on a    {background-image:url(画像);}
.tab2off-1 a {background-image:url(画像);}
.tab2off-2 a {background-image:url(画像);}
.tab3on a    {background-image:url(画像);}
.tab3off-1 a {background-image:url(画像);}
.tab3off-2 a {background-image:url(画像);}
.tab4on a    {background-image:url(画像);}
.tab4off a   {background-image:url(画像);}

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

２．リンク部分の幅指定を２種類にする。

今回使用する画像は、上記にある様に背景画像の幅が違いますので、その幅になる様に調整します。

画像ファイルは、幅(100px)と幅(97px)です。

書き方は

.tab1on a,
.tab1off-1 a,
.tab1off-2 a
        {
        width:100px;
        }
.tab2on a,
.tab2off-1 a,
.tab2off-2 a,
.tab3on a,
.tab3off-1 a,
.tab3off-2 a,
.tab4on a,
.tab4off a
        {
        width:97px;
        }

内容を入れるボックス（<div>）の色は、今回１種類になります。

　完成しました！

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,
.tab1off,
.tab2on,
.tab2off-1,
.tab2off-2,
.tab3on,
.tab3off-1,
.tab3off-2,
.tab4on,
.tab4off
        {
        display:block;
        float:left;
        margin:0px;
        }
.tab1on a,
.tab1off a,
.tab2on a,
.tab2off-1 a,
.tab2off-2 a,
.tab3on a,
.tab3off-1 a,
.tab3off-2 a,
.tab4on a,
.tab4off a
        {
        display:block;
        height:26px;
        margin:0px;
        text-indent:-1000em;
        text-decoration:none;
        background-repeat:no-repeat;
        background-position:center top;
        }

.tab1on a,
.tab1off-1 a,
.tab1off-2 a
        {
        width:100px;
        }

.tab2on a,
.tab2off-1 a,
.tab2off-2 a,
.tab3on a,
.tab3off-1 a,
.tab3off-2 a,
.tab4on a,
.tab4off a
        {
        width:97px;
        }

.tab1on a    {background-image:url(画像);}
.tab1off-1 a {background-image:url(画像);}
.tab1off-2 a {background-image:url(画像);}
.tab2on a    {background-image:url(画像);}
.tab2off-1 a {background-image:url(画像);}
.tab2off-2 a {background-image:url(画像);}
.tab3on a    {background-image:url(画像);}
.tab3off-1 a {background-image:url(画像);}
.tab3off-2 a {background-image:url(画像);}
.tab4on a    {background-image:url(画像);}
.tab4off a   {background-image:url(画像);}


.box21
        {
        clear:both;
        border-top:solid 10px #ff3300;
        border-bottom:solid 1px #ff3300;
        border-left:solid 1px #ff3300;
        border-right:solid 1px #ff3300;
        }



<div class="box1">
<p>MENU:</p>
<ul>
<li class="tab1on">
<a href="リンク先">タブメニュー</a>
</li>
<li class="tab2off-1">
<a href="リンク先">タブメニュー</a>
</li>
<li class="tab3off-1">
<a href="リンク先">タブメニュー</a>
</li>
<li class="tab4off">
<a href="リンク先">タブメニュー</a>
</li>
</ul>
</div>
<div class="box21">ここに内容を入れられます。</div>

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