見出し画像

Webデザイン・マーケティング課 授業35,36,37日目

いしかわ

レスポンシブサイトの授業が終わりました。コードだけ紹介。

（今日は3日分です）

■HTML完成形



<!DOCTYPE html>
<html lang="ja">

<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>洋菓子店CHALON</title>

   <link rel="stylesheet"
       href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
   <link rel="stylesheet" href="css/common/reset.css">
   <link rel="stylesheet" href="css/common/common.css">
   <link rel="stylesheet" href="css/page/top.css">

</head>

<body id="top">
   <header>
       <div class="inner">
           <h1 class="logo"><a href="#"><img src="img/logo.png" alt="洋菓子店CHALON"></a></h1>
           <div class="menu_btn">
               <span></span>
               <span></span>
               <span></span>
           </div>
           <nav>
               <ul class="menu_body">
                   <li><a href="#">当店について</a></li>
                   <li><a href="#">メニュー</a></li>
                   <li>
                       <a href="#">お菓子教室</a>
                       <ul>
                           <li><a href="#">ご参加の流れ</a></li>
                           <li><a href="#">参加者の声</a></li>
                           <li><a href="#">お申込み</a></li>
                       </ul>
                   </li>
               </ul>
           </nav>
       </div>
   </header>

   <div class="key">
       <div class="inner">
           <div class="sp">
               <img src="img/logo_white.png" alt="">
           </div>
           <div class="pc">
               <p>
                   美味しいケーキを<br>
                   一人でも多くのお客様に<br>
                   召し上がっていただきたい<br>
                   <span>それがCHALONの想いです</span>
               </p>
           </div>
       </div>
   </div>

   <div class="scroll">
       <p>
           <span class="material-symbols-outlined">
               expand_more
           </span>
       </p>
       <p>scroll</p>
   </div>

   <main>
       <section class="top_about row">
           <div class="inner">
               <h2 class="title">CHALONについて</h2>
               <p>
                   オープンして１０年、振りかえれば長い道のりでした。 それは、お客さまのよろこぶ顔を思い浮かべながら進んできた一歩一歩の積みかさね。 変わらない、味とこだわり。進化しつづける、お客様へのサービス。
                   どちらも大切にしてきました。 これからもCHALONは、お客様の心に懐かしく残る様な、そんな洋菓子店であり続けます。
               </p>
               <p class="btn"><a href="#">CHALONについてもっと見る</a></p>
           </div>
       </section>
       <section class="top_menu row">
           <div class="inner">
               <h2 class="title">メニュー</h2>
               <div>
                   <a href="#">
                       <figure>
                           <img src="img/menu_cake01.jpg" alt="モンブラン">
                           <figcaption>モンブラン</figcaption>
                       </figure>
                   </a>
                   <a href="#">
                       <figure>
                           <img src="img/menu_cake02.jpg" alt="ナッツのケーキ">
                           <figcaption>ナッツのケーキ</figcaption>
                       </figure>
                   </a>
                   <a href="#">
                       <figure>
                           <img src="img/menu_cake03.jpg" alt="ドーナツ">
                           <figcaption>ドーナツ</figcaption>
                       </figure>
                   </a>
                   <a href="#">
                       <figure>
                           <img src="img/menu_cake04.jpg" alt="ショートケーキ">
                           <figcaption>ショートケーキ</figcaption>
                       </figure>
                   </a>
               </div>
               <p class="btn"><a href="#">メニュー一覧</a></p>
           </div>
       </section>
       <section class="top_lesson row">
           <div class="inner">
               <h2 class="title">お菓子教室について</h2>
               <div>
                   <p><img src="img/about04.jpg" alt="お菓子教室について"></p>
                   <p>
                       CHALONでは、毎月第１・第２土曜日に、ご家族で参加できるお菓子教室を開催しています。<br>
                       当店の職人が、一から丁寧にレクチャーしますので、小さいお子さんでも安心して参加していただけます。<br>
                       家族の楽しい思い出作りに、是非御参加ください。

                   </p>
               </div>
               <p class="btn"><a href="#">お菓子教室についてもっと見る</a></p>
           </div>
       </section>
       <div class="bottom_contents row pb0">
           <div class="inner">
               <section class="top_voice">
                   <h2 class="title">お菓子教室<span class="break">参加者の声</span></h2>
                   <dl>
                       <dt><img src="img/voice01.jpg" alt="参加者の声"></dt>
                       <dd>
                           <p>2022年5月11日</p>
                           <p>田中さんご家族</p>
                           <p>とても楽しかったです。子供たちも夢中で作っていました。</p>
                       </dd>
                   </dl>
                   <p class="btn"><a href="#">参加者の声をもっと見る</a></p>

               </section>
               <section class="top_info">
                   <h2 class="title">CHALONからの<span class="break">お知らせ</span></h2>
                   <dl>
                       <dt><time datetime="2022-05-11">2022年5月11日</time></dt>
                       <dd><a href="#">お知らせテキストお知らせテキストお知らせテキスト</a></dd>

                       <dt><time datetime="2022-05-09">2022年5月9日</time></dt>
                       <dd><a href="#">お知らせテキストお知らせテキストお知らせテキスト</a></dd>
                       <dt><time datetime="2022-04-11">2022年4月11日</time></dt>
                       <dd><a href="#">お知らせテキストお知らせテキストお知らせテキスト</a></dd>
                       <dt><time datetime="2022-03-11">2022年3月11日</time></dt>
                       <dd><a href="#">お知らせテキストお知らせテキストお知らせテキスト</a></dd>

                   </dl>
                   <p class="btn"><a href="#">お知らせ一覧</a></p>
               </section>
           </div>
       </div>
   </main>

   <footer>
       <div class="inner">
           <p class="footer_logo"><img src="img/logo_white.png" alt=""></p>
           <div class="footer_wrap">
               <div class="footer_left">
                   <ul>
                       <li><a href="#">当店について</a></li>
                       <li><a href="#">メニュー</a></li>
                       <li>
                           <a href="#">お菓子教室</a>
                           <ul>
                               <li><a href="#">ご参加の流れ</a></li>
                               <li><a href="#">参加者の声</a></li>
                               <li><a href="#">お申込み</a></li>
                           </ul>
                       </li>
                   </ul>
               </div>
               <div class="footer_right">
                   <ul>
                       <li><a href="#"><img src="img/icon_fb.png" alt=""></a></li>
                       <li><a href="#"><img src="img/icon_tw.png" alt=""></a></li>
                       <li><a href="#"><img src="img/icon_insta.png" alt=""></a></li>
                   </ul>
                   <dl>
                       <dt>Address</dt>
                       <dd>
                           <address>
                               〒160-0005<br>
                               東京都新宿区愛住町22<br>
                               第3山田ビル1F
                           </address>
                       </dd>
                   </dl>
               </div>
           </div>
           <p class="copy"><small>&copy;CHALON</small></p>
       </div>
   </footer>

   <p class="to_top">
       <a href="#top">
           <span class="material-symbols-outlined">
               expand_more
           </span>
       </a>
   </p>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="js/main.js"></script>
