WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

12月15日の作業データ（レストランサイト）

2023年10月クラス

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=Kaisei+Decol&family=Roboto+Slab&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">
</head>
<body>
<header>
<h1>イル・パラディーゾ 南池袋</h1>
<p class="tag-line">天国のような空間で特別なひとときを</p>
</header>

<p class="hamburger hamburger--elastic" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

<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="INFO">店舗情報</a></li>
<li><a href="#" 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-visual -->

<div class="main-text">
<h2>天国のような空間でイタリアンを楽しむ</h2>
<p class="lead">イタリア料理の魅力は、その豊かな味わいと、イタリアの豊かな文化や歴史が詰まっていることです。<br>
当店では、本場イタリアから取り寄せた食材を使用し、伝統的なイタリア料理を丁寧に調理しております。<br>
また、店内はイタリアの雰囲気を再現した、落ち着いた空間となっております。<br>
大切な人と、ゆったりとしたひとときをお過ごしください。</p>
</div><!-- /.main-text -->

<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">
<h2 data-en="NEWS">お知らせ</h2>
<dl id="news-list">
</dl>
</section><!-- /#news -->


<div class="parallax-1"></div>

<section id="video">
<h2 data-en="VIDEO">動画</h2>
<div class="video-wrapper">
<iframe  src="https://www.youtube.com/embed/RRfUKzMnFOM?si=G2-KMumHlW32ci0J" 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>

<section id="menu">
<h2 data-en="MENU">メニュー</h2>
<div class="menu-wrapper">

<div class="menu-box">
<a href="img/menu-1.jpg" data-lightbox="menu" data-title="料理の名前">
<h3>Lorem, ipsum.</h3>
<p class="menu-photo"><img src="img/menu-1.jpg" alt=""></p>
<p class="menu-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, soluta.</p>
</a>
</div><!-- /.menu-box -->

<div class="menu-box">
<a href="img/menu-2.jpg" data-lightbox="menu">
<h3>Lorem, ipsum.</h3>
<p class="menu-photo"><img src="img/menu-2.jpg" alt=""></p>
<p class="menu-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, soluta.</p>
</a>
</div><!-- /.menu-box -->

<div class="menu-box">
<a href="img/menu-3.jpg" data-lightbox="menu">
<h3>Lorem, ipsum.</h3>
<p class="menu-photo"><img src="img/menu-3.jpg" alt=""></p>
<p class="menu-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, soluta.</p>
</a>
</div><!-- /.menu-box -->

<div class="menu-box">
<a href="img/menu-4.jpg" data-lightbox="menu">
<h3>Lorem, ipsum.</h3>
<p class="menu-photo"><img src="img/menu-4.jpg" alt=""></p>
<p class="menu-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, soluta.</p>
</a>
</div><!-- /.menu-box -->

<div class="menu-box">
<a href="img/menu-5.jpg" data-lightbox="menu">
<h3>Lorem, ipsum.</h3>
<p class="menu-photo"><img src="img/menu-5.jpg" alt=""></p>
<p class="menu-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, soluta.</p>
</a>
</div><!-- /.menu-box -->

<div class="menu-box">
<a href="img/menu-6.jpg" data-lightbox="menu">
<h3>Lorem, ipsum.</h3>
<p class="menu-photo"><img src="img/menu-6.jpg" alt=""></p>
<p class="menu-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, soluta.</p>
</a>
</div><!-- /.menu-box -->


</div><!-- /.menu-wrapper -->
</section><!-- /#menu -->

<section id="info">
<h2 data-en="INFO">店舗情報</h2>
<div class="info-wrapper">
<dl>
<dt>住所</dt>
<dd>東京都豊島区南池袋x-x-x</dd>
<dt>電話番号</dt>
<dd><a class="tel-num" href="tel:03-1111-0000">03-1111-0000</a></dd>
<dt>営業時間</dt>
<dd>11:00 ~ 22:00</dd>
<dt>定休日</dt>
<dd>水曜日</dd>
<dt>座席数</dt>
<dd>60席</dd>
</dl>
<div class="map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289559081!2d139.7117402746393!3d35.7275640274293!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1702528822467!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-wrapper -->
</div><!-- /.info-wrapper -->
</section><!-- /#info -->

