タブ切り替え

タブレット表示スマホ表示

てきすとてきすと

パーツ設置費用

5,000円

費用メモ

上記はタブ動作のみの料金
※これを中身（パーツ×ページ数）と合算する

CSS

.tab__place {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 -10px;
}

.tab__place .tabBtn {
  display: none;
}
.tab__place .tabLabel {
  box-sizing: border-box;
  cursor: pointer;
  margin: 0 20px 30px;
  order: -1;
  padding: 12px;
  position: relative;
  transition: ease .5s;
}
.tab__place .tabBtn + .tabLabel::after {
  border-bottom: solid 2px #666;
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: ease .5s;
  height: 0;
  width: 100%;
}
.tab__place .tabBtn:checked + .tabLabel::after {
  transform: scaleX(1);
}

.tab__place article {
  display: none;
  margin: 0 10px;
  width: 100%;
}
.tab__place .tabBtn:checked + .tabLabel + article {
  display: block;
}

HTML

<section class="tab__place">
  <input id="TAB__A" type="radio" name="TAB" checked="checked" class="tabBtn">
  <label class="tabLabel" for="TAB__A">てきすとてきすと</label>
  <article>
    <img src="/wp/wp-content/uploads/2021/03/dammy-image.jpg">
  </article>
  <input id="TAB__B" type="radio" name="TAB" class="tabBtn">
  <label class="tabLabel" for="TAB__B">てきすとてきすと</label>
  <article>
    <img src="/wp/wp-content/uploads/2021/03/dammy-image.jpg">
  </article>
  <input id="TAB__C" type="radio" name="TAB" class="tabBtn">
  <label class="tabLabel" for="TAB__C">てきすとてきすと</label>
  <article>
    <img src="/wp/wp-content/uploads/2021/03/dammy-image.jpg">
  </article>
</section>