WEBサイト制作の勉強

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

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

3月17日作業データ(レストランサイトの制作)

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>レストランサイトの制作</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&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body id="top">
<header>
<div class="header-inner">
<h1>Fresco Italiano</h1>
<p class="tag-line">新鮮な素材から生まれるイタリアンの魅力を、南池袋で。</p>
</div><!-- /.header-inner -->
<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="#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="#" data-en="RESERVE">ご予約はこちらから</a></li>
</ul>
<div class="nav-img">
<img src="img/slide02.jpg" alt="">
</div>
</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>
</div><!-- /.main-visual -->

<div class="lead">
<h2>フレッシュな素材にこだわったイタリアン</h2>
<p><span>Fresco Italiano</span>では、厳選された新鮮な素材を使用したイタリアンを提供しています。<br>
地元の農家から直接仕入れた野菜や新鮮な魚介類を使用し、季節ごとに変わるメニューをお楽しみいただけます。<br>
また、パスタやピザなども手作りで提供しており、素材の味を最大限に引き出したイタリアンを提供しています。</p>
</div><!-- /.lead -->
<div class="gallery">
<p><img src="img/slide01.jpg" alt=""></p>
<p><img src="img/slide02.jpg" alt=""></p>
<p><img src="img/menu-01.jpg" alt=""></p>
</div><!-- /.gallery -->

<div id="news">
<h2 class="sub-title" data-en="NEWS">お知らせ</h2>
<dl id="news-list">
<!-- ここにお知らせデータを呼び出す -->

</dl>
</div><!-- /#news -->

<div class="bg-1"></div><!-- パララックス用のdiv -->

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

<div class="menu-wrapper">
<div class="menu-box">
  <a href="img/menu-01.jpg" data-lightbox="menu" data-title="料理名1">
    <h3>料理名1</h3>
    <p><img src="img/menu-01.jpg" alt=""></p>
  </a>
</div><!-- /.menu-box -->

<div class="menu-box">
<a href="img/menu-02.jpg" data-lightbox="menu">
<h3>料理名2</h3>
<p><img src="img/menu-02.jpg" alt=""></p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-03.jpg" data-lightbox="menu">
<h3>料理名3</h3>
<p><img src="img/menu-03.jpg" alt=""></p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-04.jpg" data-lightbox="menu">
<h3>料理名4</h3>
<p><img src="img/menu-04.jpg" alt=""></p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-05.jpg" data-lightbox="menu">
<h3>料理名5</h3>
<p><img src="img/menu-05.jpg" alt=""></p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-06.jpg" data-lightbox="menu">
<h3>料理名6</h3>
<p><img src="img/menu-06.jpg" alt=""></p>
</a>
</div><!-- /.menu-box -->
</div><!-- /.menu-wrapper -->

</div><!-- /.menu -->

<div id="movie">
<h2 class="sub-title" data-en="MOVIE">動画</h2>
<div class="movie-wrapper">
<iframe class="ytube" src="https://www.youtube.com/embed/x6q9AxPUTOs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div><!-- /.movie-wrapper -->
</div><!-- /.movie -->

<div class="bg-2"></div><!-- パララックス用のdiv -->

<div id="shop">
<h2 class="sub-title" data-en="SHOP">店舗情報</h2>

<div class="shop-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><!-- /.tw-inner -->
</div><!-- /.tw -->
<div class="g-map">
<h3>Map</h3>
<div class="map-inner">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9452892496847!2d139.71212651460664!3d35.72756403503821!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1679015028423!5m2!1sja!2sjp" class="map" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-inner -->
</div><!-- /.g-map -->
</div><!-- /.shop-wrapper -->
</div><!-- /.shop -->

<div id="faq">
<h2 class="sub-title" data-en="FAQ">よくあるご質問</h2>

<div class="faq-wrapper">
<details open>
<summary>
<h3>予約は必要ですか?</h3>
</summary>
<p>はい、予約は必要です。弊社のレストランは多くのお客様にご利用いただいておりますため、事前にご予約いただくことをおすすめしています。</p>
</details>

