メニュー

タブ切替

ハンバーガー

背景変更等

タブ切替

pure css

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

menu A

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

menu B

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

menu C

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<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で制御

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ボタン呼び出し
<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版
領域外クリックで閉じる

js版はこちら

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");
      }
    }
  });
});

ChatGPTはすごい

@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;
      }
    }
  }
}

$(".sp_bar").click(function () {
  $(this).toggleClass("active");
  $(".menu_list").toggleClass("active");
  $(".oh_wrap").toggleClass("active");
});
$(".bt_close").click(function () {
  if ($(".sp_bar").hasClass("active")) {
    $(".menu_list").toggleClass("active");
    $(".sp_bar").toggleClass("active");
    $(".oh_wrap").toggleClass("active");
  }
});
$(document).on("click", function (e) {
  if (!$(e.target).closest("header").length && !$(e.target).closest(".sp_bar").length) {
    if ($(".sp_bar").hasClass("active")) {
      $(".sp_bar").removeClass("active");
      $(".menu_list").removeClass("active");
      $(".oh_wrap").removeClass("active");
    }
  }
});

背景変更等

背景変更

クリックで背景を変更

TITLE

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

TITLE

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

TITLE

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

@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; が肝

LOGO

.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">
    X path ...
  </a>
  <a class="sns_btn btn_line" href="https://timeline.line.me/" target="_blank">
    <svg>
      line path ...
    </svg>
  </a>
  <a class="sns_btn btn_instagram" href="https://www.instagram.com/" target="_blank">
    <svg>
      instagram path ...
    </svg>
  </a>
  <a class="sns_btn btn_email" href="" target="_blank">
   <svg>
      email path ...
    </svg>
  </a>
</div>

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

    & .sns_btn {
      display: inline-block;
    }

    & .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;
    }
  }
}