ご訪問ありがとうございます.・。*+
茨城・千葉・宮城エリアの釣り(ファミリーフィッシング)をメインとした趣味ブログです。
ブログをカスタマイズすることが好きで無料ブログからWordPressに引っ越しました。
書きたいことや旧ブログの記事移行がなかなか追い付いつかず、ゆっくりペースで更新中ですがお立ち寄りください(*^^*)

全記事一覧はこちら >>

CSSでタブ切り替えを設置するカスタマイズ

タブ切り替え カスタマイズ

大まかに分けると【釣り】と【ブログ】について書いている当サイト。

トップページを開いたときにごちゃごちゃ記事が混ざっているのは嫌だったので、ざっくりとカテゴリを分けるためにタブ切り替えにしたいなぁと思っていて。

今回、思い切って導入いたしました!

タブ切り替えにするには

タブ切り替えのイメージ

ボタン1のコンテンツを表示します
ボタン2のコンテンツを表示します
ボタン3のコンテンツを表示します

こんな感じでクリックしたコンテンツが下部に表示されます!

参考にさせていただいたサイト

オシャレなサイトでとても分かりやすい『ものぐさWEBノート』さんから知恵をお借りしました!!ヾ(*・∀・)

HTML

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ボタン 1</label>
    <div class="tab-content">
        コンテンツ 1
    </div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label>
    <div class="tab-content">
        コンテンツ 2
    </div>
    <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">ボタン 3</label>
    <div class="tab-content">
        コンテンツ 3
    </div>
</div>

CSS

タブのデザインはこのサイトに合わせたピンク系吹き出しにするためにコードを変更しました。

/**************************
 タブ切り替え
***************************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
margin:5px 0;
}

.tab-label {
color: White;
background:lightgray;
  text-align: center;
padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
	flex: 1;
border-radius: 2px;
position: relative;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
 background:#ff9999;
}
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 10px solid transparent;
border-top:10px solid #ff9999;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
padding: 15px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}


/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

タブを入れ子にして複数設置しました!

タブを複数設置できるとのことで、

  • 新着記事
  • 人気記事

この2つをカテゴリごとにタブ切り替えできるようにしました。

自分で作るには難しいと思っていたタブ切り替えを、情報を公開しているサイト様々のおかげで実装することができて満足しています♪(*・ω・人)

コメント