index.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>家具屋のECサイトの作成</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/hamburgers.css"> </head> <body> <header> <h1>Furniture-store</h1> <p class="hamburger hamburger--stand" id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p> </header> <nav id="g-nav"> <ul> <li><a href="#">Brands</a></li> <li><a href="#">Products</a></li> <li><a href="#">Stores</a></li> <li><a href="#">Catalogs</a></li> <li><a href="#">Styling tips</a></li> <li><a href="#">Partners & Press</a></li> </ul> </nav> <nav id="g-nav-sp"> <ul> <li><a href="#">Brands</a></li> <li><a href="#">Products</a></li> <li><a href="#">Stores</a></li> <li><a href="#">Catalogs</a></li> <li><a href="#">Styling tips</a></li> <li><a href="#">Partners & Press</a></li> </ul> </nav> <main> <div class="content-wrapper"> <div class="content-box"> <div class="content-txt"> <h2>Lorem, ipsum dolor.</h2> <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p> <p class="more-btn"><a href="#">view more</a></p> </div><!-- /.content-txt --> <div class="content-img"> <img src="img/main01.jpg" alt=""> </div><!-- /.content-img --> </div><!-- /.content-box --> <div class="content-box"> <div class="content-txt"> <h2>Lorem, ipsum dolor.</h2> <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p> <p class="more-btn"><a href="#">view more</a></p> </div><!-- /.content-txt --> <div class="content-img"> <img src="img/main02.jpg" alt=""> </div><!-- /.content-img --> </div><!-- /.content-box --> <div class="content-box"> <div class="content-txt"> <h2>Lorem, ipsum dolor.</h2> <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p> <p class="more-btn"><a href="#">view more</a></p> </div><!-- /.content-txt --> <div class="content-img"> <img src="img/main03.jpg" alt=""> </div><!-- /.content-img --> </div><!-- /.content-box --> </div><!-- /.content-wrapper --> <div class="col-1"> <h2>この文章はダミーです。<br class="sp-on">文字の大きさ、量</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Eveniet perferendis deserunt voluptatem vero quidem.</p> </div><!-- /.col-1 --> <div class="col-3-wrapper"> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-1.jpg" alt=""> </div> <div class="col-3-txt"> <h2>Lorem, ipsum dolor.</h2> <p class="icon"><img src="img/icon-1.svg" alt=""></p> </div> </div><!-- /.col-3-box --> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-2.jpg" alt=""> </div> <div class="col-3-txt"> <h2>Lorem, ipsum dolor.</h2> <p class="icon"><img src="img/icon-2.svg" alt=""></p> </div> </div><!-- /.col-3-box --> <div class="col-3-box"> <div class="col-3-img"> <img src="img/col-3-3.jpg" alt=""> </div> <div class="col-3-txt"> <h2>Lorem, ipsum dolor.</h2> <p class="icon"><img src="img/icon-3.svg" alt=""></p> </div> </div><!-- /.col-3-box --> </div><!-- /.col-3-wrapper --> </main> <footer> <p><small>© 2022-<span id="this-year"></span> Furniture-store</small></p> <ul class="sns"> <li><a href="#"><img src="img/twitter.svg" alt=""></a></li> <li><a href="#"><img src="img/instagram.svg" alt=""></a></li> <li><a href="#"><img src="img/envelope-regular.svg" alt=""></a></li> </ul> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(function(){ //#ham-btnをon.clickしたら $('#ham-btn').on('click',function(){ $(this).toggleClass('is-active'); $('#g-nav-sp').slideToggle(200); }); //西暦を取得 let today = new Date().getFullYear(); console.log(today); $('#this-year').text(today); }); </script> </body> </html>
style.ss
@charset "utf-8"; /* 変数の設定 */ :root{ --color_1:#eeeed1; --color_2:#d1eed7; --color_3:#eed9d1; --color_4:#efd9f2; --color_5:#ddeed1; } *{ margin: 0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; } ul{ list-style: none; } img{ vertical-align: bottom; } /* PCレイアウト */ header{ height: 100px; background-color: var(--color_1); text-align: center; } h1{ line-height: 100px; } #g-nav{ position: sticky;/* 指定した位置まで来たらfixed */ top: 0; width: 100%; height: 50px; background-color: var(--color_2); } #g-nav>ul{ display: flex; justify-content: center; align-items: center; height: 50px; max-width: 960px; margin: 0 auto; } #g-nav li{ margin: 0 20px; } #g-nav a{ color: #222; padding: 10px 14px; } #g-nav a:hover{ text-decoration: underline 4px #ee96eb; text-underline-offset: 5px; } /* sp用のナビは非表示にする */ #g-nav-sp{ display: none; } /* メイン部分のレイアウト */ main{ padding: 10px; max-width: 1366px; margin: 0 auto; } .content-box{ display: flex; justify-content: space-between; margin-bottom: 10px; } .content-box:nth-of-type(odd){ flex-direction: row-reverse; } .content-txt{ width: calc((100% - 20px) / 3); background-color: var(--color_3); padding: 40px; } .content-txt>h2{ margin-bottom: 40px; } .text{ font-size: 18px; line-height: 2; margin-bottom: 60px; } .more-btn{ width: 80%; margin: 0 auto; height: 50px; background-color: #f9fcde; } .more-btn>a{ display: block; line-height: 50px; text-align: center; color: #222; } .more-btn>a::after{ display: inline-block; content: ""; width: 10px; height: 10px; border-top: 1px solid #222; border-right: 1px solid #222; transform: rotate(45deg); margin-left: 16px; } .content-img{ width: calc((100% - 20px) / 3 * 2 + 10px); height: 600px; } .content-img>img{ object-fit: cover; width: 100%; height: 100%; } .content-box:nth-of-type(2)>.content-txt{ background-color: var(--color_4); } .content-box:nth-of-type(3)>.content-txt{ background-color: var(--color_5); } /* col-1部分 */ .col-1{ width: 100%; height: 400px; background-color: var(--color_1); margin-bottom: 10px; text-align: center; padding:100px 20px 20px; } .col-1>h2{ margin-bottom: 50px; } .sp-on{ display: none; } @media (max-width:560px){ .sp-on{ display: block; } } /* col-3部分 */ .col-3-wrapper{ display: flex; justify-content: space-between; } .col-3-box{ width: calc((100% - 20px) / 3); } .col-3-img{ width: 100%; height: 260px; } .col-3-img>img{ object-fit: cover; width: 100%; height: 100%; } .col-3-txt{ background-color: var(--color_3); padding: 50px 20px; } .icon{ width: 80px; padding: 16px; margin: 0 auto; border-radius: 50%;/* 正方形を正円にする */ background-color: #FFF; } .col-3-box:nth-of-type(2)>.col-3-txt{ background-color: var(--color_4); } .col-3-box:nth-of-type(3)>.col-3-txt{ background-color: var(--color_5); } .col-3-txt>h2{ text-align: center; margin-bottom: 40px; } /* footer部分 */ footer{ margin: 0 10px 10px; background-color: var(--color_2); padding: 20px; } footer>p{ text-align: center; margin-bottom: 40px; } .sns{ display: flex; justify-content: center; } .sns>li{ width: 44px; margin: 0 20px; } .sns>li:nth-of-type(-n+2){ width: 36px; } #ham-btn{ display: none;/* ハンバーガーを非表示に */ } /* 900px以下のスタイル */ @media (max-width:900px){ /* ナビゲーション部分 */ #g-nav li{ margin: 0 10px; } /* コンテント部分のレイアウト */ .content-img{ height: 480px; } .content-txt{ padding: 20px; } /* col-3部分 */ .col-3-wrapper{ display: block; } .col-3-box{ display: flex; width: 100%; } .col-3-box:nth-of-type(-n+2){ margin-bottom: 10px; } .col-3-img{ width: 50%; } .col-3-txt{ width: 50%; } } /* 767px以下のレイアウト */ @media (max-width:767px){ header{ display: flex; align-items: center; justify-content: space-between; padding-left: 10px; width: 100%; height: 60px; position: fixed; top: 0; left: 0; z-index: 100; } h1{ font-size: 30px; line-height: 60px; } main{ padding-top: 70px; } /* ハンバーガー部分 */ #ham-btn{ display: block;/* ハンバーガーを表示に */ } /* pc用のナビゲーションは非表示に */ #g-nav{ display: none; } /* sp用のナビゲーション */ #g-nav-sp{ display: none; width: 100%; height: calc(100vh - 60px); background-color: var(--color_2); position: fixed; top: 60px; left: 0; z-index: 100; padding: 40px 30px; } #g-nav-sp li{ margin-bottom: 20px; } #g-nav-sp a{ display: block; color: #222; font-size: 18px; border-bottom: 1px solid #222; } .content-box{ flex-direction: column-reverse; } .content-box:nth-of-type(odd){ flex-direction: column-reverse; } .content-img{ width: 100%; height: 320px; margin-bottom: 10px; } .content-txt{ width: 100%; } .content-txt>h2{ text-align: center; } .content-txt>p{ margin-bottom: 20px; } /* col-3部分 */ .col-3-box{ display: block; } .col-3-img{ width: 100%; height: 220px; } .col-3-txt{ width: 100%; padding: 20px; } }
