編集履歴

質問編集履歴

コードを短くしました

2021/03/27 13:15

投稿

koki48

スコア3

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -98,322 +98,826 @@
-  <section class="concept">
-    <div class="container">
-      <h2 class="concept-ttl">
-        Concept
-      </h2>
-      <p class="concept-txt">
-        私たちShiroは、白いお花だけを取り扱うフラワーショップです<br class="txt-br">
-        色とりどりの花束も素敵だけれど、洗練された「白」の美しさを感じてほしい。<br class="txt-br">
-        「白」に対する愛から生まれた静寂な時間が流れる店へ、ぜひお越しください。
-      </p>
-      <div class="concept-img">
-        <img src="img/concept.png" alt="concept画像">
-      </div>
-    </div>
-  </section>
-  <section class="work">
-    <div class="container">
-      <h2 class="work-ttl">Work</h2>
-      <p class="work-txt">
-        オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br class="txt-br">
-        ウェディングやイベントの装花なども行なっています。 <br class="txt-br">
-        一人一人にあったご提案をさせていただきます。
-      </p>
-      <div class="work-contents-box">
-      <div class="work-content-box">
-        <div class="work-box">
-          <div class="work-img"><img src="img/work_gift.png" alt="花ブーケ画像"></div>
-          <div class="work-box-ttl">Gift</div>
-          <div class="work-box-txt">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</div>
-        </div>
-        <div class="work-box">
-          <div class="work-img"><img src="img/work_wedding.png" alt="花ブーケ画像"></div>
-          <div class="work-box-ttl">Wedding</div>
-          <div class="work-box-txt">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</div>
-        </div>
-      </div>
-      <div class="work-content-box padd-120">
-        <div class="work-box">
-          <div class="work-img"><img src="img/work_decoretion.png" alt="花ブーケ画像"></div>
-          <div class="work-box-ttl">Decoration</div>
-          <div class="work-box-txt">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</div>
-        </div>
-        <div class="work-box">
-          <div class="work-img"><img src="img/work_for_yourself.png" alt="花ブーケ画像"></div>
-          <div class="work-box-ttl">For yourself</div>
-          <div class="work-box-txt">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</div>
-        </div>
-      </div>
-    </div>
-    </div>
-  </section>
-  <section class="florist">
-    <div class="container">
-      <h2 class="florist-ttl">Florist</h2>
-      <p class="florist-txt">Shiro専属のフローリストたちをご紹介。 <br>
-        得意の分野であなたのオーダーを最大限に叶えます。</p>
-      <div class="florist-contents-box">
-        <div class="florist-content-box">
-          <figure class="florist-img"><img src="img/florist_shiyu.png" alt="女性花束画像"></figure>
-          <h3 class="florist-name">Shiyu</h3>
-          <p class="florist-txt">お花茶屋大学フラワーアレンジメント科<br>
-            を卒業後、さまざまな白い花を探すため<br>
-            に世界を一周し、Shiroの創業者となる。</p>
-        </div>
-        <div class="florist-content-box">
-          <figure class="florist-img"><img src="img/florist_mao.png" alt="男性画像"></figure>
-          <h3 class="florist-name">Mao</h3>
-          <p class="florist-txt">花の魅力に惹かれ、空間デザインの世界<br>
-            からフローリストの道を歩む。主に結婚<br>
-            式やイベントで使用するお花のディレク<br>
-            ション担当。</p>
-        </div>
-        <div class="florist-content-box">
-          <figure class="florist-img"><img src="img/florist_omichan.png" alt="女性画像"></figure>
-          <h3 class="florist-name">Omichan</h3>
-          <p class="florist-txt">フローリスト兼ガーデナーという特殊な<br>
-            経歴をもつ。豊富な知識と技術でお客様<br>
-            のオーダーを叶える。</p>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="shopinfo">
-    <div class="container">
-      <h2 class="shopinfo-ttl">Shop information</h2>
-      <p class="shopinfo-txt">Shiroの店舗情報をご紹介します。</p>
-      <div class="shopinfo-box">
-        <figure class="shopinfo-img"><img src="img/shop_information.png" alt="花画像"></figure>
-        <table class="shopInformation__table">
-          <tbody><tr>
-            <th class="shopInformation__table__heading">住所</th>
-            <td>〒810-0001<br>福岡県福岡市中央区天神0-0-0</td>
-          </tr>
-          <tr>
-            <th class="shopInformation__table__heading">電話番号</th>
-            <td>0120-000-000</td>
-          </tr>
-          <tr>
-            <th class="shopInformation__table__heading">営業時間</th>
-            <td>11:00-20:30<br>（定休日：水曜日）</td>
-          </tr>
-          <tr>
-            <th class="shopInformation__table__heading">アクセス</th>
-            <td>天神駅12a出口から徒歩6分<br>東京駅8b出口から徒歩12分</td>
-          </tr>
-        </tbody></table>
-      </div>
-    </div>
-  </section>
-  <section class="contact">
-    <div class="container">
-      <h2 class="contact-ttl">Contact us</h2>
-      <p class="contact-txt">イベントや結婚式でご利用する装花のご相談や、<br>
-        フラワーアレンジメントのご予約などはこちらからお問い合わせください。</p>
-        <a class="contact-btn" href="#">お問い合わせ</a>
-    </div>
-  </section>
-  <footer class="footer">
-    <p><small>Copyright © Shiro All Rights Reserved.</small></p>
-  </footer>
-    <!-- Optional JavaScript -->
-    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-    <script src="main.js"></script>
-    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> -->
-  </body>
-</html>
-CS
+css
+body {
+  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
+}
+a {
+  text-decoration: none;
+  color: #333;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+}
+.bg {
+  height: 620px;
+  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/header.png);
+  background-size: cover;
+  position: relative;
+  margin-bottom: 80px;
+}
+@media (max-width: 768px) {
+  .txt-br {
+    display: none;
+  }
+}
+.padd-120 {
+  margin-top: 120px;
+}
+@media (max-width: 768px) {
+  .padd-120 {
+    margin-top: 0;
+  }
+}
+.header {
+  height: 64px;
+  padding-top: 40px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.header-logo a {
+  font-size: 36px;
+  color: #fff;
+}
+.header-inner {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header-inner i {
+  color: white;
+}
+@media (max-width: 768px) {
+  .header-inner {
+    width: 90%;
+  }
+}
+.header-nav {
+  display: none;
+  position: fixed;
+  background-color: white;
+  text-align: center;
+  color: #000;
+  font-size: 18px;
+  line-height: 11vh;
+  z-index: 99;
+  opacity: 0.8;
+  height: calc(100vh - 64px);
+  width: 100vw;
+}
+.header li {
+  border: solid 1px #ccc;
+}
+.header-menu a:hover {
+  text-decoration: underline;
+}
+.burger-btn {
+  display: block;
+  width: 39px;
+  height: 39px;
+  position: relative;
+  z-index: 3;
+  border: none;
+}
+.bar {
+  width: 20px;
+  height: 1px;
+  display: block;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #fff;
+}
+.bar_top {
+  top: 10px;
+}
+.bar_mid {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.bar_bottom {
+  bottom: 10px;
+}
+.burger-btn.close .bar_top {
+  transform: translate(-50%, 10px) rotate(45deg);
+  transition: transform .3s;
+}
+.burger-btn.close .bar_mid {
+  opacity: 0;
+  transition: opacity .3s;
+}
+.burger-btn.close .bar_bottom {
+  transform: translate(-50%, -8px) rotate(-45deg);
+  transition: transform .3s;
+}
+.mv {
+  color: #fff;
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -30%);
+  transform: translate(-50%, -30%);
+}
+.mv-ttl {
+  font-size: 120px;
+  line-height: 1.4;
+}
+@media (max-width: 768px) {
+  .mv-ttl {
+    font-size: 110px;
+  }
+}
+.mv-subttl {
+  font-size: 16px;
+  text-align: center;
+}
+.concept {
+  text-align: center;
+  width: 100%;
+  background: linear-gradient(#fff 70%, #ededed 30%);
+  padding-bottom: 80px;
+  margin-bottom: 80px;
+}
+@media (max-width: 768px) {
+  .concept {
+    margin-bottom: 40px;
+  }
+  .concept .container {
+    width: 90%;
+    margin: 0 auto;
+  }
+  .concept-img img {
+    object-fit: cover;
+    height: 400px;
+    margin-bottom: 16px;
+  }
+}
+.concept-ttl {
+  font-size: 36px;
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+}
+.concept-ttl::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 40px;
+  height: 1px;
+  background: #2b2b2b;
+  transform: translateX(-50%);
+}
+.concept-txt {
+  font-size: 16px;
+  line-height: 1.4;
+  margin-bottom: 40px;
+}
+@media (max-width: 768px) {
+  .concept-txt {
+    text-align: left;
+  }
+}
+@media (max-width: 768px) {
+  .concept-txt-br {
+    display: none;
+  }
+}
+.work {
+  text-align: center;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .work {
+    padding: 0;
+    width: 90%;
+    margin: 0 auto;
+  }
+}
+.work-ttl {
+  font-size: 36px;
+  position: relative;
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+}
+.work-ttl::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 40px;
+  height: 1px;
+  background: #2b2b2b;
+  transform: translateX(-50%);
+}
+.work-txt {
+  font-size: 16px;
+  line-height: 1.4;
+  margin-bottom: 40px;
+}
+@media (max-width: 768px) {
+  .work-txt {
+    text-align: left;
+  }
+}
+.work-contents-box {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-content: space-between;
+  height: 1680px;
+}
+@media (max-width: 768px) {
+  .work-contents-box {
+    flex-direction: row;
+    margin-bottom: 20px;
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+    height: auto;
+  }
+}
+.work-content-box {
+  width: 420px;
+}
+.work-box {
+  margin-bottom: 80px;
+}
+.work-box-ttl {
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.7;
+}
+.work-box-txt {
+  line-height: 1.4;
+}
+.florist {
+  text-align: center;
+  width: 100%;
+  background: linear-gradient(#ededed 60%, #fff 40%);
+  padding-top: 40px;
+  margin-bottom: 120px;
+}
+@media (max-width: 768px) {
+  .florist {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+.florist-ttl {
+  font-size: 36px;
+  position: relative;
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+}
+.florist-ttl::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 40px;
+  height: 1px;
+  background: #2b2b2b;
+  transform: translateX(-50%);
+}
+.florist-txt {
+  font-size: 16px;
+  line-height: 1.4;
+  margin-bottom: 40px;
+}
+.florist-name {
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.7;
+}
+.florist-content-box {
+  width: calc(33.33333333% - 25px * 2 / 3);
+  margin-right: 30px;
+  text-align: left;
+}
+@media (max-width: 768px) {
+  .florist-content-box {
+    width: 100%;
+    text-align: center;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+.florist-contents-box {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .florist-contents-box {
+    flex-direction: column;
+  }
+}
+.headerColorScroll {
+  background-color: white;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+  z-index: 999;
+}
+js
+$(function () {
+    $(window).on("scroll", function () {
+      const sliderHeight = 640;
+      if (sliderHeight - 30 < $(this).scrollTop()) {
+        $(".header").addClass("headerColorScroll").css('padding-top','0');
+        $(".header-logo a").css("color",'#333');
+        $(".menu-btn i").css("color",'#333');
+      } else {
+        $(".header").removeClass("headerColorScroll");
+        $(".header-logo a").css("color",'#fff');
+        $(".menu-btn i").css("color",'#fff');
+      }
+    });
+  });
+  $('.burger-btn').on('click',function(){
+    $('.burger-btn').toggleClass('close');
+    $('.header-menu').fadeToggle(500);
+  });