JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石井花壇|温海温泉旅館【公式サイト】</title>
    <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
    <link rel="stylesheet" type="text/css" href="./css/destyle.css">
    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
    <!--flatpicker-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css">

    
</head>
<body>
    <header class="header">
        <div class="header-inner">
            <div class="header-left">
                <h1 class="logo">
                    <a href="../index.html">
                        <img class="header-logo" src="/img/top-header-logo.png" alt="">
                    </a>
                </h1>
                
                <nav class="nav nav-open drawer-nav">
                    <ul class="header-list">
                        <li class="header-item"> <a href="#">お部屋</a></li><!-- /.header-item -->
                        <li class="header-item"> <a href="../Menu/menu.html">お料理</a></li><!-- /.header-item -->
                        <li class="header-item"> <a href="../Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
                    </ul><!-- /.header-list -->
                </nav><!-- /.nav -->
            
            </div>
            <div class="header-right">
                <div class="header-link " id="js-modal">
                    <a class="calender-link js-modal-open" href="#">
                        <!-- <img src="./img/calender.png" alt="カレンダー"> -->
                        宿泊予約
                 ...

CSS

@charset "UTF-8";
html {
  font-size: 62.5%;
  max-height: 3200px;
}

body {
  font-size: 1.6rem;
  color: #000000;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.inner {
  max-width: 1180px;
  max-height: 1900px;
  margin: 0 auto;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
}

/* .sec-theme{
    margin: 0 auto;
    >img{
        display: block;
        width: 3.3%;
        height: 5.1%;
        margin: 0 auto;
        padding-top: 60px;
        padding-bottom: 20px;
    }

    .cmn-ttl{
        display: block;
        font-size: 3.6rem;
        color: $word-color;
        text-align: center;
        margin: 0 auto;
    }
}

//共通リンク
.cmn-link{
    background-color: $bg-white;
    width: 22%;
    height: calc(54px/545px*100%);
    border: 1px solid #707070;
    font-size: 1.6rem;
    text-align: center;
    @include mr {
        margin: 0 auto;
    //}
} */
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  max-height: 80px;
  background-color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 20px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header {
    position: fixed;
    top: 0;
    padding: 15px 20px;
  }
}

@media screen and (max-width: 599px) {
  .header {
    position: fixed;
    top: 0;
    padding: 8px 10px;
    max-height: 60px;
  }
}

.header-inner {
  max-width: 1880px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.header-left {
  display: -webkit-box;
 ...

JavaScript

//FvのShow,Zoom
$(function () {
  const slideItem = $('.slide_item','#slide_wrap');
  const totalNum = slideItem.length - 1;           //スライドの枚数を取得
  const fadeTime = 2000;                           //フェードインの時間
  const intervalTime = 5000;                      //クロスフェードさせるまでの間隔
  let actNum = 0;                                 //現在アクティブな番号
  //スライド一枚目のフェード
  slideItem.get(0).classList.add('show', 'zoom');
  //処理を繰り返す
  setInterval(() => {
      let nowslide = slideItem.get(actNum);
      let nextslide = slideItem.get(actNum < totalNum ? ++actNum : actNum = 0);
      //.show削除でフェードアウト
      nowslide.classList.remove('show');
      nextslide.classList.add('show', 'zoom');
      //フェードアウト完了後、.zoom削除
      setTimeout(() => {
          nowslide.classList.remove('zoom');
      }, fadeTime);
  }, intervalTime);
});

/* header-top.css */

$(function(){

  let header     = $('.header');
  let Logo = $('.header-logo');
  let item    = $('.header-item');
  let drawer    = $('.drawer-nav');
  let line    = $('.line');
  $(window).scroll(function(){
    if($(this).scrollTop()>=100){
      //$("#logo").attr("src", "")

      //header-bgを白に変更
      header.css('background-color','#fff');
      //logoを変更
      Logo.attr('src', '/img/sub-header-logo.png');
      
      //aタグで囲った文字を黒に変更
      item.find('a').css('color', '#000');
        //ハンバーガーアイコンを黒に変更
        $('head').append('<style>.line { background: #000; } </style>');
        //$('head').append('<style>.drawer-hamburger-icon::after { background: #000; } </style>');
        line.css('background-color','#000');
        if (window.matchMedia( "(min-width: 1179px)" ).matches) {
          drawer.css('background-color','transparent');
         } else {
            drawer.css('background-color','#fff');
          }
        // ドロワーの色を白に
        } else {
       
          // 画面がトップから100px以下の時は、上記と逆の処理を行う
          header.css('background-color','transparent');
          Logo.attr('src', '/img/top-header-logo.png');
         ...