タブ切替

pure css

クリックでメニュー上部設置ID {tab_head} まで移動

<div class="tab_wrap" id="tab_head">
  <label class="tab_items tab1" onclick="jumpTo('tab_head')">
    <span>menu A</span>
    <input id="tab_01" type="radio" name="item" checked="" />
  </label>
  <div class="tab_content" id="tab_01_content">
    <div id="Tab1">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</div>
  </div>

  <label class="tab_items tab2" onclick="jumpTo('tab_head')">
    <span>menu B</span>
    <input id="tab_02" type="radio" name="item" />
  </label>
  <div class="tab_content" id="tab_02_content">
    <div id="Tab2">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</div>
  </div>

  <label class="tab_items tab3" onclick="jumpTo('tab_head')">
    <span>menu C</span>
    <input id="tab_03" type="radio" name="item" />
  </label>
  <div class="tab_content" id="tab_03_content">
    <div id="Tab3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
</div>

.tab_wrap label.tab_items:has(input:checked) {
  pointer-events: none;
  background-color: #4f7959;
  color: #fff;
}

.tab_wrap {
  width: min(calc(100% - 32px), 1080px);
  margin-inline: auto;
  display: grid;
}

@media screen and (min-width: 736.1px) {
  .tab_wrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;

    & .tab1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    & .tab2 {
      grid-area: 1 / 2 / 2 / 3;
    }

    & .tab3 {
      grid-area: 1 / 3 / 2 / 4;
    }

    & .tab_content {
      grid-area: 2 / 1 / 3 / 4;
    }
  }
}

@media screen and (max-width: 736px) {
  .tab_wrap {
    grid-template-rows: repeat(6, auto);
    gap: 10px;

    & .tab1 {
      order: 1;
    }

    & .tab2 {
      order: 3;
    }

    & .tab3 {
      order: 5;
    }

    & #tab_01_content {
      order: 2;
    }
    & #tab_02_content {
      order: 4;
    }
    & #tab_03_content {
      order: 6;
    }
  }
}

.tab_items {
  font-weight: 700;
  background-color: #ccc;
  padding: 1em;
  line-height: 1;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media screen and (max-width: 736px) {
  .tab_items {
    gap: 0.5em;
    justify-items: center;

    &::after {
      content: "";
      display: inline-block;
      text-align: center;
      background: #c00;
      height: 13px;
      width: 25px;
      clip-path: polygon(10% 0, 0 10%, 50% 100%, 100% 10%, 90% 0, 50% 70%);
      transition: 0.3s all;
    }

    &:has(input:checked)::after {
      background: #eee;
      transform: rotate(180deg);
    }
  }
}

input {
  display: none;
}

#tab_01_content,
#tab_02_content,
#tab_03_content {
  display: none;
}

.tab1:has(#tab_01:checked) ~ #tab_01_content,
.tab2:has(#tab_02:checked) ~ #tab_02_content,
.tab3:has(#tab_03:checked) ~ #tab_03_content {
  display: block;
  background: #ddd;
  padding: 1em;
  border-top: #4f7959 1px dashed;
}

js

js / jQueryで制御

<button class="tablink active tab1" onclick="openTab('tab1')">

function openTab(tabName) {
  let i, tab_content, tablinks;
  tab_content = document.getElementsByClassName("tab_content");
  for (i = 0; i < tab_content.length; i++) {
    tab_content[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

jQuery版
<button class="tablink active tab1" onclick="openTab('tab1', event)">

function openTab(tabName, event) {
  $(".tab_content").hide();
  $(".tablink").removeClass("active");
  $("#" + tabName).show();
  $(event.currentTarget).addClass("active");
}

css
@media (any-hover: hover) {
  .tab_wrap .tablink {
    color: #000;
    transition: 0.3s filter ease-in-out;
  }
  .tab_wrap .tablink:hover {
    filter: invert();
  }
}
.tab_wrap .tablink.active {
  pointer-events: none;
  background-color: #4f7959;
  color: #fff;
}

.tab_wrap {
  width: min(calc(100% - 32px), 1080px);
  margin-inline: auto;
  display: grid;
}

.tab_content {
  display: block;
  background: #ddd;
  padding: 1em;
  border-top: #4f7959 1px dashed;
}

@media screen and (min-width: 736.1px) {
  .tab_wrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;

    & .tab1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    & .tab2 {
      grid-area: 1 / 2 / 2 / 3;
    }

    & .tab3 {
      grid-area: 1 / 3 / 2 / 4;
    }

    & .tab_content {
      grid-area: 2 / 1 / 3 / 4;
    }
  }
  .tablink {
    font-size: 14px;
    font-weight: 700;
    background-color: #ccc;
    padding: 1em;
    line-height: 1;
    display: grid;
    place-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
  }
}

@media screen and (max-width: 736px) {
  .tab_wrap {
    grid-template-rows: repeat(4, auto);
    gap: 10px;

    & .tab1 {
      order: 1;
    }

    & .tab2 {
      order: 3;
    }

    & .tab3 {
      order: 5;
    }

    & #tab1 {
      order: 2;
    }
    & #tab2 {
      order: 4;
    }
    & #tab3 {
      order: 6;
    }
  }
}

@media screen and (max-width: 736px) {
  .tablink {
    gap: 0.5em;
    justify-items: center;
    display: grid;
    padding: 1em;

    &::after {
      content: "";
      display: inline-block;
      text-align: center;
      background: #c00;
      height: 13px;
      width: 25px;
      clip-path: polygon(10% 0, 0 10%, 50% 100%, 100% 10%, 90% 0, 50% 70%);
      transition: 0.3s all;
    }

    &.active::after {
      background: #eee;
      transform: rotate3d(1, 0, 0, 360deg);
      -webkit-transform: rotate3d(1, 0, 0, 180deg);
    }
  }

  #tab1,
  #tab2,
  #tab3 {
    display: none;
  }
}

