はてなブログで『タブ切り替え』を実装【コピペOK！】｜HTMLとCSSで作れます。タブを増減するのも簡単⟡.·

はてなブログでタブ切り替え

ブログ記事の中に使える『タブ切り替え』をHTMLとCSSで実装してみました。

タブを使うと情報整理がしやすくなります。
複数のカテゴリーやコンテンツを分類することで

ユーザーが情報に素早くアクセスできる。
小スペースに様々な情報を書き込める。

このようなメリットがあります。

プロフィール・ランキング・おすすめ記事などに使うとすっきりまとめられそうですね。

＼こんなのが作れます／

はてなブログでタブ切り替え

【必読】はじめに
タブ切り替えの動作確認
タブ切り替えのHTML
タブ切り替えのCSS
- タブの数を増やす①－CSS
- タブの数を増やす②－CSS
おわりに

【必読】はじめに

はてなブログでタブ切り替え

コード使用のお願い
ご紹介しているソースコードは個人利用のコピペはOKですが、ブログなどでカスタマイズ方法を紹介する場合は本記事をリンクして引用である旨の表記が必須です。
どうぞよろしくお願い致します。

HTMLやCSSを編集している時「構造がわからなくなった」「色々いじってたらデザインが崩れたけど元に戻せない՞」なんてこともあるかもしれません。

元のコードに影響を与えない環境で試し編集をしたり、元のデザインを復元できるようにバックアップ（メモ帳などにコピペしておく等）しておくことをおすすめします。
　

タブ切り替えの動作確認

冒頭にGIF画像を貼りましたが、実際にどのように動作するのか確認してみてくださいね☻

書いている人この記事のこと私の場合

ブログのカスタマイズが趣味で、色々なカスタマイズ方法を実装＆ご紹介しています𓂃✍︎

今回作るタブ切り替えでは、このように1つ目の項目が最初に表示されています。

HTMLとCSSで作る『タブ切り替え』についてご紹介しています。

コピペで実装、色などを簡単に変えられるように構造などをなるべく詳しくご説明します⟡.·

私はこのタブ切り替えを、主にレシピ記事で使います。

同じ材料で焼き型で分量だけが変わるようなレシピで、サイズごとに材料と分量が見れるようにしていますよ☻

タブ切り替えのHTML

HTMLはタブ切り替えを「設置したい場所」に使います。

<!-- タブここから（使うときは改行消す！）-->
<div class="kirikae-tab">

<input id="all" type="radio" name="tab-style" checked>
<label class="tab-style" for="all">タブ①タイトル</label>

<input id="tab2" type="radio" name="tab-style">
<label class="tab-style" for="tab2">タブ②タイトル</label>

<input id="tab3" type="radio" name="tab-style">
<label class="tab-style" for="tab3">タブ③タイトル</label>

<!--タブを増やす場合ここに足す【1】-->

<div class="tab-content" id="all-content">
<div class="tab_content_description">
タブ①の内容
</div></div>

<div class="tab-content" id="tab2-content">
<div class="tab-content-description">
タブ②の内容
</div></div>

<div class="tab-content" id="tab3-content">
<div class="tab-content-description">
タブ③の内容
</div></div>

<!--タブを増やす場合ここに足す【2】-->

</div>

タブの数を増やす①－HTML

タブの数は増やすことが可能です。

の部分を以下に書き換えます。

<div class="tab-content" id="tab4-content">
<div class="tab-content-description">
タブの内容
</div></div>

補足点<div class="tab-content" id="tab4-content">
<div class="tab-content-description">
タブの内容
</div></div>
赤文字部分の数字を増やしながら、増やしたい分コードを書き足すことでタブを足していくことができます。

タブの数を増やす②－HTML

①ができたら次は内容の部分を足します。

の部分を以下に書き換えます。

<div class="tab-content" id="tab4-content">
<div class="tab-content-description">
タブ③の内容
</div></div>

使用する時の注意点

はてなブログの『はてな記法』や『Markdown法』で記事を書いている方は、コピペしたあとに全ての改行を消してください。

編集する際に分かりやすいように改行や空の行を入れていますが、はてな記法やMarkdown法でこのまま使うとデザインが崩れます。

実際に使う時は以下のようになるのですが編集するときに非常に分かりにくいので、内容を全て記入してから改行を消していく方法がやりやすいです。

<div class="kirikae-tab"><input id="all" type="radio" name="tab-style" checked><label class="tab-style" for="all">タブ①タイトル</label><input id="tab2" type="radio" name="tab-style"><label class="tab-style" for="tab2">タブ②タイトル</label><input id="tab3" type="radio" name="tab-style"><label class="tab-style" for="tab3">タブ③タイトル</label><div class="tab-content" id="all-content"><div class="tab_content_description">
タブ①の内容
</div></div><div class="tab-content" id="tab2-content"><div class="tab-content-description">
タブ②の内容
</div></div><div class="tab-content" id="tab3-content"><div class="tab-content-description">
タブ③の内容
</div></div>
</div>

タブ切り替えのCSS

CSSはHTMLの見た目を装飾するコードです。

CSSコードの使い方はてなブログでCSSコード使い方

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にCSSコードを貼り付ける。
【変更を保存する】を押して完了。

/*** タブ切り替え全体 ***/
.kirikae-tab {
  background-color: none; /*背景色*/
  width: 100%; /*幅のサイズ*/
  margin: 10px 0; /*位置調整*/
  }

/*** タブ部分のデザイン ***/
.tab-style {
  width: calc(100%/3); /*[3]はタブの数*/
  height: 35px; /*高さ調節*/
  line-height: 40px; /*高さ調節*/
  font-size: 15px; /*文字サイズ*/
  text-align: center; /*文字位置*/
  color: #888; /*文字色*/
  font-weight: bold; /*文字を太字にする*/
  transition: all 0.3s ease; /*0.3秒で表示*/
  border-radius: 20px 20px 0 0; /*丸み*/
  display: block;
  float: left;
  }

/*** ラジオボタンを消す ***/
input[name="tab-style"] {
  display: none;
  }

/*** 内容部分のデザイン ***/
.tab-content { 
  display: none;
  padding: 0 20px; /*中の余白*/
  background-color: #F9F9F9; /*背景色*/
  overflow: hidden;
  }

/*** 選択タブの内容のみ表示する ***/
#all:checked ~ #all-content,
#tab2:checked ~ #tab2-content,
#tab3:checked ~ #tab3-content
/*タブを増やす場合ここに足す*/ {
  display: block;
  }

/*** 選択タブのデザイン ***/
.kirikae-tab input:checked + .tab-style {
  background-color: #DFDFDF; /*背景色*/
  color: #333; /*文字色*/
  }