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>Fresco Italiano｜トップページ</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=BIZ+UDPGothic&family=Pacifico&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/hamburgers.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </head> <body id="top"> <header> <h1>Fresco Italiano</h1> <p class="hamburger hamburger--spin" id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p> </header> <nav id="g-nav"> <ul> <li><a href="#top" data-en="TOP">トップ</a></li> <li><a href="#news" data-en="NEWS">お知らせ</a></li> <li><a href="#video" data-en="VIDEO">動画</a></li> <li><a href="#menu" data-en="MENU">メニュー</a></li> <li><a href="#information" data-en="INFORMATION">店舗情報</a></li> <li><a href="#faq" data-en="FAQ">よくあるご質問</a></li> <li><a href="#" data-en="RESERVE">ご予約はこちらから</a></li> </ul> </nav> <main> <div class="main-visual"> <ul class="bxslider"> <li><img src="img/main01.jpg" alt=""></li> <li><img src="img/main02.jpg" alt=""></li> <li><img src="img/main03.jpg" alt=""></li> </ul> <p class="tag-line">新鮮な素材から生まれるイタリアンの魅力を、南池袋で</p> </div><!-- /.main-visual --> <div class="concept"> <h2>フレッシュな素材にこだわったイタリアン</h2> <p> <span>Fresco Italiano</span>では、厳選された新鮮な素材を使用したイタリアンを提供しています。<br> 地元の農家から直接仕入れた野菜や、新鮮な魚介類を使用し、季節ごとに変わるメニューをお楽しみいただけます。<br> また、パスタやピザなども手作りで提供しており、素材の味を最大限に引き出したイタリアンを提供しています。 </p> <div class="concept-gallery"> <p><img src="img/concept01.jpg" alt=""></p> <p><img src="img/concept02.jpg" alt=""></p> <p><img src="img/concept03.jpg" alt=""></p> </div><!-- /.concept-gallery --> </div><!-- /.concept --> <section id="news"> <h2 data-en="NEWS">お知らせ</h2> <dl id="news-list"> </dl> </section><!-- /#news --> <div class="bg-1"></div> <section id="video"> <h2 data-en="VIDEO">動画</h2> <div class="video-wrapper"> <!-- 自動再生の場合 <video src="img/video.mp4" autoplay muted loop playsinline></video> --> <!-- 自動再生じゃない方 --> <video src="img/video.mp4" controls></video> </div> </section><!-- /#video --> <section id="menu"> <h2 data-en="MENU">メニュー</h2> <div class="menu-wrapper"> <div class="menu-box"> <a href="img/menu01.jpg" data-lightbox="menu-photo"> <h3>料理名1</h3> <p class="photo"><img src="img/menu01.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu02.jpg" data-lightbox="menu-photo"> <h3>料理名2</h3> <p class="photo"><img src="img/menu02.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu03.jpg" data-lightbox="menu-photo"> <h3>料理名3</h3> <p class="photo"><img src="img/menu03.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu04.jpg" data-lightbox="menu-photo"> <h3>料理名4</h3> <p class="photo"><img src="img/menu04.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu05.jpg" data-lightbox="menu-photo"> <h3>料理名5</h3> <p class="photo"><img src="img/menu05.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu06.jpg" data-lightbox="menu-photo"> <h3>料理名6</h3> <p class="photo"><img src="img/menu06.jpg" alt=""></p> </a> </div><!-- /.menu-box --> </div><!-- /.menu-wrapper --> </section><!-- /#menu --> <section id="information"> <h2 data-en="INFORMATION">店舗情報</h2> <div class="info-wrapper"> <div class="tw"> <h3>Twitter</h3> <div class="tw-inner"> <a class="twitter-timeline" data-width="320" data-height="400" data-theme="light" href="https://twitter.com/city_toshima?ref_src=twsrc%5Etfw">Tweets by city_toshima</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> </div><!-- /.tw --> <div class="map-wrapper"> <h3>Map</h3> <div class="map-inner"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.001034902998!2d139.714069209994!3d35.72619307245836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6eab47fe49%3A0x3b9428a70a1ead3e!2z6LGK5bO25Yy65b255omA!5e0!3m2!1sja!2sjp!4v1681783722622!5m2!1sja!2sjp" class="g-map" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> </div><!-- /.map-wrapper --> </div><!-- /.info-wrapper --> </section><!-- /#information --> <div class="bg-2"></div> <section id="faq"> <h2 data-en="FAQ">よくあるご質問</h2> <div class="faq-wrapper"> <details open> <summary> 予約は必要ですか？ </summary> <p> はい、予約は必要です。弊社のレストランは多くのお客様にご利用いただいておりますため、事前にご予約いただくことをおすすめしています。 </p> </details> <details> <summary>営業時間は何時から何時までですか？</summary> <p>弊社の営業時間は、平日は午前11時から午後10時まで、週末は午前10時から午後11時までとなっております。<br>ただし、祝日や特別なイベントなどによって異なる場合がございますので、事前にご確認ください。</p> </details> <details> <summary>ベジタリアンメニューはありますか？</summary> <p>はい、ベジタリアンメニューもご用意しております。弊社のシェフが厳選した、新鮮で美味しい野菜を使った料理をご堪能いただけます。</p> </details> <details> <summary>お子様向けのメニューはありますか？</summary> <p>はい、お子様向けのメニューもご用意しております。お子様に人気のある料理を、お子様サイズでご提供しております。また、高い椅子やおもちゃなどもご用意しておりますので、お子様連れのお客様も安心してお食事をお楽しみいただけます。</p> </details> </div><!-- /.faq-wrapper --> </section><!-- /#faq --> <div class="carousel"> <ul class="bxslider2"> <li><img src="img/concept01.jpg" alt=""></li> <li><img src="img/concept02.jpg" alt=""></li> <li><img src="img/concept03.jpg" alt=""></li> <li><img src="img/menu01.jpg" alt=""></li> <li><img src="img/menu02.jpg" alt=""></li> <li><img src="img/menu05.jpg" alt=""></li> <li><img src="img/menu06.jpg" alt=""></li> </ul> </div> </main> <footer> <p><small>© 2020-<span id="this-year"></span> Fresco Italiano</small></p> </footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js' integrity='sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==' crossorigin='anonymous'></script> <script src="js/jquery.bxslider.js"></script> <script src="js/lightbox.js"></script> <script> $(function(){ //bxsliderその１ $('.bxslider').bxSlider({ mode: 'fade', auto: true,//trueがon pager: false,//falseがoff controls: false, speed: 2000, pause: 2000, }); //カルーセル $('.bxslider2').bxSlider({ ticker: true, minSlides: 1, maxSlides: 4, moveSlides: 0, slideWidth: 320, shrinkItems: false, speed: 60000, }); //news記事の呼び出し $('#news-list').load('news.txt'); //西暦の取得 let today = new Date().getFullYear(); console.log(today); $('#this-year').text(today); //ハンバーガーメニュー $('#g-nav').hide(); //#ham-btnをon.clickしたら $('#ham-btn').on('click',function(){ $(this).toggleClass('is-active'); $('#g-nav').fadeToggle(200); }); //#g-nav aをクリックしたら#g-navをfadeOutする $('#g-nav a').on('click',function(){ $('#g-nav').fadeOut(200); $('#ham-btn').removeClass('is-active'); }); }); </script> </body> </html>
@charset "utf-8"; /* 変数の登録 */ :root{ --main_color:#3aa24a; --sub_color:#e7b59e; --ja:'BIZ UDPGothic', sans-serif; --en:'Pacifico', cursive; } 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;} /* スムーススクロール */ html{ scroll-behavior: smooth; } section{ scroll-margin-top: 50px; } /* header部分 */ header{ width: 100%; height: 80px; background-color: var(--main_color); display: flex; justify-content: space-between; align-items: center; padding-left: 15px; position: sticky; top: 0; left: 0; z-index: 100; } h1{ font-family: var(--en); font-size: 38px; } /* ナビ部分 */ #g-nav{ width: 100%; height: calc(100vh - 80px); background: url(../img/nav-bg.jpg) no-repeat center center/cover; position: fixed; top: 80px; left: 0; z-index: 100; display: flex; flex-direction: row-reverse; } #g-nav>ul{ width: 50%; height: 100%; background-color: #c96735ba; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 6%; } #g-nav li{ margin-bottom: 10px; } #g-nav a{ display: block; padding: 6px 0 4px; color: #FFF; border-bottom: 2px solid #FFF; transition: 0.1s; } #g-nav a:hover{ text-indent: 2em; } /* メインビジュアル部分 */ .main-visual{ width: 100%; height: calc(100vh - 80px);/* デバイス毎の1画面分の高さ */ position: relative; } .main-visual li{ width: 100%; height: calc(100vh - 80px); } .main-visual img{ object-fit: cover; width: 100%; height: 100%; } .tag-line{ position: absolute; z-index: 10; top: 200px; left: 100px; background-color: #df7450dd; color: #FFF; font-size: 24px; font-family: var(--ja); padding: 16px; } /* コンセプト部分 */ .concept{ padding: 100px 10px; text-align: center; } .concept>h2{ margin-bottom: 50px; } .concept>p{ margin-bottom: 100px; } .concept span{ font-family: var(--en); font-size: 17px; } .concept-gallery{ width: 600px; margin: 0 auto 300px; position: relative; } .concept-gallery>p:nth-of-type(1){ box-shadow: 16px 16px 0 #c1dee1; } .concept-gallery>p:nth-of-type(2){ width: 60%; position: absolute; left: -120px; bottom: -140px; box-shadow: 16px 16px 0 #b6bf9a; } .concept-gallery>p:nth-of-type(3){ width: 34%; position: absolute; right: -60px; bottom: -180px; box-shadow: 16px 16px 0 #da9959; } section{ padding: 50px 10px 100px; } /* セクションの見出し */ section>h2{ text-align: center; margin-bottom: 60px; font-family: var(--ja); color: var(--main_color); font-size: 32px; } section>h2::before{ content: attr(data-en); display: block; font-size: 20px; color: var(--sub_color); font-family: var(--en); } /* お知らせ部分 */ #news-list{ max-width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap; } #news-list>dt{ width: 25%; padding: 30px 20px 10px; font-weight: bold; border-bottom: 2px solid var(--main_color); } #news-list>dd{ width: 75%; padding: 30px 20px 10px; border-bottom: 2px solid var(--main_color); } #news-list>dt:nth-of-type(n+4){ display: none; } #news-list>dd:nth-of-type(n+4){ display: none; } /* 動画部分 */ .video-wrapper{ width: 60%; aspect-ratio: 16 / 9; margin: 0 auto; } .video-wrapper>video{ object-fit: cover; width: 100%; aspect-ratio: 16 / 9; } /* メニュー部分 */ .menu-wrapper{ max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 60px 40px;/* 縦、横の順 */ } .menu-box{ width: calc((100% - 80px) / 3); } .menu-box h3{ margin-bottom: 10px; font-size: 22px; font-family: var(--ja); } .menu-box>a{ color: var(--main_color); } .menu-box .photo{ border-radius: 14px; overflow: hidden; } .menu-box img{ transform: scale(1); transition: 0.3s; } .menu-box:hover img{ transform: scale(1.1); } .menu-box:nth-of-type(3n+1){ margin-top: -50px; } .menu-box:nth-of-type(3n){ margin-top: 50px; } /* 店舗情報部分 */ .info-wrapper{ max-width: 960px; margin: 0 auto; display: flex; justify-content: space-between; } .tw{ width: 320px; } .map-wrapper{ width: calc(100% - 380px); } .map-inner{ width: 100%; height: 400px; } .g-map{ width: 100%; height: 100%; } .info-wrapper h3{ font-family: var(--en); color: var(--main_color); font-size: 22px; margin-bottom: 8px; text-align: center; } /* 質問部分 */ .faq-wrapper{ max-width: 960px; margin: 0 auto; } .faq-wrapper>details{ background-color: #e4f8d7; padding: 20px; border-radius: 10px; margin-bottom: 60px; } summary{ display: block; font-size: 20px; cursor: pointer; padding-left: 20px; } summary:hover{ text-decoration: underline 4px #eea3a3; text-underline-offset: 4px; } details>p{ background-color: #FFF; padding: 20px; margin-top: 20px; border-radius: 10px; } /* 黒い矢印を消す */ summary { list-style: none; } summary::-webkit-details-marker { display: none;/* iOS仕様 */ } /* カルーセル部分 */ .carousel{ width: 80%; margin: 0 auto; } .bxslider2>li{ height: 260px; } .bxslider2 img{ object-fit: cover; width: 100%; height: 100%; } /* フッター部分 */ footer{ width: 100%; background-color: var(--main_color); } footer>p{ text-align: center; padding: 40px 0; font-size: 18px; color: #FFF; } /* パララックス部分 */ .bg-1{ width: 100%; height: 100vh; background: url(../img/bg01.jpg) no-repeat center center/cover; background-attachment: fixed; } .bg-2{ width: 100%; height: 100vh; background: url(../img/bg02.jpg) no-repeat center center/cover fixed;/* iosは効かない */ }