ハンバーガー

右からスライド
jQuery版
領域外クリックで閉じる

document.addEventListener("DOMContentLoaded", function () {
  // sp_barがクリックされたときの処理
  const spBar = document.querySelector(".sp_bar");
  const menuList = document.querySelector(".menu_list");
  const ohWrap = document.querySelector(".oh_wrap");

  spBar.addEventListener("click", function () {
    spBar.classList.toggle("active");
    menuList.classList.toggle("active");
    ohWrap.classList.toggle("active");
  });

  // bt_closeがクリックされたときの処理
  const btClose = document.querySelector(".bt_close");

  if (btClose) {
    btClose.addEventListener("click", function () {
      if (spBar.classList.contains("active")) {
        menuList.classList.toggle("active");
        spBar.classList.toggle("active");
        ohWrap.classList.toggle("active");
      }
    });
  }

  // ドキュメント全体でクリックされたときの処理
  document.addEventListener("click", function (e) {
    if (!e.target.closest("header") && !e.target.closest(".sp_bar")) {
      if (spBar.classList.contains("active")) {
        spBar.classList.remove("active");
        menuList.classList.remove("active");
        ohWrap.classList.remove("active");
      }
    }
  });
});

@layer oh_wrap {
  a {
    text-decoration: none;
    color: inherit;
  }

  header {
    width: 100%;
  }

  header h1 {
    margin: 0;
  }

  @media screen and (max-width: 768px) {
    .oh_wrap {
      height: 100dvh;
    }

    .oh_wrap.active {
      background: rgba(0, 0, 0, 0.2);

      transition: all 0.3s 0.31s ease-in-out;
    }

    header {
      position: relative;
      background: #fff;
      z-index: 2;

      &.header_cont {
        width: 100%;
        display: grid;
        align-items: center;
      }
      & h1 {
        font-size: clamp(14px, 4.3vw, 18px);
        width: calc(100% - 60px);
        height: 60px;
        display: flex;
        align-items: center;
        padding-left: 1em;
        z-index: 6;
        position: relative;
        color: #fff;
        background: #000;
        mix-blend-mode: difference;
      }

      & .sp_bar {
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 100%;
        background: #112;
        line-height: 0;
        display: grid;
        place-content: center;
        z-index: 4;
        cursor: pointer;

        & .spans_wrap {
          width: 32px;
          height: 34px;
          display: flex;
          flex-flow: row wrap;
          align-items: center;
        }

        & span {
          width: 100%;
          height: 2px;
          background: #fff;
          transition: all 0.3s ease-in-out;
          transform-origin: center left;
        }

        &.active span:nth-child(1) {
          transform: translate(3px, 0.5px) rotate(45deg);
        }
        &.active span:nth-child(2) {
          transform: scale(0.1);
          opacity: 0;
        }

        &.active span:nth-child(3) {
          transform: translate(2.7px, 0.3px) rotate(-45deg);
        }
      }

      .menu_list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transform: translateX(100vw);
        background-color: #112;
        transition: ease 0.5s;
        padding: 80px 16px 40px 16px;

        & a {
          color: #fff;
        }

        &.active {
          transform: translateX(0);
        }

        & .menu_cont {
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          border-top: 1px solid rgba(255, 255, 255, 0.6);
        }

        & .menu_cont div {
          position: relative;
        }

        & .menu_cont div a {
          color: #fff;
          padding: 1em;
          border-bottom: 1px solid rgba(255, 255, 255, 0.6);
          width: 100%;
          display: grid;
          align-items: center;
          grid-template-columns: 1fr 0.3lh;
          column-gap: 1em;
        }

        & .bt_close {
          margin: 40px auto 0;
          border: 1px solid rgba(255, 255, 255, 0.6);
          background: #111;
          padding: 1em 1.7em 1em 2em;
          line-height: 1;
          width: fit-content;
          cursor: pointer;
          display: grid;
          align-items: center;
          grid-template-columns: 1fr 16px;
          column-gap: 1em;

          & span {
            color: #fff;
          }

          &::after {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            background: #fff;
            clip-path: polygon(5% 0, 0 4%, 45% 50%, 0 95%, 5% 100%, 50% 55%, 95% 100%, 100% 95%, 55% 50%, 100% 5%, 95% 0, 50% 45%);
          }
        }

        .pacmp {
          display: grid;
          align-items: center;
          grid-template-columns: 1fr 0.3lh;
          column-gap: 1em;
          width: fit-content;
          background: #fff;
          padding: 1em 2em;
          margin: 2em auto 0;
          border-radius: 10px;
          cursor: pointer;
          & a {
            color: inherit;
          }
        }
      }
    }
  }

  .arrow::after {
    content: "";
    display: inline-block;
    background: #fff;
    height: 0.4lh;
    width: 0.3lh;
    clip-path: polygon(0 10%, 10% 0, 100% 50%, 10% 100%, 0 90%, 70% 50%);
  }

  .arrow.ar_bk::after {
    background: #111;
  }

  @media (any-hover: hover) {
    .arrow:hover::after {
      transform: translateX(5px);
    }
  }

  @media screen and (min-width: 768.1px) {
    header {
      width: min(1080px, 96%);
      height: 86px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      margin: 0 auto;
      gap: 40px;

      & h1 {
        font-size: 16px;
        margin-bottom: 0;
      }

      & .header_cont {
        width: 100%;
      }

      & .sp_bar {
        display: none;
      }

      & .menu_list {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto;
      }

      & .arrow::after {
        display: none;
      }
      & .menu_list .menu_cont {
        display: grid;
        grid-template-columns: auto auto 1fr;
        font-size: 14px;
        gap: 40px;
      }

      & .menu_list .bt_close,
      & .menu_list .menu_cont div:first-child {
        display: none;
      }

      & .pacmp {
        font-size: 14px;
        width: fit-content;
      }
    }
  }
}

