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>モバイル幅で作成するwebサイト</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <header> <h1>sneakers-shop</h1> <nav id="pc-nav"> <ul> <li><a href="#top">トップ</a></li> <li><a href="#item">商品紹介</a></li> <li><a href="#question">よくある質問</a></li> <li><a href="#shop">店舗情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <div class="logo-box"></div> <div class="container"> <div class="sp-header"> <h2>sneakers-shop</h2> <p id="ham-btn"><span></span></p> </div><!-- /.sp-header --> <nav id="sp-nav"> <ul> <li><a href="#top">トップ</a></li> <li><a href="#item">商品紹介</a></li> <li><a href="#question">よくある質問</a></li> <li><a href="#shop">店舗情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> <div class="main-visual"> <img src="img/main2.jpg" alt=""> </div> <div class="main-copy"> <h3>Lorem ipsum dolor sit.</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quo magnam. Quasi, dicta iste!</p> </div> <div id="item"> <h4>商品紹介</h4> </div><!-- /.item --> <div id="question"> <h4>よくある質問</h4> </div><!-- /.question --> <div id="shop"> <h4>店舗情報</h4> </div><!-- /.shop --> <footer> <p><small>© 2022 sneakers-shop All rights reserved</small></p> <ul class="sns"> <li><a href="#">インスタ</a></li> <li><a href="#">tw</a></li> <li><a href="#">LINE</a></li> </ul> <p class="to-top"><a href="#top">トップへ</a></p> </footer> </div><!-- /.container --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script> <script> $(function(){ $('#ham-btn').on('click',function(){ $(this).toggleClass('is-active'); }); }); </script> </body> </html>
style.css
@charset "utf-8"; html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;} /* PC部分のレイアウト */ body{ width: 100%; background-repeat: repeat; background-color: #e3d9e4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%236f8fcf' fill-opacity='0.41'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } header{ width: 100%; height: 80px; background-color: #f6f0d1; position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; } #pc-nav>ul{ display: flex; } #pc-nav li{ margin: 0 20px; } #pc-nav a{ padding: 20px 0; color: #222; position: relative; display: block; text-align: center; overflow: hidden; } #pc-nav a::after{ display: block; content: ""; width: 100%; height: 5px; background-color: #6ca1e2; position: absolute; transform: translateX(-100%); transition: 0.2s; } #pc-nav a:hover::after{ transform: translateX(0); } .logo-box{ width: 36%; height: 400px; background-color: #73d2b4; position: fixed; left: 10%; top: 120px; } /* sp部分のレイアウト */ .container{ max-width: 500px; background-color: #fef9ee; margin: 120px 0 100px 55%; box-shadow: 0 0 6px #bdbdbd; } html{ scroll-behavior: smooth; } #top{ scroll-margin-top: 120px; } #item{ height: 100vh; scroll-margin-top: 100px; } #question{ height: 100vh; scroll-margin-top: 100px; } #shop{ height: 100vh; scroll-margin-top: 100px; } #ham-btn{ display: none; } @media (max-width:1200px){ header{ padding: 0 20px; } .logo-box{ left: 5%; } .container{ margin: 120px 10px 100px 45%; } } @media (max-width:900px){ header{ display: none; } .logo-box{ display: none; } .container{ margin: 0 auto; } /* ハンバーガーボタン */ #ham-btn{ display: block; width: 60px; height: 60px; background-color: #d0eca0; position: relative; } #ham-btn>span{ display: block; width: 30px; height: 3px; background-color: #222; position: absolute; top: -16px; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } #ham-btn>span::after{ display: block; content: ""; width: 30px; height: 3px; background-color: #222; position: absolute; top: 16px; transition: 0.2s; } #ham-btn.is-active>span{ transform: rotate(45deg); top: 0; } #ham-btn.is-active>span::after{ top: 0; transform: rotate(90deg); } .sp-header{ height: 60px; display: flex; justify-content: space-between; align-items: center; padding-left: 20px; } }
