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>レストランサイトの作成</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/hamburgers.css"> <link rel="stylesheet" href="css/lightbox.css"> </head> <body> <header> <h1><img src="img/logo.svg" alt=""></h1> </header> <nav id="g-nav"> <ul> <li><a href="#">Top</a></li> <li><a href="#news">News<span>ニュース</span></a></li> <li><a href="#video">Video<span>動画</span></a></li> <li><a href="#menu">Menu<span>お品書き</span></a></li> <li><a href="#">Shop<span>店舗情報</span></a></li> <li><a href="#">Reserve<span>ご予約</span></a></li> </ul> <div class="sns"> <p><a href="#"><img src="img/twitter-brands.svg" alt=""></a></p> <p><a href="#"><img src="img/facebook-brands.svg" alt=""></a></p> <p><a href="#"><img src="img/instagram-brands.svg" alt=""></a></p> <p><a href="#"><img src="img/line-brands.svg" alt=""></a></p> </div> </nav> <div class="main-visual"> <ul class="bxslider"> <li><img src="img/slide01.jpg"></li> <li><img src="img/slide02.jpg"></li> <li><img src="img/slide03.jpg"></li> </ul> </div> <p class="hamburger hamburger--spring" id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p> <main> <div id="news"> <h2>News</h2> <dl id="news-list"> </dl> </div> <div id="video"> <h2>Video</h2> <div class="video-inner"> <video src="img/video.mp4" controls></video> </div> </div><!-- /#video --> <div id="menu"> <h2>Menu</h2> <div class="menu-wrapper"> <div class="menu-box"> <a href="img/01.jpg" data-lightbox="menu"> <img src="img/01.jpg" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum pariatur atque odio omnis. Harum, et.</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/02.jpg" data-lightbox="menu"> <img src="img/02.jpg" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum pariatur atque odio omnis. Harum, et.</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/03.jpg" data-lightbox="menu"> <img src="img/03.jpg" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum pariatur atque odio omnis. Harum, et.</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/04.jpg" data-lightbox="menu"> <img src="img/04.jpg" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum pariatur atque odio omnis. Harum, et.</p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/05.jpg" data-lightbox="menu"> <img src="img/05.jpg" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum pariatur atque odio omnis. Harum, et.</p> </a> </div><!-- /.menu-box --> </div><!-- /.menu-wrapper --> </div><!-- /#menu --> </main> <footer> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="js/script.js"></script> <script src="js/lightbox.js"></script> <script src="js/jquery.bxslider.js"></script> <script> $(function(){ $('.bxslider').bxSlider({ mode: 'fade', auto: true, controls: false, pager: false, speed: 2000,//画像が差し代わる秒数 pause: 2000//画像が止まっている時間 }); }); </script> </body> </html>
style.css
@charset "utf-8"; :root{ --main_color:#802525; } header{ width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.3); position: absolute; top: 0; left: 0; z-index: 12000; } h1{ width: 320px; position: absolute; left: 80px; top: 300px; } #btn{ position: fixed; right: 20px; top: 20px; z-index: 20000; background-color: rgba(255, 255, 255, 0.7); } /* ナビゲーション部分 */ #g-nav{ width: 100%; height: 100vh; background-color: var(--main_color); position: fixed;/* 要素を固定にする */ top: 0; left: 0; z-index: 15000; display: none; } #g-nav>ul{ width: 60%; margin: 60px auto 0; background-color: #ececec; display: flex; flex-wrap: wrap; padding: 30px 60px; } #g-nav li{ width: 50%; } #g-nav a{ display: block; color: #222; font-size: 18px; font-weight: bold; margin-bottom: 20px; } #g-nav a:hover>span{ text-decoration: 3px underline #15218f; text-underline-offset: 3px; } #g-nav span{ display: block; color: var(--main_color); font-size: 24px; font-weight: normal; margin-top: 10px; } .sns{ display: flex; justify-content: center; } .sns>p{ width: 40px; margin: 70px 20px 0; } /* メインビジュアル部分 */ .main-visual{ width: 100%; height: 100vh; } .main-visual li{ width: 100%; height: 100vh; } .main-visual img{ object-fit: cover; object-position: center center; width: 100%; height: 100%; } /* p:nth-of-type(-n+2){ color: red; font-size: 20px; } */ /* 共通部分 */ h2{ text-align: center; font-size: 30px; margin: 50px 0 30px; color: var(--main_color); } /* news部分 */ #news-list{ max-width: 800px; margin: 0 auto 100px; display: flex; flex-wrap: wrap; } #news-list>dt{ width: 30%; border-bottom: 2px solid var(--main_color); padding: 16px; margin-bottom: 10px; } #news-list>dd{ width: 70%; border-bottom: 2px solid var(--main_color); padding: 16px; margin-bottom: 10px; } #news-list>dt:nth-of-type(n+5),#news-list>dd:nth-of-type(n+5){ display: none; } /* 動画部分 */ .video-inner{ width: 60%; height: auto; margin: 0 auto 100px; } .video-inner>video{ object-fit: cover; object-position: center center; width: 100%; height: 100%; } /* menu部分 */ .menu-wrapper{ max-width: 960px; margin: 0 auto 100px; display: flex; flex-wrap: wrap; gap:40px 20px;/* 上下、左右の空き */ } .menu-box{ width: calc((100% - 40px) / 3); } .menu-box>a{ color: #222; line-height: 1.5; display: block; padding: 10px; transition: 0.2s; } .menu-box>a:hover{ box-shadow: 0 0 10px #AAA; } .menu-box img{ margin-bottom: 10px; }
script.js
$(function(){ //ハンバーガーメニュー $('#btn').on('click',function(){ $(this).toggleClass('is-active'); $('#g-nav').fadeToggle(400); }); //newsデータを呼び出す $('#news-list').load('news.txt'); });