<details>
<summary>
<h3>営業時間は何時から何時までですか?</h3>
</summary>
<p>弊社の営業時間は、平日は午前11時から午後10時まで、週末は午前10時から午後11時までとなっております。<br>ただし、祝日や特別なイベントなどによって異なる場合がございますので、事前にご確認ください。</p>
</details>


<details>
<summary>
<h3>ベジタリアンメニューはありますか?</h3>
</summary>
<p>
はい、ベジタリアンメニューもご用意しております。弊社のシェフが厳選した、新鮮で美味しい野菜を使った料理をご堪能いただけます。
</p>
</details>

<details>
<summary>
<h3>お子様向けのメニューはありますか?</h3>
</summary>
<p>はい、お子様向けのメニューもご用意しております。お子様に人気のある料理を、お子様サイズでご提供しております。<br>また、高い椅子やおもちゃなどもご用意しておりますので、お子様連れのお客様も安心してお食事をお楽しみいただけます。</p>
</details>



</div>
</div><!-- /.faq -->

</main>

<div class="carousel">
<ul class="bxslider2">
<li><img src="img/slide01.jpg" alt=""></li>
<li><img src="img/slide02.jpg" alt=""></li>
<li><img src="img/slide03.jpg" alt=""></li>
<li><img src="img/slide04.jpg" alt=""></li>
<li><img src="img/menu-01.jpg" alt=""></li>
<li><img src="img/menu-02.jpg" alt=""></li>
<li><img src="img/menu-03.jpg" alt=""></li>
<li><img src="img/menu-04.jpg" alt=""></li>
</ul>
</div>

<footer>
<p><small>&copy; <span id="this-year"></span> Fresco Italiano</small></p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></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
controls: false,//falseがoff
pager: false,
speed: 2000,
pause: 2000,
});
//カルーセル用
$('.bxslider2').bxSlider({
ticker: true,
speed: 60000,
minSlides: 2,
maxSlides: 5,
moveSlides: 0,
slideWidth: 300,
shrinkItems: false,
});

//ajaxで外部ファイルを呼び出す
$('#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').slideToggle(3000);
});
//#g-nav aをクリックしたら#g-navを隠す
$('#g-nav a').on('click',function(){
$('#g-nav').slideUp(200);
$('#ham-btn').removeClass('is-active');
});

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


スタイルシート

@charset "utf-8";

/* 変数の登録 */
:root{
--main-color:#bce068;
--sub-color:#c72137;
--txt-color:#333;
--en-font:'Josefin Sans', sans-serif;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}
body{
color: var(--txt-color);
}

/* header部分 */
header{
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--main-color);
padding: 0 30px 0 45px;
position: sticky;
top: 0;
left: 0;
z-index: 100;
}
h1{
font-family: var(--en-font);
font-size: 40px;
}

/* ナビゲーション部分 */
#g-nav{
width: 100%;
height: calc(100vh - 100px);
background-color: #eed9c2;
position: fixed;
top: 100px;
left: 0;
z-index: 100;
display: flex;
flex-direction: row-reverse;
}
#g-nav>ul{
width: 50%;
padding: 80px 60px 0;
}
#g-nav li{
margin-bottom: 20px;
}
#g-nav a{
display: block;
color: var(--txt-color);
border-bottom: 2px solid var(--txt-color);
padding-left: 30px;
}
#g-nav a:hover{
color: var(--sub-color);
font-weight: bold;
border-bottom: 2px solid var(--sub-color);
}
.nav-img{
width: 50%;
height: calc(100vh - 100px);
}
.nav-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}


/* bxslider部分 */
.main-visual{
width: 100%;
height: 80vh;
}
.main-visual li{
width: 100%;
height: 80vh
}
.main-visual img{
object-fit: cover;
object-position: center 30%;
width: 100%;
height: 100%;
}