<div class="parallax-2"></div>

<section id="faq">
<h2 data-en="FAQ">よくある質問</h2>
<details open>
<summary data-question="Q">予約は必要ですか？</summary>
<p class="answer" data-answer="A">はい、予約をおすすめしております。当店は人気店のため、特に週末や祝日はご予約がおすすめです。</p>
</details>

<details>
<summary data-question="Q">パーティーや貸切は可能ですか？</summary>
<p class="answer" data-answer="A">はい、可能です。お気軽にお問い合わせください。当店では10名様以上のパーティーや貸切に対応しております。</p>
</details>

<details>
<summary data-question="Q">アレルギーやベジタリアン対応はできますか？</summary>
<p class="answer" data-answer="A">はい、可能です。お気軽にお問い合わせください。当店では、アレルギーやベジタリアンの方にもご満足いただけるメニューをご用意しております。</p>
</details>
</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>


<footer>
<p><small>&copy; 2016-<span id="this-year"></span> イル・パラディーゾ 南池袋</small></p>
</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
 controls: false,
 speed: 2000,//画像が切り替わる速度
 pause: 2000,//画像が止まっている時間
 });

//ajaxで外部ファイルを呼び出す
$('#news-list').load('news-list.txt');

//西暦の取得
let today = new Date().getFullYear();
console.log(today);
$('#this-year').text(today);

//カルーセルの設定
$('.bxslider2').bxSlider({
ticker: true,
speed: 60000,
minSlides: 2,//スマホ時の表示枚数
maxSlides: 5,//pc時の表示枚数
slideWidth: 300,//画像の幅
});

//ハンバーガーボタン
//#ham-btnをon.clickしたら
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
});


});
</script>
</body>
</html>


style.css

@charset "utf-8";

/* 変数の登録 */
:root{
--font_ja:'Kaisei Decol', serif;
--font_en:'Roboto Slab', serif;
--color_1:#167620;
--color_2:#cd2727;
--color_3:#ebd4b4;
}

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レイアウト */
#g-nav{
display: none;
}
header{
background-color: #0e871fb7;
position: absolute;
left: 50px;
top: 50px;
z-index: 10;
padding: 40px 20px;
color: #FFF;
font-family: var(--font_ja);
>h1{
font-size: 40px;
}
}

/* ハンバーガーボタン */
#ham-btn{
background-color: #FFF;
position: fixed;
top: 0;
right: 0;
z-index: 30; /* z-indexを一番上にする */
padding: 30px;
&:hover{
background-color: #d7d9dd;
transition: 0.3s;
}
}

/* メインビジュアル部分 */
.main-visual{
width: 100%;
height: 100vh;
}
.main-visual li{
width: 100%;
height: 100vh;
>img{
object-fit: cover;
object-position: center bottom;
width: 100%;
height: 100%;
}
}

/* メインテキスト部分 */
.main-text{
padding: 140px 10px;
text-align: center;
>h2{
font-family: var(--font_ja);
font-size: 30px;
margin-bottom: 30px;
}
>.lead{
font-size: 18px;
line-height: 2.4;
}
}

/* ギャラリー部分 */
.gallery{
max-width: 600px;
margin: 0 auto 140px;
position: relative;
>p:nth-of-type(1){
box-shadow: 20px 20px 0 var(--color_2);
}
>p:nth-of-type(2){
width: 50%;
position: absolute;
right: -20%;
bottom: -25%;
box-shadow: 20px 20px 0 var(--color_1);/* 横、縦、影のぼかしの量、影の色 */
}
}


