WEBサイト制作の勉強

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

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

10月24日の作業データ（レストランサイトの演習）

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">
<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>Trattoria 南池袋</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="#video" data-en="VIDEO">動画</a></li>
<li><a href="#menu" data-en="MENU">メニュー</a></li>
<li><a href="#shop" data-en="SHOP">店舗情報</a></li>
<li><a href="#reserve" data-en="RESERVE">ご予約</a></li>
</ul>
</nav>
<p class="hamburger hamburger--stand" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

<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>テイクアウト専門の<br class="sp-on">本格イタリアレストラン</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>
<div class="shop-wrapper">
<dl class="shop-list">
<dt>住所</dt>
<dd>東京都豊島区南池袋1-1-1</dd>
<dt>電話番号</dt>
<dd><a class="tel-number" href="tel:03-3333-0000">03-3333-0000</a></dd>
<dt>営業時間</dt>
<dd>11:00~22:00</dd>
<dt>定休日</dt>
<dd>水曜日</dd>
</dl>
<div class="map-outer">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9454666378547!2d139.7117402744797!3d35.727559672572326!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1697504158933!5m2!1sja!2sjp" class="g-map" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

</div><!-- /.shop-wrapper -->
</section>



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

<section id="reserve">
<h2 data-en="RESERVE">ご予約</h2>
<div class="form-wrapper">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfYoxqSjl-1Wsu5FHYHdKDhyhScQUswrA-ou1l2A5bsZLzoWg/viewform?embedded=true" class="g-form" height="1540" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
</div><!-- /.form-wrapper -->
</section>
</main>
<div class="carousel">
<p><img src="img/menu-1.jpg" alt=""></p>
<p><img src="img/menu-2.jpg" alt=""></p>
<p><img src="img/menu-3.jpg" alt=""></p>
<p><img src="img/menu-4.jpg" alt=""></p>
<p><img src="img/menu-5.jpg" alt=""></p>
<p><img src="img/menu-6.jpg" alt=""></p>
<p><img src="img/lead-1.jpg" alt=""></p>
<p><img src="img/lead-2.jpg" alt=""></p>
</div>
<footer>
<p><small>&copy; <span id="full-year"></span> Trattoria 南池袋</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
  speed: 2000,
  pause: 2000,
  });


//お知らせ部分
$('#news-list').load('news-list.txt');



//カルーセル部分
$('.carousel').bxSlider({
ticker: true,
speed: 40000,
minSlides: 2,
maxSlides: 4,
slideWidth: 400,
});


//ハンバーガーボタン
//まずナビゲーションを隠す
$('#g-nav').hide();
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#g-nav').fadeToggle(300);
});


//西暦の取得
let today = new Date().getFullYear();
console.log(today);
if(today > 2023){
$('#full-year').text('2023-'+today);
}else{
$('#full-year').text(today);
}

//ナビボタンをクリックしたらナビゲーションを隠す
$('#g-nav a').on('click',function(){
$('#g-nav').fadeOut(300);
$('#ham-btn').removeClass('is-active');
});



});
</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;
/* outline: 2px solid red; */
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}

/* スムーススクロールの設定 */
html{
scroll-behavior: smooth;
}


header{
background-color: var(--color_2);
width: fit-content;
padding: 40px;
color: #FFF;
position: absolute;
left: 100px;
top: 100px;
z-index: 20;
@media (max-width:600px){
top: 140px;
right: 0;
left: 0;
margin: auto;
z-index: 5;
}
}

/* 改行を無効にする */
.sp-on{
display: none;
@media (max-width:960px){
display: block;
}
}

/* ナビゲーション部分 */
#g-nav{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: url(../img/nav-bg.webp) no-repeat center center/cover;
display: flex;
flex-direction: row-reverse;
padding-bottom: 50px;
@media (max-width:960px){
padding: 20px;
}
>ul{
width: 50%;
background-color: #FFFFFF99;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 100px;
@media (max-width:960px){
width: 100%;
padding:100px 20px 40px;
}

>li{
margin-bottom: 20px;
>a{
display: block;
color: #222;
font-size: 18px;
border-bottom: 2px solid #222;
padding: 6px;
&:hover{
color: var(--color_2);
border-bottom: 2px solid var(--color_2);
text-indent: 1em;
transition: 0.1s;
}
}
}
}
}