</body>

</html>


■CSS完成形

common.css

@charset "UTF-8";
/*
主たるブレイクポイント
sp 599まで
tablet 600-1024
pc 1025-
*/


/*==============
全体の設定
==============*/
html {
   font-size: 62.5%;
   scroll-behavior: smooth;
}


body {
   font-size: 1.6rem;
   font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   line-height: 2;
   color: #333;
}

a {
   color: #f77237;
}

.inner {
   padding-left: 5%;
   padding-right: 5%;
   max-width: 1000px;
   margin-right: auto;
   margin-left: auto;
}

.title {
   text-align: center;
   font-size: 2.6rem;
   margin-bottom: 30px;
   line-height: 1;
}

.btn a {
   border: 1px solid #3cad5a;
   width: 270px;
   display: block;
   color: #3cad5a;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   line-height: 70px;
}

.break {
   display: inline-block;
}

.pb0 {
   padding-bottom: 0 !important;
}

@media screen and (min-width:1025px) {
   a:hover {
       opacity: 0.6;
   }

   .inner {
       padding-left: 0;
       padding-right: 0;
   }

   .btn a:hover {
       background-color: #3cad5a;
       opacity: 1;
       color: #fff;
   }
}

/*======min-width:1025px========*/


/*===================
ヘッダー
====================*/
header {
   padding-top: 20px;
   position: sticky;
   top: 0;
   background-color: rgba(255, 255, 255, 0.5);
}

header .inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header nav {
   opacity: 0;
   visibility: hidden;
   position: fixed;
   background-color: #faebdf;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   padding-top: 64px;
   padding-left: 32px;
   padding-right: 32px;
   transition: 0.5s;
}

header.on nav {
   opacity: 1;
   visibility: visible;
}

header nav .menu_body {
   line-height: 6rem;
   font-size: 3rem;
}

header nav .menu_body a {
   color: #666666;
   display: block;
}

header nav .menu_body>li:not(:last-child) {
   border-bottom: 1px solid #666666;
}

