トップページ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイルに特化したwebサイト</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div class="bg-wrapper"> <div class="bg-inner"></div> </div> <header> <h1 class="pc-title">Sweet Box</h1> <p class="tag-1">enjoy sweet at home</p> <nav class="pc-nav"> <ul> <li><a href="#top">トップ</a></li> <li><a href="#item">スイーツの紹介</a></li> <li><a href="#step">ご利用の流れ</a></li> <li><a href="#to-form">お申し込み方法</a></li> <li><a href="#faq">よくある質問</a></li> </ul> </nav> </header> <p class="txt-anime">Sweet Box enjoy sweet at home<span>Sweet Box enjoy sweet at home</span><span>Sweet Box enjoy sweet at home</span></p> <div class="container"> <div class="sp-header"> <h1 class="sp-title">Sweet Box</h1> <button id="ham-btn"><span></span></button> </div><!-- /.sp-header --> <nav id="sp-nav"> <ul> <li><a href="#top">トップ</a></li> <li><a href="#item">スイーツの紹介</a></li> <li><a href="#step">ご利用の流れ</a></li> <li><a href="#to-form">お申し込み方法</a></li> <li><a href="#faq">よくある質問</a></li> </ul> </nav> <div class="main-visual"> <p class="tag-2">おうちで楽しむ新しいスイーツ体験</p> </div> <div class="news"> <h2>お知らせ</h2> <dl id="news-list"> <dt>2023年11月09日</dt> <dd>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio omnis ipsam sunt qui iure.</dd> <dt>2023年11月08日</dt> <dd>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio omnis ipsam sunt qui iure.</dd> </dl> </div> <div class="main-copy"> <p class="lead"> 全国の選りすぐりのお店から 自慢のスイーツセットを毎月1回お届け。<br> このサービスでしか味わえないスイーツを ご自宅で堪能しませんか？ </p> </div> <main> <section id="item"> <h2>スイーツの紹介</h2> <div class="item-wrapper"> <div class="item-box"> <h3>商品の名前1</h3> <p class="item-photo"><img src="img/item-1.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> <div class="item-box"> <h3>商品の名前2</h3> <p class="item-photo"><img src="img/item-2.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> <div class="item-box"> <h3>商品の名前3</h3> <p class="item-photo"><img src="img/item-3.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> <div class="item-box"> <h3>商品の名前4</h3> <p class="item-photo"><img src="img/item-4.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> <div class="item-box"> <h3>商品の名前5</h3> <p class="item-photo"><img src="img/item-5.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> <div class="item-box"> <h3>商品の名前6</h3> <p class="item-photo"><img src="img/item-6.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> <div class="item-box"> <h3>商品の名前7</h3> <p class="item-photo"><img src="img/item-7.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> <div class="item-box"> <h3>商品の名前8</h3> <p class="item-photo"><img src="img/item-8.jpg" alt=""></p> <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus.</p> </div><!-- /.item-box --> </div><!-- /.item-wrapper --> </section><!-- /#item --> <section id="step"> <h2>ご利用の流れ</h2> <div class="step-box"> <h3>step1</h3> <p>申し込みフォームに<br> 必要事項を入力して送信</p> </div> <div class="step-box"> <h3>step2</h3> <p>弊社からの返信メールに<br> 記載されている、<br> 内容に沿ってお支払い下さい。</p> </div> <div class="step-box"> <h3>step3</h3> <p>お支払い完了ページが<br> 表示されたら完了です。</p> </div> </section><!-- /#step --> <section id="to-form"> <h2>お申し込み方法</h2> <p class="to-form-text">月々1,980円(税込)<br> 毎月の月初めに冷凍で配送</p> <div class="to-form-outer"> <h3>2つのコースからお選び下さい</h3> <div class="to-form-wrapper"> <p><a href="#">お試し3回コース5,940円(税込)</a></p> <p><a href="#">お得な年間12回コース21,780円(税込)</a></p> </div> </div><!-- /.to-form-outer --> </section><!-- /#to-form --> <section id="faq"> <h2>よくある質問</h2> <div class="faq-wrapper"> <details open> <summary data-q="Q">ケーキは、すぐに食べられますか？</summary> <p class="answer" data-a="A">すぐには食べられません。ケーキは、冷凍のクール宅急便で、品質を保ったまま郵送するため冷凍されています。 お手元に届きましたら、ケーキ箱のまま、冷蔵庫に保存し解凍してください。 最適な解凍方法について紹介した冊子も同封させて頂きます。</p> </details> <details> <summary data-q="Q">ケーキの解凍方法・召し上がり方法について</summary> <p class="answer" data-a="A">お召し上がり前に冷蔵庫で10時間程度の解凍が必要です。 常温での解凍は推奨しおりませんのでご注意ください。 商品のお届け日時は、お召し上がり予定のお時間より解凍時間の余裕を持ってお受け取りの設定をお願い致します。</p> </details> <details> <summary data-q="Q">お支払い方法は何ですか？</summary> <p class="answer" data-a="A">お支払い方法はクレジットカードとスマホ決済になります。予めご了承ください。</p> </details> </div><!-- /.faq-wrapper --> </section> </main> <footer> <p><small>© 2023 Sweet Box</small></p> <ul class="sns"> <li><a href="#">インスタ</a></li> <li><a href="#">X</a></li> <li><a href="#">LINE</a></li> </ul> </footer> </div><!-- /.container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(function(){ //まずSPナビを隠す $('#sp-nav').hide(); //#ham-btnをon.clickしたら $('#ham-btn').on('click',function(){ //thisの子供のspanに「is-active」をtoggleClassする $(this).children('span').toggleClass('is-active'); //#sp-navをfadeToggleする $('#sp-nav').fadeToggle(300); }); //#sp-nav aをクリックしたら#sp-navを隠す $('#sp-nav a').on('click',function(){ $('#sp-nav').fadeOut(300); $('#ham-btn>span').removeClass('is-active'); }); }); </script> </body> </html>
style.scss
@use "_reset.scss"; @import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Marhey&display=swap'); //フォントの登録 $font_en:'Marhey', sans-serif; $font_ja:'Kiwi Maru', serif; //ブレイクポイントを登録 $tab_point:900px; $sp_point:640px; //関数の登録 @mixin tab{ @media (max-width:$tab_point){ @content; } } @mixin sp{ @media (max-width:$sp_point){ @content; } } //スムーススクロールの設定 html{ scroll-behavior: smooth; } body{ padding-top: 50px; @include tab(){ padding-top: 70px; } } //固定の背景 .bg-wrapper{ width: 100%; height: 100vh; background: url(../img/bg.webp) no-repeat center center/cover; position: fixed; top: 0; left: 0; z-index: -2; } .bg-inner{ width: 100%; height: 100%; background-color: #ffffff88; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding-top: 100px; } header{ width: 30%; padding: 20px; position: fixed; top: 50px; left: 50px; @include tab(){ display: none; } } h1.pc-title{ font-family: $font_en; font-size: 42px; } .tag-1{ font-family: $font_en; margin-bottom: 30px; font-size: 20px; } //pc用ナビゲーション .pc-nav li{ margin-bottom: 10px; overflow: hidden; >a{ color: #111; font-size: 18px; padding: 4px 10px; font-family: $font_ja; position: relative; &::after{ content: ""; display: block; width: 100%; height: 10px; background-color: #d9d8ba; position: absolute; left: 0; bottom: 4px; z-index: -1; translate: -110% 0; transition: 0.2s; } &:hover::after{ translate: 0 0; } } } //テキストアニメーション .txt-anime{ position: fixed; z-index: -1; left: 0; bottom: 0; font-size: 40px; white-space: nowrap; text-indent: 4em; animation: txt 10s linear infinite; font-weight: bold; font-family: $font_en; >span{ margin-left: 4em; } } @keyframes txt{ 0%{translate: 0 0;} 100%{translate: -21em 0;} } //枠内 .container{ max-width: 600px; background-color: #f3e8d9; margin: 0 50px 100px 50%; box-shadow: 0 0 10px #666; position: relative; @include tab(){ margin: 0 auto 100px; } } //spレイアウトで使用するパーツ .sp-header{ display: none; @include tab(){ display:flex; max-width: 600px; height: 70px; background-color: #c0c0a2; justify-content: space-between; padding: 0 10px; align-items: center; position: fixed; z-index: 20; top: 0; right: 0; left: 0; margin: auto; .sp-title{ font-family: $font_en; } #ham-btn{ width: 44px; height: 44px; background-color: #868585; position: relative; >span{ display: block; width: 24px; height: 3px; background-color: #FFF; position: absolute; inset: 0; margin: auto; top: -12px; transition: 0.2s; &::after{ display: block; content: ""; width: 24px; height: 3px; background-color: #FFF; position: absolute; top: 12px; transition: 0.2s; } &.is-active{ top:0; rotate: 45deg; &::after{ top:0; rotate: 270deg; } } } } } } #sp-nav{ display: none; @include tab(){ display: block; position: fixed; z-index: 20; max-width: 600px; top: 70px; left: 0; right: 0; margin: auto; height: calc(100vh - 70px); background-color: #675240; padding: 40px; li{ margin-bottom: 10px; >a{ display: block; color: #FFF; padding: 6px 0; border-bottom: 2px solid #FFF; } } } } .main-visual{ width: 100%; height: 80vh; background: url(../img/main.webp) no-repeat 30% 60%/cover; display: flex; flex-direction: row-reverse; padding: 50px 50px 0 0; margin-bottom: 340px; } .tag-2{ /* font-family: $font_ja; */ font-size: 20px; writing-mode: vertical-rl; background-color: #FFF; padding:6px 4px; height: fit-content; } //お知らせ部分 .news{ width: 80%; padding: 20px; background-color: #ffffffcd; position: absolute; top: 75vh; left: 10%; border-radius: 10px; >h2{ margin-bottom: 10px; font-family: $font_ja; } dt{ font-weight: bold; } dd{ margin-bottom: 20px; } } //メインコピー .main-copy{ padding: 60px; text-align: center; font-size: 22px; margin-bottom: 80px; line-height: 2.4; } //セクションと見出し section{ margin: 100px 0; scroll-margin-top: 100px; } section>h2{ text-align: center; padding: 30px 0; font-size: 28px; font-family: $font_ja; } //商品紹介部分 .item-wrapper{ display: flex; flex-wrap: wrap; border-top: 1px solid #444; border-bottom: 1px solid #444; } .item-box{ width: 50%; padding: 40px 14px; &:nth-of-type(odd){ border-right: 1px solid #444; } &:nth-of-type(n+3){ border-top: 1px solid #444; } } .item-photo{ width: 100%; aspect-ratio: 1 / 1; margin: 10px 0; >img{ object-fit: cover; width: 100%; height: 100%; } } //ご利用の流れ部分 .step-box{ width: 60%; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #FFF; margin: 50px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; >h3{ font-size: 24px; margin:-60px 0 20px 0; } >p{ text-align: center; line-height: 2; } } //申し込み方法部分 .to-form-text{ font-size: 20px; text-align: center; line-height: 1.7; margin-bottom: 50px; } .to-form-outer{ background-color: #ead6b9; width: 90%; margin: 50px auto; padding: 50px; } .to-form-wrapper>p{ border-radius: 10px; background-color: #868585; margin-top: 30px; >a{ display: block; padding: 20px 10px; color: #FFF; text-align: center; font-size: 18px; border-radius: 10px; transition: 0.2s; &:hover{ background-color: #a78d8d; } } } //よくある質問部分 .faq-wrapper{ width: 90%; margin: 50px auto; >details{ margin-bottom: 50px; >summary{ padding: 20px; background-color: #cbb7b7; font-size: 20px; cursor: pointer; list-style: none;//黒い三角を消す &::before{ content: attr(data-q); display: inline-block; color: #3c2020; margin-right: 10px; font-size: 24px; font-weight: bold; } } >summary::-webkit-details-marker{ list-style: none;//iOS用のリセット } .answer{ background-color: #e9e9e9; padding: 20px; padding-left: 2.5em; font-size: 18px; text-indent: -0.6em; &::before{ content: attr(data-a); display: inline-block; margin-right: 0.5em; color: #0c2c96; font-size: 20px; } } } } /* フッター部分 */ footer>p{ text-align: center; padding: 20px 0; background-color: #675240; color: #FFF; } .sns{ display: flex; justify-content: center; padding: 20px 0; background-color: #666; >li{ margin: 0 10px; >a{ display: block; width: 50px; height: 50px; background: url(../img/instagram.svg) no-repeat center center/40px; white-space: nowrap;//文字の改行を無くす text-indent: 100%;//1個分右にずらす overflow: hidden;//はみ出した文字を隠す } &:nth-of-type(2)>a{ background: url(../img/x-twitter.svg) no-repeat center center/40px; } &:nth-of-type(3)>a{ background: url(../img/line.svg) no-repeat center center/40px; } } }