背景変更等

背景変更

@layer oh_wrap {
  a {
    te.sam43_wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1em;

  & .sam43_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    background-color: #f5f5f5;
    border-left: 3px solid #f5f5f5;
    position: relative;
    row-gap: 0;

    & .h5 {
      padding: 1em;
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      display: grid;
      align-items: center;
    }
    & .image {
      background: #333;
      padding: 4em 0;
      margin-left: -3px;
      display: grid;
      place-content: center;
    }
    & .image:before {
      content: "Photo";
      display: inline-block;
      color: #fff;
    }
    & .copy {
      font-size: 16px;
      padding: 1em 1em 1.6em;
    }

    & .link label {
      display: block;
      position: absolute;
      inset: 0;
      cursor: pointer;
    }
    & input {
      display: none;
    }
    &:has(input:checked) {
      border-left: 3px solid rgb(216, 0, 0);
      background: rgb(225, 199, 199);
    }
    &:has(input:checked):after {
      position: absolute;
      border-left: 3px solid #c00;
      content: "";
    }
  }
}

ナビ右よせ : flex

margin-left: auto; が肝

.sam48 {
  display: flex;
  align-items: center;

  & h1 {
    display: block;
    font-size: 2em;
    font-weight: 700;
  }

  & nav {
    margin-left: auto;
  }

  & nav ul {
    display: flex;
    gap: 30px;
    padding-left: 2em;
  }
}

SNSボタンサンプル

