index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ここにサイトの要約文を入れる。100~120文字位の文章が良い"> <title>レストランサイトの演習</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Ubuntu&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </head> <body> <header> <h1>Trattoria 南池袋</h1> <p class="tag-line">南池袋で、イタリアの旅を</p> </header> <nav id="g-nav"> <ul> <li><a href="#" data-en="TOP">トップ</a></li> <li><a href="#" data-en="NEWS">お知らせ</a></li> <li><a href="#" data-en="VIDEO">動画</a></li> <li><a href="#" data-en="MENU">メニュー</a></li> <li><a href="#" data-en="SHOP">店舗情報</a></li> <li><a href="#" data-en="RESERVE">ご予約</a></li> </ul> </nav> <div class="main-visual"> <ul class="bxslider"> <li><img src="img/main-4.webp" /></li> <li><img src="img/main-2.webp" /></li> <li><img src="img/main-3.webp" /></li> </ul> </div><!-- /.main-visual --> <div class="main-copy"> <h2>テイクアウト専門の本格イタリアレストラン</h2> <p class="lead">南池袋に、本格イタリアンのテイクアウト専門店がオープン！<br>自宅でも、本場の味を堪能しよう。</p> </div> <div class="gallery"> <p><img src="img/lead-1.jpg" alt=""></p> <p><img src="img/lead-2.jpg" alt=""></p> </div> <main> <section id="news"> <h2 data-en="NEWS">お知らせ</h2> <dl id="news-list"> </dl> </section> <div class="parallax-1"></div> <section id="video"> <h2 data-en="VIDEO">動画</h2> <div class="yt-wrapper"> <iframe class="yt" src="https://www.youtube.com/embed/CYBR4nu9LHU?si=2Tt5e_cY2pkw88qo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> </section> <section id="menu"> <h2 data-en="MENU">メニュー</h2> <div class="menu-wrapper"> <div class="menu-box"> <a href="img/menu-1.jpg" data-lightbox="photo"> <h3>料理名1</h3> <p><img src="img/menu-1.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-2.jpg" data-lightbox="photo"> <h3>料理名2</h3> <p><img src="img/menu-2.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-3.jpg" data-lightbox="photo"> <h3>料理名3</h3> <p><img src="img/menu-3.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-4.jpg" data-lightbox="photo"> <h3>料理名4</h3> <p><img src="img/menu-4.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-5.jpg" data-lightbox="photo"> <h3>料理名5</h3> <p><img src="img/menu-5.jpg" alt=""></p> </a> </div><!-- /.menu-box --> </div><!-- /.menu-wrapper --> </section> <section id="shop"> <h2 data-en="SHOP">店舗情報</h2> </section> <div class="parallax-2"></div> <section id="reserve"> <h2 data-en="RESERVE">ご予約</h2> </section> </main> <footer> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></script> <script src="js/lightbox.js"></script> <script> $(function(){ //メインビジュアル $('.bxslider').bxSlider({ mode: 'fade', auto: true, //trueがon pager: false, //falseがoff speed: 2000, pause: 2000, }); //お知らせ部分 $('#news-list').load('news-list.txt'); }); </script> </body> </html>
style.css
@charset "utf-8"; /* 変数の登録 */ :root{ --font_ja:'Kiwi Maru', serif; --font_en:'Ubuntu', sans-serif; --color_1:#14b70e; --color_2:#b70e2d; } *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; max-width: 100%; } header{ display: none; } #g-nav{ display: none; } /* メインビジュアル部分 */ .main-visual{ width: 100%; height: 100vh; margin: 0 auto; } .main-visual li{ width: 100%; height: 100vh; } .main-visual img{ object-fit: cover; width: 100%; height: 100%; } /* メインコピー部分 */ .main-copy{ text-align: center; font-family: var(--font_ja); padding: 160px 10px; } .main-copy>h2{ font-size: 36px; margin-bottom: 50px; } .lead{ font-size: 20px; line-height: 2; } /* ギャラリー部分 */ .gallery{ max-width: 600px; margin: 0 auto 200px; position: relative; } .gallery>p:nth-of-type(1){ box-shadow: 20px 20px 0 var(--color_1); } .gallery>p:nth-of-type(2){ width: 50%; position: absolute; right: -100px; bottom: -100px; box-shadow: -20px 20px 0 var(--color_2); } /* section共通部分 */ section{ padding: 140px 10px; } section>h2{ text-align: center; font-family: var(--font_ja); color: var(--color_1); font-size: 32px; margin-bottom: 60px; } section>h2::before{ content: attr(data-en); font-family: var(--font_en); color: var(--color_2); font-size: 24px; display: block; } /* お知らせ部分 */ #news-list{ max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; } #news-list>dt{ width: 30%; border-bottom: 2px solid var(--color_2); margin-bottom: 40px; padding: 10px; font-weight: bold; } #news-list>dd{ width: 70%; border-bottom: 2px solid var(--color_2); margin-bottom: 40px; padding: 10px; } #news-list>dt:nth-of-type(n+4){ display: none; } #news-list>dd:nth-of-type(n+4){ display: none; } /* パララックス部分 */ .parallax-1{ width: 100%; height: 100vh; background: url(../img/parallax-1.webp) no-repeat center center/cover fixed; } .parallax-2{ width: 100%; height: 100vh; background: url(../img/parallax-2.webp) no-repeat center center/cover fixed; } /* 動画部分 */ .yt-wrapper{ width: 70%; aspect-ratio: 16 / 9;/* 幅/高さ */ margin: 0 auto; } .yt{ width: 100%; height: 100%; } /* メニュー部分 */ .menu-wrapper{ display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto; gap: 80px 40px;/* 上下、左右の順 */ } .menu-box{ width: calc((100% - 80px) / 3); border: 1px solid #333; padding: 20px; } .menu-box>a{ color: var(--color_1); font-size: 22px; margin-bottom: 6px; } .menu-box img{ transition: 0.3s; } .menu-box:hover img{ scale: 1.1; } .menu-box p{ overflow: hidden; }