/* メインビジュアル部分 */
.main-visual{
width: 100%;
height: 100vh;
margin: 0 auto;
@media (max-width:600px){
height: 60vh;
}
}
.main-visual li{
width: 100%;
height: 100vh;
@media (max-width:600px){
height: 60vh;
}
}
.main-visual img{
object-fit: cover;
width: 100%;
height: 100%;
}

/* メインコピー部分 */
.main-copy{
width: 80%;
margin: 0 auto;
text-align: center;
font-family: var(--font_ja);
padding: 160px 10px;
@media (max-width:600px){
padding: 80px 10px;
}
}
.main-copy>h2{
font-size: 36px;
margin-bottom: 50px;
@media (max-width:600px){
font-size: 24px;
}
}
.lead{
font-size: 20px;
line-height: 2;
}

/* ギャラリー部分 */
.gallery{
max-width: 600px;
margin: 0 auto 200px;
position: relative;
@media (max-width:960px){
width: 70%
}
}
.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);
@media (max-width:960px){
right: 20px;
bottom: -170px;
width: 70%;
}
}

/* 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;
@media (max-width:960px){
background: url(../img/parallax-1.webp) no-repeat center center/cover scroll;
height: 60vh;
}
}
.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;
@media (max-width:600px){
width: 100%;
}
}
.yt{
width: 100%;
height: 100%;
}

/* メニュー部分 */
.menu-wrapper{
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
gap: 80px 40px;/* 上下、左右の順 */
@media (max-width:600px){
gap: 40px 10px;/* 上下、左右の順 */
}
}
  
.menu-box{
width: calc((100% - 80px) / 3);
border: 1px solid #333;
padding: 20px;
@media (max-width:960px){
width: calc((100% - 40px) / 2);
}
@media (max-width:600px){
width: calc((100% - 10px) / 2);
}
}
.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;
}

/* 店舗情報部分 */
.shop-wrapper{
width: 90%;
margin: 0 auto;
display: flex;
gap: 0 40px;
@media (max-width:960px){
display: block;
}
}
.shop-list{
width: calc((100% - 80px) / 3);
display: flex;
flex-wrap: wrap;
border: 1px solid #333;
@media (max-width:960px){
width: 100%;
margin-bottom: 80px;
}
}
.shop-list>dt{
width: 30%;
background-color: #eeeeaa;
padding: 20px;
border-right: 1px solid #333;
}
.shop-list>dd{
width: 70%;
padding: 20px;
}
.shop-list>dt:nth-of-type(n+2){
border-top: 1px solid #333;
}
.shop-list>dd:nth-of-type(n+2){
border-top: 1px solid #333;
}
/* 電話番号の処理 */
.tel-number{
color: #333;
pointer-events: none;/* クリックを無効にする */
}

.map-outer{
width: calc((100% - 80px) / 3 * 2 + 40px);
aspect-ratio: 2 / 1;/* 横/縦の比率 */
@media (max-width:960px){
width: 100%;
aspect-ratio: 1 / 1;/* 横/縦の比率 */
}
}
.g-map{
width: 100%;
height: 100%;
filter: grayscale(1);/* 0~1の間で白黒にする */
transition: 0.3s;
&:hover{
filter: grayscale(0);
}
}

/* 予約フォーム */
.form-wrapper{
max-width: 640px;
margin: 0 auto 100px;
}
.g-form{
width: 100%;
}

/* カルーセル部分 */
.carousel{
display: flex;
>p{
width: 20%;
aspect-ratio: 4 / 3;
>img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
}

/* フッター */
footer{
width: 100%;
background-color: var(--color_2);
>p{
text-align: center;
font-size: 20px;
color: #FFF;
padding: 30px 0;
}
}
/* ハンバーガーボタン */
#ham-btn{
position: fixed;
top: 0;
right: 0;
z-index: 20;
background-color: #FFF;
padding: 30px;
&:hover{
opacity: 1;
}
}