はてなブログのタブ切り替え（タブメニュー）デザイン設定｜コピペOK

この記事では、はてなブログに「タブ切り替え」デザイン（タブメニュー）を設置する方法と、コピペでタブデザインを設定できるHTML、CSSコードをご紹介します。

この記事で紹介する「タブ切り替え」デザインのコード（HTMLコードやCSSコード）の特徴は次のとおり。

初心者でも「コード」をコピペするだけで「タブ切り替え」を利用できる
CSSが少しわかる人は、好みのタブ切り替え表示（デザイン）に変更可能
JavaScript未使用なので動作が軽快（ブログ表示が遅くならない）
レスポンシブル対応しているので、PCでもスマホでも利用できる

「タブデザイン（タブメニュー）」は同一ページ内で複数の内容を切り替え表示させたい時に便利ですよ。

では具体的に確認していきます。

タブの切り替えデザイン（タブメニュー）の表示イメージ
- タブ切り替えデザインの実例
- ブログでのタブ切り替え表示の利用シーン
タブの切り替えデザイン（タブメニュー）のコード（HTML,CSS）
- タブ切り替え（タブデザイン）のHTMLコード
- タブデザインの設定方法とカスタマイズ

タブの切り替えデザイン（タブメニュー）の表示イメージ

「タブ切り替え」のデザインってどんなもの？
と思う人もいるかもしれないので、早速実例を表示します。

タブ切り替えデザインの実例

Tab 1 Tab 2 Tab 3

This is the content for Tab 1.

This is the content for Tab 2.

This is the content for Tab 3.

上の表示例の、Tab1からTab3（スマホの場合はTab1,Tab2）まで、各タブをクリックしてみてください。

選択するタブメニューを切り替えるたびに、表示される内容（contents）が切り替わることがわかりますか？

タブの中には

画像や写真
テキスト文言やリストなど、

いろんなものを入れることが可能です。

ブログでのタブ切り替え表示の利用シーン

ブログで「タブ切り替え」表示を設置する利用シーンとしては次のようなものが考えられます。

「タブデザイン」の便利な使い方を考えてみてください！

tab1	tab2	tab3
Before写真	After写真	説明文
ランチメニュー	ディナーメニュー	お店の情報
食事写真	店舗情報	公式ページのリンク
おすすめ１	おすすめ２	おすすめ３
１位	２位	３位

標準ではPCではタブを３つ、スマホでは２つのみ表示するようにしています。（変更できます）

タブの切り替えデザイン（タブメニュー）のコード（HTML,CSS）

ご紹介した「タブ切り替えデザイン」を利用してみたいと思いましたか？

タブ切り替え（タブデザイン）のHTMLコード

はてなブログで「タブの切り替え」デザインを表示するコード（HTML）は次のとおり。

HTMLコードを確認する

手順１：HTMLコードを確認
HTMLコードをシェアします。ざっと眺めたら手順２へ進んでください。

HTMLコード

<!-- タブの切り替えデザイン ここからコピー -->
<!-- パーツ１-１ ここから -->
<div class="tab-container">
<!-- タブのラベル -->
<input id="tab1-1" checked="checked" name="tab1" type="radio" />
<label for="tab1-1">Tab 1</label>
<input id="tab1-2" name="tab1" type="radio" />
<label for="tab1-2">Tab 2</label>
<input id="tab1-3" name="tab1" type="radio" />
<label for="tab1-3">Tab 3</label>
<!-- タブの内容 -->
<div id="content1" class="tab-content">
<p>This is the content for Tab 1.</p>
</div>
<div id="content2" class="tab-content">
<p>This is the content for Tab 2.</p>
</div>
<div id="content3" class="tab-content">
<p>This is the content for Tab 3.</p>
</div>
</div>
<p></p>
<!-- パーツ１-1 ここまで -->
<!-- パーツ1-2 ここから -->
<div class="tab-container">
<!-- タブのラベル -->
<input id="tab2-1" checked="checked" name="tab2" type="radio" /> <label for="tab2-1">Tab 1</label>
<input id="tab2-2" name="tab2" type="radio" />
<label for="tab2-2">Tab 2</label>
<input id="tab2-3" name="tab2" type="radio" />
<label for="tab2-3">Tab 3</label>
<!-- タブの内容 -->
<div id="content1" class="tab-content">
<p>This is the content for Tab 1.</p>
</div>
<div id="content2" class="tab-content">
<p>This is the content for Tab 2.</p>
</div>
<div id="content3" class="tab-content">
<p>This is the content for Tab 3.</p>
</div>
</div>
<p></p>
<!-- パーツ１-2 ここまで -->
<!-- CSS指定部分 style-/styleまで -->
<style>
/* パーツ２　ここから　*/
.tab-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 5px;
}
.tab-container input[type="radio"] {
    display: none;
}
.tab-container label {
    flex: 1;
    padding: 10px;
    background-color: #f1f1f1;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius:10px 10px 0 0;
}
.tab-container label:hover {
    background-color: #ddd;
}
.tab-content {
    display: none;
    flex-basis: 100%;
    padding: 10px 10px 3px 10px;
    border: 1px solid #ccc;
    border-top: none;
}
.tab-container input[type="radio"]:checked + label {
    background-color: #fff;
    border-bottom: none;
}
#tab1-1:checked ~ #content1,
#tab1-2:checked ~ #content2,
#tab1-3:checked ~ #content3,
#tab2-1:checked ~ #content1,
#tab2-2:checked ~ #content2,
#tab2-3:checked ~ #content3{
    display: block;
}
/* パーツ２　ここまで　*/
/* パーツ３　ここから　*/
/* レスポンシブ対応 */
@media (max-width: 600px) {
    .tab-container label:nth-of-type(n+3),
    .tab-container input:nth-of-type(n+3) {
        display: none;
    }
/*　スマホで縦表示にするなら消す
    .tab-container label { flex: 1 1 50%;　}
スマホで縦表示にするなら消す　*/
}
/* パーツ３　ここまで　*/
</style>
<!-- タブの切り替えデザイン ここまでコピー -->