タブ切り替え

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

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

パーツ設置費用

5,000円

費用メモ

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

CSS

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

.tab__place .tabBtn {
  display: none;
}
.tab__place .tabLabel {
  background-color: #fff;
  border: solid 1px #ccc;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0 10px 25px;
  order: -1;
  padding: 17px;
  position: relative;
  text-align: center;
  transition: ease .5s;
  width: -webkit-calc(100% / 3 - 20px);
  width: calc(100% / 3 - 20px);
}
.tab__place .tabBtn:checked + .tabLabel {
  background-color: #666;
  border: solid 1px #666;
  color: #fff;
  position: relative;
}
.tab__place .tabBtn + .tabLabel::after {
  border: solid 10px transparent;
  border-bottom: none;
  border-top: solid 10px #666;
  content: '';
  display: block;
  opacity: 0;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  transition: ease .5s;
}
.tab__place .tabBtn:checked + .tabLabel::after {
  opacity: 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>