切り替え機能がついた「タブメニュー」の作り方をお伝えします。
この方法は、ホームページのスペースを有効に活用できるというメリットがあります。
タブを切り替えることで、同じスペースで、たくさんの情報を見れるからです。
ここでは、タブの色を変える方法やタブの数を増やす方法など、カスタマイズ方法もお伝えするので、ぜひ活用してくださいね。
■ このようなタブメニューが完成します！
タブをクリックすると、枠の中のコンテンツが切り替わります。
ここでは、このようなタブメニューを作る方法をお伝えします。
■ 切り替え機能がついた「タブメニュー」の作り方の手順
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：タブメニューを表示したい箇所に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、HTMLファイルに貼り付けてください。
|
タブメニューを表示したい箇所に、上記のソースを入れます。
なお、タブの文字（タブ1やタブ2）は自由に変更することができますし、タブの中のコンテンツ（タブ1のコンテンツなど）も、自由に変更することができますよ。
手順３：タブをクリックして、タブが切り替わることを確認する。
ホームページの表示を確認して、下記のような「タブメニュー」が表示されていることを確認してください。
また、タブをクリックして、タブが正常に切り替わることも確認できれば、作業は完了です。
■ 【カスタマイズ方法】タブメニューの色を変更する方法
タブメニューの色は、CSSファイル（style.css）に入れた記述の中の、「tabs li」の中にある「background-color: #dee6fc;」の箇所と、
「tabs li.active」の中にある「background-color: #ffffff;」の箇所で、タブメニューの色を指定しています。
そのため、この箇所を、たとえば「background-color: #2ecc71;」などに変更することで、タブの色を変えることができますよ。
■ 【カスタマイズ方法】タブの数を増やす方法
タブの数を増やすには、HTMLファイルに入れた記述の中で、下記のように「タブ4」を増やすだけです。
|
<li data-tab="tab-3">タブ3</li>
↓ ↓ ↓ ↓ ↓
<li data-tab="tab-3">タブ3</li>
<li data-tab="tab-4">タブ4</li>
|
<div class="tab-content" id="tab-3">
<p>タブ3のコンテンツ</p>
</div>
↓ ↓ ↓ ↓ ↓
<div class="tab-content" id="tab-3">
<p>タブ3のコンテンツ</p>
</div>
<div class="tab-content" id="tab-4">
<p>タブ4のコンテンツ</p>
</div>
|
こうすることで、タブの数を増やすことができます。
なお、「タブ3」の箇所をコピーして使うと、分かりやすいと思いますよ。
（「tab-4」に変更するのを忘れないようにしてくださいね）
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