/* 共通部分 */
section{
padding: 100px 0;
>h2{
text-align: center;
font-size: 30px;
margin-bottom: 60px;
color: var(--color_1);
font-family: var(--font_ja);
&::before{
content: attr(data-en);
display: block;
font-family: var(--font_en);
font-size: 26px;
color: var(--color_2)
}
}
}

/* お知らせ部分 */
#news-list{
max-width: 680px;
margin: 0 auto 100px;
display: flex;
flex-wrap: wrap;
font-size: 18px;
>dt{
width: 30%;
margin-bottom: 20px;
border-bottom: 2px solid var(--color_2);
padding: 10px;
}
>dd{
width: 70%;
margin-bottom: 20px;
border-bottom: 2px solid var(--color_2);
padding: 10px;
}
dt:nth-of-type(n+4){
display: none;
}
dd:nth-of-type(n+4){
display: none;
}
}


/* パララックス部分 */
.parallax-1{
width: 100%;
height: 100vh;
background: url(../img/bg-1.webp) no-repeat center bottom/cover fixed;
}
.parallax-2{
width: 100%;
height: 100vh;
background: url(../img/bg-2.webp) no-repeat center center/cover fixed;
}

/* 動画部分 */
.video-wrapper{
width: 60%;
aspect-ratio: 16 / 9;
margin: 0 auto;
>iframe{
width: 100%;
height: 100%;
}
}


/* メニュー部分 */
.menu-wrapper{
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 80px 60px;/* 縦、横の余白 */
flex-wrap: wrap;
>.menu-box{
width: calc((100% - 120px) / 3);
padding: 16px;
transition: 0.3s;
&:hover{
box-shadow: 0 0 8px #999;
}
>a{
color: #111;
>h3{
text-align: center;
font-size: 26px;
margin-bottom: 10px;
}
>.menu-photo{
margin-bottom: 10px;
}
}
}
}


/* 店舗情報部分 */
.info-wrapper{
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 0 40px;
>dl{
width: calc((100% - 40px) / 3);
display: flex;
flex-wrap: wrap;
border: 1px solid #4b4b4b;
dt{
width: 30%;
background-color: #b7c7db;
padding: 10px;
border-right: 1px solid #4b4b4b;
&:nth-of-type(n+2){
border-top: 1px solid #4b4b4b;
}
}
dd{
width: 70%;
padding: 10px;
&:nth-of-type(n+2){
border-top: 1px solid #4b4b4b;
}
}
}
>.map-wrapper{
width: calc((100% - 40px) / 3 * 2);
aspect-ratio: 2.5 / 1;
>iframe{
width: 100%;
height: 100%;
}
}
}

/* 電話番号の設定 */
.tel-num{
pointer-events: none;/* 電話のリンクを無効にする */
color: #111;
@media (max-width:960px){
pointer-events: auto;/* 電話のリンクを有効にする */
}
}


/* よくある質問部分 */
details{
max-width: 800px;
margin: 50px auto;
>summary{
background-color: var(--color_3);
padding: 20px;
font-size: 20px;
&::before{
content: attr(data-question);
color: var(--color_2);
font-size: 26px;
margin-right: 20px;
}
}
>.answer{
background-color: #e7f6dd;
padding: 20px 20px 20px 58px;
font-size: 18px;
text-indent: -38px;
&::before{
content: attr(data-answer);
font-size: 26px;
margin-right: 20px;
color: var(--color_1);
}
}
}

/* 黒い三角を消す */
summary{
list-style: none;
}
summary::-webkit-details-marker{
list-style: none;/* iOS用のリセット */
}


/* カルーセル部分 */
.carousel li{
width: 300px;
aspect-ratio: 1 / 1;
>img{
object-fit: cover;
width: 100%;
height: 100%;
}
}



/* フッター部分 */
footer{
background-color: var(--color_1);
padding: 40px 0;
>p{
text-align: center;
color: #FFF;
font-size: 18px;
}
}