<div class="sns">
  <a class="sns_btn btn_facebook" href="" target="_blank">
    <svg viewBox="0 0 30.9 58">
      <path d="M23.7,58.9V33.5H14.6V23h9.1V15C23.7,5.9,29.1.9,37.4.9a55,55,0,0,1,8,.7v8.9H40.9c-4.5,0-5.9,2.8-5.9,5.7V23H45L43.4,33.5H35V58.8Z" transform="translate(-14.6 -0.9)"></path>
    </svg>
  </a>
  <a class="sns_btn btn_X" href="http://twitter.com/" target="_blank">
    <svg viewBox="0.254 0.25 500 452">
      <path d="M394.033.25h76.67L303.202 191.693l197.052 260.511h-154.29L225.118 294.205 86.844 452.204H10.127l179.16-204.77L.254.25H158.46l109.234 144.417zm-26.908 406.063h42.483L135.377 43.73h-45.59z" transform="translate(-0.4 -5.7)"></path>
    </svg>
  </a>
  <a class="sns_btn btn_line" href="https://timeline.line.me/" target="_blank">
    <svg viewBox="0 0 58 20.3">
      <path class="cls-1" d="M14.1,35.4H5.9V20.7a.8.8,0,0,0-.8-.9h-3a.9.9,0,0,0-.8.9h0V39.3a1.4,1.4,0,0,0,.2.6h0l.6.2h12a.9.9,0,0,0,.8-.8v-3a1,1,0,0,0-.8-.9Zm4.2-15.6h3a.8.8,0,0,1,.8.9V39.3a.8.8,0,0,1-.8.8h-3a.8.8,0,0,1-.8-.8V20.7A.8.8,0,0,1,18.3,19.8Zm20.6,0h3a.8.8,0,0,1,.8.9V39.3a.8.8,0,0,1-.8.8H38.5l-.3-.2L29.7,28.2V39.3a.9.9,0,0,1-.8.8h-3a.8.8,0,0,1-.8-.8V20.7a.8.8,0,0,1,.8-.9h3.3a.1.1,0,0,1,.1.1h.3l8.5,11.5v-11A.9.9,0,0,1,38.9,19.8Zm20.4,3.9a.9.9,0,0,1-.8.8H50.3v3.2h8.2a.8.8,0,0,1,.8.8v3a.9.9,0,0,1-.8.8H50.3v3.2h8.2a.8.8,0,0,1,.8.8v3a.9.9,0,0,1-.8.8h-12l-.6-.2h0a.7.7,0,0,1-.2-.6V20.7c0-.2,0-.5.2-.6h0a.9.9,0,0,1,.6-.3h12a.9.9,0,0,1,.8.9v3Z" transform="translate(-1.3 -19.8)"></path>
    </svg>
  </a>
  <a class="sns_btn btn_instagram" href="https://www.instagram.com/" target="_blank">
    <svg viewBox="-1 -1 18 18">
      <path class="cls-1" d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
    </svg>
  </a>
  <a class="sns_btn btn_email" href="" target="_blank">
    <svg viewBox="0 0 60 45">
      <path class="cls-1" d="M0,7.5A7.6,7.6,0,0,1,7.5,0h45A7.6,7.6,0,0,1,60,7.5v30A7.6,7.6,0,0,1,52.5,45H7.5A7.6,7.6,0,0,1,0,37.5ZM7.5,3.8A3.6,3.6,0,0,0,3.8,7.5v.8L30,24.1,56.2,8.3V7.5a3.6,3.6,0,0,0-3.7-3.7Zm48.7,8.9L38.6,23.3,56.2,34.1Zm-.1,25.8L35,25.5l-5,2.9-5-2.9L3.9,38.5a3.7,3.7,0,0,0,3.6,2.7h45A3.6,3.6,0,0,0,56.1,38.5ZM3.8,34.1,21.4,23.3,3.8,12.7Z"></path>
    </svg>
  </a>
</div>

.sam49 {
  & .sns {
    display: flex;
    margin-left: auto;

    & .sns_btn {
      display: inline-block;
      padding: 0.5lh;
      line-height: 1;
      transition: all 0.3s;
    }

    & .sns_btn svg {
      height: 1.7lh;
      width: 1.7lh;
      fill: #fff;
    }

    & .sns_btn:hover {
      transform: scale(1.2);
      filter: invert();
      border-radius: 50%;
    }

    & .btn_facebook {
      background: #3b5998;
    }

    & .btn_X {
      background: #111;
    }

    & .btn_line {
      background: #00bb03;
    }

    & .btn_email {
      background: #f07e2b;
    }

    & .btn_instagram {
      background: #bc2a8d;
    }
  }
}