index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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=Josefin+Sans&family=Kaisei+Opti&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"> <link rel="stylesheet" href="css/hamburgers.css"> <link rel="shortcut icon" href="favicon.png"> <link rel="apple-touch-icon" href="touch-icon.png"> </head> <body id="top"> <header> <h1><span>南池袋</span>リストランテ ラ・ベッキア</h1> <p class="tag-line">季節の食材でつくる、本格イタリアン。</p> </header> <p class="hamburger hamburger--3dx" id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p> <nav id="local-nav"> <ul> <li><a href="#top" data-en="Top">トップ</a></li> <li><a href="#news" data-en="News">お知らせ</a></li> <li><a href="#movie" data-en="Movie">動画</a></li> <li><a href="#menu" data-en="Menu">メニュー</a></li> <li><a href="#shop" data-en="Shop">店舗情報</a></li> <li><a href="#faq" data-en="FAQ">よくある質問</a></li> </ul> </nav> <div class="main-visual"> <ul class="bxslider"> <li><img src="img/main-1.webp" alt=""></li> <li><img src="img/main-2.webp" alt=""></li> <li><img src="img/main-3.webp" alt=""></li> </ul> </div> <main> <div class="main-copy"> <h2>旬の味覚を、心ゆくまで。</h2> <p class="lead">当店では、季節の食材を使った本格的なイタリア料理を提供しています。<br> 地元の食材を大切に、手間ひまかけて調理しています。<br> ぜひ、旬の味覚を心ゆくまでお楽しみください。</p> </div><!-- /.main-copy --> <div class="gallery"> <p><img src="img/gallery-1.jpg" alt=""></p> <p><img src="img/gallery-2.jpg" alt=""></p> </div><!-- /.gallery --> <section id="news"> <h3 data-en="News">お知らせ</h3> <dl id="news-list"> </dl> </section><!-- /#news --> <div class="parallax-1"></div> <section id="movie"> <h3 data-en="Movie">動画</h3> <div class="video-wrapper"> <video src="img/movie.mp4" controls poster="img/poster.jpg"></video> <!-- 自動再生の設定 <video src="img/movie.mp4" autoplay muted loop playsinline></video> --> </div><!-- /.video-wrapper --> <div class="video-wrapper"> <iframe class="y-tube" src="https://www.youtube.com/embed/RkZIDTWVK1I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div><!-- /.video-wrapper --> </section><!-- /#movie --> <section id="menu"> <h3 data-en="Menu">メニュー</h3> <div class="menu-wrapper"> <div class="menu-photo"> <a href="img/menu-1.jpg" data-lightbox="menu-img"><img src="img/menu-1.jpg" alt=""></a> </div> <div class="menu-photo"> <a href="img/menu-2.jpg" data-lightbox="menu-img"><img src="img/menu-2.jpg" alt=""></a> </div> <div class="menu-photo"> <a href="img/menu-3.jpg" data-lightbox="menu-img"><img src="img/menu-3.jpg" alt=""></a> </div> <div class="menu-photo"> <a href="img/menu-4.jpg" data-lightbox="menu-img"><img src="img/menu-4.jpg" alt=""></a> </div> <div class="menu-photo"> <a href="img/menu-5.jpg" data-lightbox="menu-img"><img src="img/menu-5.jpg" alt=""></a> </div> <div class="menu-photo"> <a href="img/menu-6.jpg" data-lightbox="menu-img"><img src="img/menu-6.jpg" alt=""></a> </div> </div><!-- /.menu-wrapper --> </section><!-- /#menu --> <section id="shop"> <h3 data-en="Shop">店舗情報</h3> <div class="shop-wrapper"> <dl class="shop-lnfo"> <dt>電話番号</dt> <dd><a class="phone-number" href="tel:00012345678">000-1234-5678</a></dd> <dt>住所</dt> <dd>東京都豊島区南池袋</dd> <dt>営業時間</dt> <dd>11:00 ~ 22:00</dd> <dt>定休日</dt> <dd>水曜日</dd> <dt>席数</dt> <dd>60席</dd> </dl> <div class="map-wrapper"> <iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9454666425095!2d139.71173490999414!3d35.72755967245784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1688609888316!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- /.map-wrapper --> </div><!-- /.shop-wrapper --> </section><!-- /#shop --> <div class="parallax-2"></div> <section id="faq"> <h3 data-en="FAQ">よくある質問</h3> <div class="faq-wrapper"> <details open> <summary> 予約は必要ですか？ </summary> <p class="answer">はい、予約をおすすめしています。<br> 特に週末や祝日などは混雑が予想されますので、ご予約をいただければスムーズにご案内することができます。</p> </details> <details> <summary> ドレスコードはありますか？ </summary> <p class="answer">特にありません。カジュアルな服装でも構いません。<br>ただし、特別な日のお食事の場合は、フォーマルな服装でのご来店をおすすめしています。</p> </details> <details> <summary> お子様連れでも大丈夫ですか？ </summary> <p class="answer">はい、お子様連れでも歓迎しています。<br>お子様用のメニューもご用意しておりますので、お気軽にお申し付けください。</p> </details> <details> <summary> 駐車場はありますか？ </summary> <p class="answer">はい、駐車場を20台分ご用意しています。<br>駐車場のご利用は無料です。</p> </details> </div><!-- /.faq-wrapper --> </section><!-- /#faq --> </main> <div class="carousel"> <ul class="bxslider2"> <li><img src="img/gallery-1.jpg" alt=""></li> <li><img src="img/gallery-2.jpg" alt=""></li> <li><img src="img/menu-1.jpg" alt=""></li> <li><img src="img/menu-2.jpg" alt=""></li> <li><img src="img/menu-3.jpg" alt=""></li> <li><img src="img/menu-4.jpg" alt=""></li> <li><img src="img/menu-5.jpg" alt=""></li> <li><img src="img/menu-6.jpg" alt=""></li> </ul> </div><!-- /.carousel --> <footer> <p><small>© 2013-<span id="this-year"></span> リストランテ ラ・ベッキア</small></p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/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, controls: false, pager: false, speed: 2000, pause: 2000, }); //カルーセルの設定 $('.bxslider2').bxSlider({ ticker: true, speed: 40000, maxSlides: 5, minSlides: 3, slideWidth: 300, }); //ajaxで記事を呼び出す $('#news-list').load('news.txt'); //西暦の取得 let fullYear = new Date().getFullYear(); console.log(fullYear); $('#this-year').text(fullYear); //ナビゲーション //まずナビゲーションを隠す $('#local-nav').hide(); //ハンバーガーボタン $('#ham-btn').on('click',function(){ $(this).toggleClass('is-active'); $('#local-nav').fadeToggle(200); }); $('#local-nav a').on('click',function(){ $('#local-nav').fadeOut(200); $('#ham-btn').removeClass('is-active'); }); }); </script> </body> </html>
style.css
@charset "utf-8"; /* 変数の登録 */ :root{ --color1:#dd7335; --color2:#2eb8f3; --color3:#cfdfed; --en:'Josefin Sans', sans-serif; --ja:'Kaisei Opti', serif; } /* *{ outline: 2px solid red; } */ html{ scroll-behavior: smooth; } 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][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}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}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]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;}img{max-width: 100%;vertical-align: bottom;} /* PCレイアウト */ /* ヘッダー部分 */ header{ background-color: #ffffff55; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);/* Safari用 */ padding: 20px; width: fit-content;/* 中身のコンテント幅に合う */ position: absolute; top: 100px; left: 100px; z-index: 10; font-family: var(--ja); } h1{ margin-bottom: 10px; } h1>span{ font-size: 22px; display: block; } .tag-line{ font-size: 20px; } /* ハンバーガーボタン部分 */ #ham-btn{ position: fixed; right: 0; top: 0; z-index: 30; background-color: #FFF; padding: 20px; } #ham-btn:hover{ opacity: 1; } #local-nav{ width: 100%; height: 100vh; background: url(../img/main-1.webp) no-repeat center center/cover; position: fixed; z-index: 20; display: flex; flex-direction: row-reverse; } #local-nav>ul{ width: 50%; height: 100vh; background-color: #5cc0ebDD; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6%; } #local-nav li{ margin-bottom: 20px; } #local-nav a{ display: block; color: #111; border-bottom: 2px solid #111; padding: 10px 0; transition: 0.1s; } #local-nav a:hover{ text-indent: 16px; font-weight: bold; } /* メインビジュアル部分 */ .main-visual{ width: 100%; height: 100vh; } .main-visual li{ width: 100%; height: 100vh; } .main-visual img{ object-fit: cover; width: 100%; height: 100%; } /* メインコピー部分 */ .main-copy{ text-align: center; padding: 140px 0; } .main-copy>h2{ font-size: 34px; margin-bottom: 40px; font-family: var(--ja); } .lead{ font-size: 18px; line-height: 2; } /* ギャラリー部分 */ .gallery{ max-width: 600px; margin: 0 auto 300px; position: relative; } .gallery>p:nth-of-type(1){ box-shadow: 10px 10px 0 var(--color1);/* 横方向、縦方向、ぼかしの距離 */ } .gallery>p:nth-of-type(2){ width: 60%; position: absolute; right: -100px; bottom: -120px; box-shadow: 10px 10px 0 var(--color2); } section{ padding: 100px 0; } /* セクションの見出し */ section>h3{ text-align: center; color: var(--color1); font-size: 30px; margin-bottom: 60px; font-family: var(--ja); } section>h3::before{ content: attr(data-en); display: block; color: var(--color2); font-size: 24px; font-family: var(--en); } /* お知らせ部分 */ #news-list{ max-width: 680px; margin: 0 auto 30px; display: flex; flex-wrap: wrap; } #news-list>dt{ width: 30%; margin-bottom: 40px; color: var(--color1); font-weight: bold; border-bottom: 2px solid var(--color1); padding-bottom: 10px; } #news-list>dd{ width: 70%; margin-bottom: 40px; border-bottom: 2px solid var(--color1); padding-bottom: 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; } /* 動画部分 */ .video-wrapper{ max-width: 800px; aspect-ratio: 16 / 9;/* 横/縦の比率 */ margin: 0 auto 100px; } .video-wrapper>video{ object-fit: cover; width: 100%; height: 100%; } .y-tube{ width: 100%; height: 100%; } /* メニュー部分 */ .menu-wrapper{ max-width: 960px; margin: 0 auto; display: flex; gap: 80px 40px; flex-wrap: wrap; } .menu-photo{ width: calc((100% - 80px) / 3); overflow: hidden; height: 220px; border-radius: 10px; } .menu-photo:nth-of-type(3n+1){ margin-top: -50px; } .menu-photo:nth-of-type(3n){ margin-top: 50px; } .menu-photo>a{ display: block; width: 100%; height: 100%; } .menu-photo img{ transition: 0.2s; object-fit: cover; width: 100%; height: 100%; } .menu-photo:hover img{ scale: 1.2; } /* 店舗情報部分 */ .shop-wrapper{ max-width: 960px; margin: 0 auto; display: flex; justify-content: space-between; } .shop-lnfo{ width: 48%; display: flex; flex-wrap: wrap; } .shop-lnfo>dt{ width: 30%; padding: 16px 20px; } .shop-lnfo>dd{ width: 70%; padding: 16px 20px; } .shop-lnfo>dt:nth-of-type(odd),.shop-lnfo>dd:nth-of-type(odd){ background-color: var(--color3); } .shop-lnfo a{ color: #111; } /* pc時は電話番号をクリック出来ないようにする */ .phone-number{ pointer-events: none; } .map-wrapper{ width: 48%; } .g-map{ width: 100%; height: 100%; filter: grayscale(1); transition: 0.2s; } .g-map:hover{ filter: grayscale(0); } /* よくある質問部分 */ .faq-wrapper{ max-width: 800px; margin: 0 auto; } details{ background-color: var(--color3); padding: 40px; margin-bottom: 60px; } summary{ font-size: 20px; cursor: pointer; list-style: none;/* ▼を消す */ padding-left: 12px; } summary::-webkit-details-marker{ list-style: none;/* iOSで▼を消す */ } summary:hover{ text-decoration: underline 3px var(--color1); text-underline-offset: 4px; } .answer{ background-color: #FFF; padding: 20px 20px 20px 46px; margin-top: 20px; text-indent: -30px; } summary::before{ display: inline-block;/* Qの部分だけ下線を消す */ content: "Q"; font-family: var(--en); font-size: 28px; color: #e92d33; } summary:hover::before{ text-decoration: none;/* Qの部分だけ下線を消す */ } .answer::before{ content: "A"; font-family: var(--en); font-size: 28px; color: #2d98e9; margin-right: 10px; } /* カルーセル部分 */ .carousel li{ width: 20%; aspect-ratio: 4 / 3; } .carousel img{ object-fit: cover; width: 100%; height: 100%; } /* フッター部分 */ footer{ width: 100%; background-color: var(--color1); } footer>p{ text-align: center; font-size: 18px; color: #FFF; padding: 30px 0; } main{ padding: 0 10px; } @media (max-width:900px){ /* 900px以下の時 */ /* ギャラリー部分 */ .gallery{ width: 70%; margin: 0 auto 300px; } .gallery>p:nth-of-type(2){ right: -30px; bottom: -60px; } /* パララックス部分 */ /* iosはfixedをscrollに変更する */ .parallax-1{ height: 40vh; background: url(../img/parallax-1.webp) no-repeat center center/cover scroll; } .parallax-2{ height: 40vh; background: url(../img/parallax-2.webp) no-repeat center center/cover scroll; } /* 店舗情報部分 */ .shop-wrapper{ display: block; } .shop-lnfo{ width: 100%; margin-bottom: 50px; } .shop-lnfo>dt{ padding: 12px; } .shop-lnfo>dd{ padding: 12px; } /* sp時は電話番号をクリック出来るようにする */ .phone-number{ pointer-events: auto; } .map-wrapper{ width: 100%; aspect-ratio: 4/3; } } @media (max-width:767px){ /* 767px以下の時 */ /* ヘッダー部分 */ header{ padding: 12px; top: 0; left: 0; bottom: 140px; right: 0; margin: auto; width: 90%; height: 30vh; } h1{ font-size: 26px; margin-bottom: 20px; } h1>span{ font-size: 20px; } .tag-line{ font-size: 16px; } /* ナビゲーション部分 */ #local-nav>ul{ width: 100%; padding:80px 6% 0; } #local-nav a{ font-size: 14px; transition: none; } /* メインビジュアル部分 */ .main-visual{ height: 70vh; } .main-visual li{ height: 70vh; } /* メインコピー部分 */ .main-copy{ padding: 60px 0; } .main-copy>h2{ font-size: 30px; } .lead{ font-size: 16px; text-align: left; } /* ギャラリー部分 */ .gallery{ margin: 0 auto 100px; } /* お知らせ部分 */ #news-list{ display: block; } #news-list>dt{ width: 100%; margin-bottom: 0; border-bottom: 0; } #news-list>dd{ width: 100%; margin-bottom: 60px; border-bottom: 2px solid var(--color1); } /* 動画部分 */ .video-wrapper:nth-of-type(2){ margin: 0 auto; } /* メニュー部分 */ .menu-wrapper{ gap: 40px 20px; } .menu-photo{ width: calc((100% - 20px) / 2); height: auto; border-radius: 10px; } .menu-photo:nth-of-type(3n+1){ margin-top: 0; } .menu-photo:nth-of-type(3n){ margin-top: 0; } .menu-photo>a{ height: auto; aspect-ratio: 1 / 1; } .bx-wrapper { margin-bottom: 0!important;/* !importantを付けると最優先に指定出来る */ } }