header nav .menu_body>li ul {
   font-size: 2rem;
   padding-left: 3rem;
   border-top: 1px solid #666666;
}

header nav .menu_body>li ul li {
   border-bottom: 1px dotted #666666;
}

header .menu_btn {
   width: 24px;
   height: 24px;
   z-index: 100;
}

header .menu_btn span {
   display: block;
   height: 2px;
   width: 100%;
   background-color: #333;
   transition: 0.3s;
}

header .menu_btn span:nth-child(2) {
   transform: translateY(9px);
}

header .menu_btn span:nth-child(3) {
   transform: translateY(18px);
}

header.on .menu_btn span:nth-child(1) {
   transform: translateY(11px) rotate(45deg);
}

header.on .menu_btn span:nth-child(2) {
   display: none;
}

header.on .menu_btn span:nth-child(3) {
   transform: translateY(9px) rotate(-45deg);
}

@media screen and (min-width:1025px) {
   header .menu_btn {
       display: none;
   }

   header nav {
       opacity: 1;
       visibility: visible;
       position: static;
       width: auto;
       height: auto;
       background-color: transparent;
       padding-top: 0;
       padding-left: 0;
       padding-right: 0;
   }

   header nav .menu_body {
       line-height: 2;
       font-size: 1.6rem;
       display: flex;
   }

   header nav .menu_body a {
       color: #f77237;
   }

   header nav .menu_body>li {
       margin-left: 30px;
   }


   header nav .menu_body>li:not(:last-child) {
       border-bottom: none;
   }

   header nav .menu_body>li ul {
       font-size: 1.6rem;
       padding-left: 0;
       border-top: none;
       display: none;
       position: absolute;
   }

   header nav .menu_body>li:hover ul {
       display: block;
   }

   header nav .menu_body>li ul li {
       border-bottom: none;
   }
}

/*======min-width:1025px========*/


/*===================
フッター
====================*/
footer {
   margin-top: 150px;
   background-color: #f77237;
   padding-top: 30px;
}

footer a {
   color: #fff;
}

footer .footer_logo {
   text-align: center;
   margin-bottom: 30px;
}

footer .footer_wrap {
   display: flex;
   flex-direction: column-reverse;
}

footer .footer_right ul {
   display: flex;
   justify-content: center;
}

footer .footer_right ul li:nth-child(2) {
   margin-left: 20px;
   margin-right: 20px;
}

footer .footer_right dl {
   color: #fff;
   margin-bottom: 30px;
}

footer .footer_right dl dt {
   border-bottom: 1px solid #fff;
}


footer .footer_left {
   margin-bottom: 30px;
}

footer .footer_left>ul {
   font-size: 3rem;
   line-height: 6rem;
   border-top: 1px solid #fff;
}

footer .footer_left>ul>li:not(:last-child) {
   border-bottom: 1px solid #fff;
}

footer .footer_left>ul>li ul {
   font-size: 2rem;
   line-height: 4rem;
   border-top: 1px solid #fff;
}

footer .footer_left>ul>li ul li {
   padding-left: 1rem;
   border-bottom: 1px dotted #fff;
}

footer .footer_left>ul>li ul li::before {
   content: "└";
   color: #fff;
}

footer .copy {
   text-align: center;
   color: #fff;
}

@media screen and (min-width:1025px) {

   footer .footer_wrap {
       flex-direction: row;
       justify-content: space-between;
   }

   footer .footer_left>ul {
       font-size: 1.6rem;
       line-height: 2;
       border-top: none;
   }

   footer .footer_wrap .footer_left>ul>li {
       border-bottom: none;
   }

   footer .footer_left>ul>li ul {
       font-size: 1.6rem;
       line-height: 2;
       border-top: none;
   }

   footer .footer_left>ul>li ul li {
       border-bottom: none;
   }
}

/*======min-width:1025px========*/

.to_top {
   background-color: #fff;
   width: 50px;
   text-align: center;
   border-radius: 50%;
   position: fixed;
   right: 10px;
   bottom: -100px;
   box-shadow: 0 0 5px #ccc;
   transition: 0.3s;
}

.to_top.on {
   bottom: 10px;
}

.to_top span {
   line-height: 50px;
   transform: rotate(180deg);
}

.to_top a {
   display: block;
}

top.css

/*=============
キービジュアル
=============*/

.key {
   background-image: url(../../img/key.jpg);
   height: 80vh;
   background-size: cover;
   background-position: center center;
}

.key .pc {
   display: none;
}

.key .sp {
   display: flex;
   height: 80vh;
   align-items: center;
   justify-content: center;
}