/* lead部分 */
.lead{
padding: 120px 30px;
text-align: center;
}
.lead>h2{
font-size: 30px;
margin-bottom: 20px;
}
.lead>p{
line-height: 2.4;
font-size: 18px;
}
.lead>p>span{
font-family: var(--en-font);
font-size: 26px;
margin-right: 4px;
}
/* ギャラリー部分 */
.gallery{
max-width: 640px;
margin: 50px auto 400px;
position: relative;
}
.gallery>p:nth-of-type(1){
box-shadow: 16px 16px 0 #e5d582;
}
.gallery>p:nth-of-type(2){
width: 50%;
position: absolute;
left: -130px;
bottom: -100px;
box-shadow: 16px 16px 0 #e5b782;
}
.gallery>p:nth-of-type(3){
width: 40%;
position: absolute;
right: -70px;
bottom: -240px;
box-shadow: 16px 16px 0 #d1bba1;
}

/* セクションの見出し */
.sub-title{
text-align: center;
font-size: 30px;
margin-bottom: 60px;
padding-top: 100px;
}
.sub-title::before{
content: attr(data-en);
display: block;
font-family: var(--en-font);
color: var(--sub-color);
font-size: 24px;
}

/* お知らせ部分 */
#news-list{
max-width: 640px;
margin: 0 auto 120px;
display: flex;
font-size: 18px;
flex-wrap: wrap;
}
#news-list>dt{
width: 25%;
margin-bottom: 40px;
border-bottom: 2px solid var(--main-color);
padding-bottom: 10px;
font-weight: bold;
}
#news-list>dd{
width: 75%;
margin-bottom: 40px;
border-bottom: 2px solid var(--main-color);
padding-bottom: 10px;
}
#news-list>dt:nth-of-type(n+4){
display: none;
}
#news-list>dd:nth-of-type(n+4){
display: none;
}

/* メニュー部分 */

.menu-wrapper{
max-width: 1080px;
margin: 0 auto 120px;
display: flex;
flex-wrap: wrap;
gap: 60px;
}
.menu-box{
width: calc((100% - 120px) / 3);
}
.menu-box>a{
color: var(--txt-color);
display: block;
padding: 10px;
}
.menu-box h3{
font-size: 24px;
margin-bottom: 10px;
}
.menu-box p{
border-radius: 10px;
overflow: hidden;
}
.menu-box:nth-of-type(3n+1){
margin-top: -50px;
}
.menu-box:nth-of-type(3n){
margin-top: 50px;
}

/* 動画部分 */
.movie-wrapper{
max-width: 700px;
padding: 0 10px;
aspect-ratio: 16 / 9;/* 要素の横縦比を指定 */
margin: 0 auto 120px;
}
.ytube{
width: 100%;
height: 100%;
}

/* 店舗情報部分 */
.shop-wrapper{
width: 80%;
margin: 0 auto 120px;
display: flex;
justify-content: space-between;
}
.tw{
width: calc((100% - 50px) / 3);
}
.g-map{
width: calc((100% - 50px) / 3 * 2);
}
.shop-wrapper h3{
margin-bottom: 16px;
font-family: var(--en-font);
font-size: 26px;
}
.map-inner{
height: 400px;
}
.map{
width: 100%;
height: 100%;
}

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

/* よくある質問部分 */
summary{
list-style: none;/* 黒い三角形を消す */
}
summary::-webkit-details-marker {
display: none;/* iOS仕様 */
}
.faq-wrapper{
max-width: 700px;
padding: 0 10px;
margin: 0 auto 120px;
}
details{
margin-bottom: 60px;
}
summary>h3{
padding: 16px 16px 16px 32px;
background-color: #d2ef8f;
font-size: 22px;
}
summary>h3::before{
content: "Q";
font-size: 26px;
margin-right: 10px;
color: #c72137;
display: inline-block;/* inlineではダメ */
}
summary>h3:hover{
text-decoration: underline 2px;
text-underline-offset: 2px;
cursor: pointer;
}
summary>h3:hover::before{
text-decoration: none;
}

details>p{
padding: 16px 16px 16px 66px;
background-color: #f6ebe0;
line-height: 1.8;
}
details>p::before{
content: "A";
font-size: 26px;
margin: 0 10px 0 -30px;
color: #1971b8;
font-weight: bold;
}

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


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

/* スムーススクロール */
html{
scroll-behavior: smooth;
}
#news,#menu,#movie,#shop,#faq{
scroll-margin-top: 50px;
}