JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>石井花壇|温海温泉旅館【公式サイト】</title>
	<meta content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。" name="description">
	<link href="./css/destyle.css" rel="stylesheet">
	<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"><!--flatpicker-->
	<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/flatpickr">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js">
	</script><!-- 日本語化 -->
	<link href="./css/style.css" rel="stylesheet">
</head>
<body>
	<div class="body-wrapper"> 
		<header class="header">
			<div class="header-inner">
				<div class="header-left">
					<h1 class="logo"><a href="#"><img alt="" class="header-logo" src="/img/top-header-logo.png"></a></h1>
					<nav class="nav drawer-nav">
						<ul class="header-list">
							<li class="header-item">
								<a href="./Room/room.html">お部屋</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="カレンダー"> -->
						宿泊予約</a>
					</div><!-- /.header-link -->
					<button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
				</div><!-- /.header-right -->
			</div><!-- /.header-inner -->
		</header><!--...

CSS

@charset "UTF-8";
.body-wrapper {
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  color: #000000;
  min-width: 100vw;
}

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

a {
  text-decoration: none;
}

li {
  list-style: none;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  section {
    margin-top: 60px;
  }
}

@media screen and (max-width: 599px) {
  section {
    margin-top: 60px;
  }
}

.inner {
  max-width: 1180px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .inner {
    padding: 0 25px;
  }
}

@media screen and (max-width: 599px) {
  .inner {
    padding: 0 15px;
  }
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  /*  -webkit-box-sizing: content-box;
    box-sizing: content-box; */
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .wrapper {
    padding: 0px 20px;
  }
}

@media screen and (max-width: 599px) {
  .wrapper {
    padding: 0 20px;
  }
}

.sec-theme {
  margin: 0 auto;
}

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

.sec-theme .cmn-ttl {
  display: block;
  font-size: 3.6rem;
  color: #000000;
  text-align: center;
  margin: 0 auto;
}

.cmn-link {
  background-color: #ffffff;
  width: 40%;
  height: calc(54px/545px*100%);
  border: 1px solid #707070;
  font-size: 1.6rem;
  text-align: center;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .cmn-link {
    margin-top: 50px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 599px) {
  .cmn-link {
    width: 100%;
    margin-top: 35px;
    margin: 0 auto;
  }
}

/*   height: 100%;
    min-height: 100vh;
    padding: 0 50px;
    background-color: #eee;
    transition: all .5s;
    display: flex;
    flex-direction: column;
    justify-content: center; */
.header {
  position: fixed;
  top: 0;
 ...

JavaScript

/* 360未満のwindow responsive */
!(function () {
  const viewport = document.querySelector('meta[name="viewport"]');
  function switchViewport() {
    const value =
      window.outerWidth > 360
        ? 'width=device-width,initial-scale=1'
        : 'width=360';
    if (viewport.getAttribute('content') !== value) {
      viewport.setAttribute('content', value);
    }
  }
  addEventListener('resize', switchViewport, false);
  switchViewport();
})();

//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>');
       ...