@media screen and (min-width:1025px) {
   .key .sp {
       display: none;
   }

   .key .pc {
       display: flex;
       height: 80vh;
       align-items: center;
       justify-content: center;
   }

   .key .pc p {
       background-color: rgba(247, 114, 55, 0.5);
       color: #fff;
       text-align: center;
       font-size: 4.6rem;
       line-height: 1.5;
       padding: 46px;
       font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   }

   .key .pc p span {
       font-size: 2.1rem;
   }
}

/*======min-width:1025px========*/

/*=============
スクロール
=============*/
.scroll {
   text-align: center;
   line-height: 1;
   margin-top: 40px;
}

.scroll span {
   border: 1px solid #707070;
   border-radius: 50%;
   padding: 10px;
}

/*=============
topページの余白
=============*/
.row {
   padding-top: 70px;
   padding-bottom: 70px;
}


/*=============
CHALONについて
=============*/
.top_about h2+p {
   margin-bottom: 30px;
}

/*=============
メニュー
=============*/
.top_menu .inner div {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   line-height: 1;
}

.top_menu .inner div a {
   display: block;
   margin-bottom: 30px;
   text-align: center;
}

@media screen and (min-width:600px) {
   .top_menu .inner div {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       width: 100%;
   }

   .top_menu .inner div a {
       width: 47.5%;
   }
}

/*======min-width:600px========*/

@media screen and (min-width:1025px) {
   .top_menu .inner div a {
       width: 20.5%;
   }
}

/*======min-width:1025px========*/


/*=============
お菓子教室について
=============*/
.top_lesson {
   background-color: rgba(247, 114, 55, 0.2);
}

.top_lesson .inner div {
   margin-bottom: 30px;
}

@media screen and (min-width:600px) {
   .top_lesson .inner div {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .top_lesson .inner div p:first-child {
       width: 35%;
   }

   .top_lesson .inner div p:last-child {
       width: 60%;
   }
}

/*======min-width:600px========*/


/*=============
bottom_contents
=============*/
.top_voice {
   margin-bottom: 140px;
   line-height: 1.5;
}

.top_voice dl {
   margin-bottom: 30px;
}

.top_voice dl dt {
   text-align: center;
}

.top_voice dl dd p:nth-child(2) {
   margin-bottom: 15px;
}

.top_info dl {
   line-height: 1.5;
   margin-bottom: 30px;
}

.top_info dl dd {
   margin-bottom: 20px;
}

.top_info dl dt time span {
   background-color: #f77237;
   color: #fff;
   font-size: 1.2rem;
   padding: 5px;
}

@media screen and (min-width:600px) {
   .top_voice {
       margin-bottom: 0;
   }

   .bottom_contents .inner {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .bottom_contents section {
       width: 48%;
   }
}

/*======min-width:600px========*/


@media screen and (min-width:1025px) {

   .top_voice dl {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .top_voice dl dt {
       width: 35%;
   }

   .top_voice dl dd {
       width: 60%;
   }

}

/*======min-width:1025px========*/

それとは別に、reset用のcssを読み込んでます。


■javascript完成形

main.js

//.menu_btnをクリックしたら
$('.menu_btn').on('click', () => {
   //headerタグに、.onをつけたり消したりしたい
   $('header').toggleClass('on');
});


//topへ戻るボタンが出たり消えたり
//画面をスクロールして、（もし）一定の距離になったら
//クラスonを付けて、
//(そうじゃなくて)一定の距離以内になったら（上のほうになったら）
//クラスonを消す
$(window).on('scroll', () => {
   //どれくらいスクロールされたかを調べる
   let scroll_height = $(window).scrollTop();
   // console.log(scroll_height);
   if (scroll_height > 500) {
       $('.to_top').addClass('on');
   } else {
       $('.to_top').removeClass('on');
   }
});


//繰り返しの練習
// $('.top_info time').each((index, value) => {
//     console.log($(value).append('<span>New</span>'));
// });


//お知らせの日付が新しかったらnewを付加
//今の日付
const now_date = new Date();


$('.top_info time').each((i, v) => {
   //timeタグの日付
   //.top_infoの中のtimeタグのdatetime属性
   const target_datetime = $(v).attr('datetime');
   const target_date = new Date(target_datetime);

   console.log(now_date - target_date);
   console.log(24 * 60 * 60 * 1000 * 7);

   if (now_date - target_date < 24 * 60 * 60 * 1000 * 7) {
       $(v).append('<span>NEW</span>');
   }
});


■まとめ

あまり詳細に記事に出来ていないですが、とりあえずレスポンシブ完成です。

この記事が気に入ったらサポートをしてみませんか？