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="トラットリ ア・ソラーレは、厳選食材と自家製パスタで創る、こだわりのイタリアンです。太陽の光を浴びたような、あたたかい空間で、心ゆくまでイタリアの味を楽しむ事ができます。"> <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=Kaisei+Opti&family=Playwrite+DK+Uloopet:wght@100..400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/vegas.css"> <link rel="stylesheet" href="css/hamburgers.css"> <link rel="stylesheet" href="css/lightbox.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="shortcut icon" href="favicon.png"> <link rel="apple-touch-icon" href="touch-icon.png"> </head> <body id="top"> <header> <h1>トラットリア・ソラーレ<span>Trattoria Solare</span></h1> <p class="tag-line">陽光降り注ぐ、自家製パスタとワインのお店</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="#menu" data-en="MENU">メニュー</a></li> <li><a href="#movie" data-en="MOVIE">動画</a></li> <li><a href="#shop" data-en="SHOP">店舗情報</a></li> <li><a href="#faq" data-en="FAQ">よくある質問</a></li> <li><a href="#">X(旧Twitter)</a></li> <li><a href="#">LINE</a></li> </ul> </nav> <button class="hamburger hamburger--collapse" type="button" id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <a href="form/" class="to-form">ご予約はこちらから</a> <div id="main-visual"></div> <div class="main-copy"> <h2>本場の味を、もっと身近に。</h2> <p class="lead">厳選食材と自家製パスタで創る、<br class="sp-on">こだわりのイタリアン。<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 --> <main> <section id="news" class="content"> <h3 data-en="NEWS">お知らせ</h3> <dl id="news-list"> </dl> </section> <section id="menu" class="content"> <h3 data-en="MUEN">メニュー</h3> <div class="menu-wrapper"> <div class="menu-box"> <a href="img/menu-1.jpg" data-lightbox="menu"> <p class="menu-title">ペスカトーレ</p> <p class="menu-photo"><img src="img/menu-1.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-2.jpg" data-lightbox="menu"> <p class="menu-title">カルボナーラ</p> <p class="menu-photo"><img src="img/menu-2.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-3.jpg" data-lightbox="menu"> <p class="menu-title">マルゲリータ</p> <p class="menu-photo"><img src="img/menu-3.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-4.jpg" data-lightbox="menu"> <p class="menu-title">クアトロフォルマッジ</p> <p class="menu-photo"><img src="img/menu-4.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-5.jpg" data-lightbox="menu"> <p class="menu-title">ティラミス </p> <p class="menu-photo"><img src="img/menu-5.jpg" alt=""></p> </a> </div><!-- /.menu-box --> <div class="menu-box"> <a href="img/menu-6.jpg" data-lightbox="menu"> <p class="menu-title">パンナコッタ </p> <p class="menu-photo"><img src="img/menu-6.jpg" alt=""></p> </a> </div><!-- /.menu-box --> </div><!-- /.menu-wrapper --> </section> <div class="parallax"></div><!-- /.parallax --> <section id="movie" class="content"> <h3 data-en="MOVIE">動画</h3> <div class="movie-inner"> <iframe src="https://www.youtube.com/embed/lAmEMJ8ylMY?si=3hm4LHiZGXmcanLh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div><!-- /.movie-inner --> </section> <section id="shop" class="content"> <h3 data-en="SHOP">店舗情報</h3> <div class="shop-container"> <div class="g-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289559088!2d139.7117402746393!3d35.72756402742931!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1722240907065!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- /.g-map --> <div class="shop-wrapper"> <dl> <dt>住所</dt><dd>東京都豊島区南池袋1-2-x</dd> <dt>電話番号</dt><dd><a class="tel" href="tel:03-3333-xxxx">03-3333-xxxx</a></dd> <dt>メールアドレス</dt><dd><a href="mailto:example@email.com">example@email.com</a></dd> </dl> <dl> <dt>営業時間</dt><dd>11:00 ~ 22:00</dd> <dt>定休日</dt><dd>年末年始</dd> <dt>席数</dt><dd>70席</dd> </dl> </div><!-- /.shop-wrapper --> </div><!-- /.shop-container --> </section> <section id="faq" class="content"> <h3 data-en="FAQ">よくある質問</h3> <details open name="faq"> <summary data-question="Q">お店の自慢のメニューはなんですか？お店の自慢のメニューはなんですか？</summary> <p class="answer" data-answer="A">当店は、自家製パスタに特に力を入れております。特に、季節の野菜を使ったパスタは、その時期ならではの美味しさを味わっていただけます。また、薪窯で焼き上げるピッツァも、外はカリッと中はもちもちの食感が大好評です。</p> </details> <details name="faq"> <summary data-question="Q">ベジタリアンメニューやグルテンフリーのメニューはありますか？</summary> <p class="answer" data-answer="A">はい、ございます。事前にご連絡いただければ、お客様のご要望に合わせたメニューをご用意いたします。ベジタリアン向けの野菜たっぷりのパスタや、グルテンフリーのピザなどもご用意可能です。</p> </details> <details name="faq"> <summary data-question="Q">予約はできますか？</summary> <p class="answer" data-answer="A">はい、ご予約いただけます。特に週末や祝日は、満席になる場合がございますので、ご予約をおすすめいたします。お電話またはホームページより、ご予約を受け付けております。</p> </details> <details name="faq"> <summary data-question="Q">子供連れでも大丈夫ですか？</summary> <p class="answer" data-answer="A">はい、お子様連れのお客様も大歓迎です。お子様用の椅子や食器もご用意しております。また、アレルギーをお持ちのお子様がいらっしゃる場合は、お気軽にご相談ください。</p> </details> </section> <div class="carousel"> <ul class="bxslider"> <li><img src="img/menu-1.jpg" alt=""></li> <li><img src="img/menu-2.jpg" alt=""></li> <li><img src="img/gallery-1.jpg" alt=""></li> <li><img src="img/menu-4.jpg" alt=""></li> <li><img src="img/gallery-2.jpg" alt=""></li> <li><img src="img/menu-3.jpg" alt=""></li> <li><img src="img/menu-5.jpg" alt=""></li> <li><img src="img/menu-6.jpg" alt=""></li> </ul> </div><!-- /.carousel --> </main> <footer> <p><small>© <span id="this-year"></span>トラットリ ア・ソラーレ</small></p> </footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script> <script src="js/vegas.js"></script> <script src="js/script.js"></script> <script src="js/lightbox.js"></script> <script src="js/jquery.bxslider.js"></script> </body> </html>
style.css
@charset "utf-8"; :root{ --base:#f7f7f7; --color_1:#9b1717; --color_2:#35945d; --color_3:#dcebdd; --text_color:#333; --font_ja:"Kaisei Opti", serif; --font_en:"Playwrite DK Uloopet", cursive; } html{ scroll-behavior: smooth; } body{ background-color: var(--base); color: var(--text_color); } 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;} /* header部分 */ header{ width: fit-content; height: auto; background-color: #f7f7f79d; backdrop-filter: blur(10px); padding: 30px 20px; position: absolute; left: 100px; top: 200px; z-index: 10; color: var(--color_1); font-family: var(--font_ja); /* 640px以下 */ @media (max-width:640px){ width: 90%; left: 0; right: 0; top: 80px; margin: auto; } } h1{ font-size: 30px; margin-bottom: 16px; >span{ font-family: var(--font_en); display: block; font-size: 0.75em; color: var(--color_2); } } .tag-line{ font-size: 20px; } /* 640px以下 */ @media (max-width:640px){ h1{ font-size: 28px; } .tag-line{ font-size: 18px; } } /* ハンバーガーボタン */ #ham-btn{ position: fixed; right: 0; top: 0; z-index: calc(infinity); background-color: var(--base); &:hover{ opacity: 1; background-color: #ffffff; box-shadow: 0 0 3px #999; transition: 0.2s; } } /* ナビゲーション */ #g-nav{ width: 100%; height: 100vh; background: url(../img/nav-bg.webp) no-repeat center center/cover; position: fixed; top: 0; left: 0; z-index: 30; display: flex; flex-direction: row-reverse; >ul{ width: 50%; height: 100vh; background-color: #ffffffaa; backdrop-filter: blur(6px); padding: 5%; display: flex; flex-wrap: wrap; justify-content: space-between; >li{ margin-bottom: 16px; width: 100%; >a{ color: var(--text_color); display: block; padding: 6px 0; border-bottom: 2px solid var(--color_1); } &:nth-of-type(n+7){ width: 48%; margin-top: 20px; >a{ display: block; color:#FFF; border-bottom: 0; background: #000000 url(../img/x-twitter-brands-solid.svg) no-repeat 20px center/30px; padding: 10px; text-align: center; &:hover{ box-shadow: 0 0 10px #575757; transition: 0.2s; } } } &:nth-of-type(8)>a{ background: #FFFFFF url(../img/line-brands-solid.svg) no-repeat 20px center/30px; border: 2px solid #06c152; color: #06c152; } &:nth-of-type(-n+6)>a:hover{ padding-left: 20px; font-weight: bold; transition: 0.2s; } } } @media (max-width:960px){ >ul{ width: 70%; } } @media (max-width:640px){ >ul{ width: 90%; height: 90vh; margin: 5vh auto; } } } /* メインビジュアル */ #main-visual{ width: 100%; height: 100vh; @media (max-width:640px){ height: 65vh; } } .form-page>#main-visual{ height: 65vh; } /* メインコピー部分 */ .main-copy{ text-align: center; padding: 150px 10px; font-family: var(--font_ja); >h2{ font-size: 32px; margin-bottom: 30px; } >.lead{ font-size: 20px; line-height: 2; } @media (max-width:640px){ padding: 100px 10px; >h2{ font-size: 26px; } >.lead{ font-size: 18px; } } } /* sp時のみ改行を有効にする */ .sp-on{ display: none;/* 改行を無効にする */ @media (max-width:640px){ display: block;/* 改行を有効にする */ } } /* ギャラリー部分 */ .gallery{ max-width: 620px; margin: 0 auto 200px; position: relative; >p:nth-of-type(1){ box-shadow: -15px 15px 0 var(--color_2); } >p:nth-of-type(2){ width: 50%; position: absolute; right: -80px; bottom: -100px; box-shadow: 15px 15px 0 var(--color_1); } /* 960px以下 */ @media (max-width:960px){ width: 70%; margin-bottom: 120px; >p:nth-of-type(2){ right: -30px; bottom: -70px; } } } /* 共通部分 */ .content{ padding: 100px 10px; >h3{ text-align: center; font-size: 30px; font-family: var(--font_ja); color: var(--color_1); margin-bottom: 50px; &::after{ display: block; content: attr(data-en); font-size: 0.6em; font-family: var(--font_en); color: var(--color_2); } } /* 640px以下 */ @media (max-width:640px){ padding: 60px 10px; >h3{ font-size: 26px; margin-bottom: 30px; } } } /* お知らせ部分 */ #news-list{ max-width: 680px; margin: 0 auto; display: flex; flex-wrap: wrap; >dt{ width: 30%; border-bottom: 2px solid var(--color_2); padding: 20px 20px 10px; margin-bottom: 10px; font-weight: bold; &:nth-of-type(n+4){ display: none; } } >dd{ width: 70%; border-bottom: 2px solid var(--color_2); padding: 20px 20px 10px; margin-bottom: 10px; &:nth-of-type(n+4){ display: none; } } /* 640px以下 */ @media (max-width:640px){ display: block; >dt{ width: 100%; border-bottom: 0; padding: 20px 20px 0; margin-bottom: 0; } >dd{ width: 100%; padding: 10px 20px; } } } /* メニュー部分 */ .menu-wrapper{ max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 80px; >.menu-box{ width: calc((100% - 160px) / 3); >a{ color: var(--color_2); font-size: 20px; font-family: var(--font_ja); text-align: center; } .menu-photo{ width: 100%; margin-top: 10px; aspect-ratio: 1/1; >img{ object-fit: cover; width: 100%; height: 100%; border-radius: 50%;/* 50%以上で正円になる */ border: 1px solid #333; &:hover{ box-shadow: 0 0 12px #777777; transition: 0.2s; } } } } /* 960px以下 */ @media (max-width:960px){ gap:40px 20px; >.menu-box{ width: calc((100% - 20px) / 2); >a{ font-size: 18px; } } } } /* パララックス部分 */ .parallax{ width: 100%; height: 70vh; background: url(../img/parallax.webp) no-repeat center center/cover fixed; /* 960px以下 */ @media (max-width:960px){ height: 50vh; background: url(../img/parallax.webp) no-repeat center center/cover scroll; } } /* 動画部分 */ .movie-inner{ width: 70%; aspect-ratio: 16/9; margin: 0 auto; >iframe{ width: 100%; height: 100%; } /* 640px以下 */ @media (max-width:640px){ width: 90%; } } /* 電話番号の設定 */ .tel{ pointer-events: none;/* クリック出来なくなる */ font-size: 30px; @media (max-width:960px){ pointer-events: all;/* もとに戻す */ font-size: 28px; } } /* 店舗情報部分 */ .shop-container{ width: 70%; margin: 0 auto; >.g-map{ width: 100%; aspect-ratio: 2/1; margin-bottom: 50px; >iframe{ width: 100%; height: 100%; } } .shop-wrapper{ display: flex; gap: 0 4%; >dl{ width: 48%; display: flex; flex-wrap: wrap; font-size: 18px; >dt{ width: 35%; margin-bottom: 30px; align-self: baseline; } >dd{ width: 65%; margin-bottom: 30px; align-self: baseline; >a{ color: var(--text_color); } } } } /* 960px以下 */ @media (max-width:960px){ width: 90%; .shop-wrapper{ flex-direction: column; gap: 40px 0; >dl{ width: 100%; >dt,>dd{ text-align: center; font-size: 14px; } } } } } /* よくある質問部分 */ #faq>details{ max-width: 680px; margin: 0 auto 60px; >summary{ background-color: var(--color_3); font-size: 20px; padding: 10px 20px 10px 50px; list-style: none;/* 黒い三角を消す、ただしPCのみに有効 */ text-indent: -1.5em; &:hover{ background-color: #bce6bf; cursor: pointer; transition: 0.2s; } &::before{ content: attr(data-question); font-family: var(--font_en); font-size: 22px; margin-right: 10px; color: #1d6bca; } } >.answer{ background-color: #f8f2e7; padding: 20px 20px 20px 50px; text-indent: -1.4em; line-height: 1.75; &::before{ content: attr(data-answer); font-family: var(--font_en); margin-right: 10px; color: #b61414; } } } /* カルーセル部分 */ .carousel ul{ display: flex; li{ width: 16.6%; height: 220px; img{ object-fit: cover; width: 100%; height: 100%; } } } /* フッター部分 */ footer{ width: 100%; padding: 40px 0; background-color: var(--color_1); >p{ text-align: center; color: #FFFFFF; } } /* CTAボタン */ .to-form{ width: 280px; text-align: center; padding: 15px 10px 15px 30px; background: var(--color_2) url(../img/icon.svg) no-repeat 10px center/40px; position: fixed; right: 30px; bottom: 50px; z-index: 20; color: #FFF; box-shadow: 0 0 5px #777777; &::after{ content: ""; display: inline-block; width: 10px; height: 10px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; rotate: 45deg; margin-left: 15px; } &:hover{ background-color: #31aa64; &::after{ translate: 5px 0; transition: 0.1s; } } } /* 予約ページ部分 */ .form-inner{ max-width: 640px; margin: 0 auto; >#g-form{ width: 100%; } } /* 完了ページ部分 */ #thanks>p{ text-align: center; font-size: 18px; margin: 60px 0; } .to-toppage{ display: block; text-align: center; color: var(--text_color); &:hover{ text-decoration: underline; } }
script.js
//vegasの呼び出し
$('#main-visual').vegas({
slides: [
{src: "/2024-05/restaurant-site/img/main-1.webp"},
{src: "/2024-05/restaurant-site/img/main-2.webp"},
{src: "/2024-05/restaurant-site/img/main-3.webp"},
],
timer: false,
transition: 'blur',
animation: 'kenburns',
delay:5000,
animationDuration:1000,
});
$(function(){
//ハンバーガーボタン
//まず#g-navを非表示にする
$('#g-nav').hide();
//#ham-btnをon.clickしたら、thisにtoggleClassし、さらに#g-navをfadeToggleする
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#g-nav').fadeToggle(200);
});
//#g-nav aをon.clickしたら、#g-navをfadeOutし×を三本線に戻す
$('#g-nav a').on('click',function(){
$('#g-nav').fadeOut(200);
$('#ham-btn').removeClass('is-active');
});
//ajaxで外部データを呼び出す
$('#news-list').load('/2024-05/restaurant-site/news.txt');
//カルーセル
$('.bxslider').bxSlider({
ticker: true,
speed: 40000,
minSlides: 2,
maxSlides: 6,
slideWidth: 320,
});
//西暦を取得しfullYearに代入する
const fullYear = new Date().getFullYear();
if(fullYear >= 2025){
$('#this-year').text('2024 - '+fullYear);
}else{
$('#this-year').text(fullYear);
}
});
