タブ切り替え

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

てきすとてきすとてきすと

パーツ設置費用

5,000円

費用メモ

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

CSS

.tab__place {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tab__place .tabBtn {
  display: none;
}
.tab__place .tabLabel {
  background-color: #b3b3b3;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
  order: -1;
  padding: 17px;
  text-align: center;
  transition: ease .5s;
  width: 280px;
}
.tab__place .tabBtn:checked + .tabLabel {
  background-color: #f2f2f2;
  color: inherit;
}

.tab__place article {
  background-color: #f2f2f2;
  display: none;
  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>