WEBサイト制作の勉強

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

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

12月2日作業データ（シングルページのレストランサイト：PCレイアウト完成版）

2022年10月クラス

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="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>
<body id="top">
<header>
<h1><img src="img/logo.svg" alt=""></h1>
</header>

<div class="main-visual">
<ul class="bxslider">
<li><img src="img/slide-01.jpg" /></li>
<li><img src="img/slide-02.jpg" /></li>
<li><img src="img/slide-03.jpg" /></li>
</ul>
</div>


<nav id="g-nav-pc">
<ul>
<li><a href="#top">Top</a></li>
<li><a href="#news">News</a></li>
<li><a href="#movie">Movie</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#map">Map</a></li>
</ul>
</nav>

<nav id="g-nav-sp">
<ul>
<li><a href="#top">Top</a></li>
<li><a href="#news">News</a></li>
<li><a href="#movie">Movie</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#map">Map</a></li>
</ul>
</nav>


<main>
<div id="news">
<h2 data-en="News">お知らせ</h2>
<dl id="news-list">

</dl>
</div>

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


<div class="movie-wrapper">
<h3>MP-4</h3>
<div class="yt-box">
<video src="img/movie.mp4" controls></video>
</div>
</div><!-- /.movie-wrapper -->
</div><!-- /#movie -->


<div id="menu">
<h2 data-en="Menu">メニュー</h2>
<div class="menu-wrapper">
<div class="menu-box">
  <a href="img/menu-01.jpg" data-lightbox="menu">
    <h3>menu01</h3>
    <p class="menu-photo"><img src="img/menu-01.jpg" alt=""></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, corrupti?</p>
  </a>
</div><!-- /.menu-box -->

<div class="menu-box">
<a href="img/menu-02.jpg" data-lightbox="menu">
<h3>menu02</h3>
<p class="menu-photo"><img src="img/menu-02.jpg" alt=""></p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, corrupti?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-03.jpg" data-lightbox="menu">
<h3>menu03</h3>
<p class="menu-photo"><img src="img/menu-03.jpg" alt=""></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, corrupti?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-04.jpg" data-lightbox="menu">
<h3>menu04</h3>
<p class="menu-photo"><img src="img/menu-04.jpg" alt=""></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, corrupti?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-05.jpg" data-lightbox="menu">
<h3>menu05</h3>
<p class="menu-photo"><img src="img/menu-05.jpg" alt=""></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, corrupti?</p>
</a>
</div><!-- /.menu-box -->
</div><!-- /.menu-wrapper -->
</div>



<div id="info">
<h2 data-en="Information">店舗情報</h2>
<div class="info-wrapper">
<div class="tw-box">
<h3>Twitter</h3>
<div class="tw-inner">
<a class="twitter-timeline" data-width="350" data-height="500" 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-box -->
<dl class="shop-info">
<dt>住所</dt>
<dd>東京都豊島区南池袋1-1-1</dd>
<dt>電話番号</dt>
<dd><a class="tel" href="tel:03-1111-1111">03-1111-1111</a></dd>
<dt>営業時間</dt>
<dd>11:00~22:00</dd>
<dt>定休日</dt>
<dd>水曜日</dd>
</dl>
</div><!-- /.info-wrapper -->
</div>



<div id="map">
<h2 data-en="Map">店舗案内</h2>
<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!4v1669951005908!5m2!1sja!2sjp" class="g-map" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</main>
<footer>
<p><small>&copy; 2022 Restaurant FELICA</small></p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
//ajaxで外部ファイルを呼び出す
$('#news-list').load('news-list.txt');

//bxsliderを呼び出す
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
controls: false,
pager: false,
speed: 2000,
pause: 2000,
});

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

style.css

/* header部分 */
header{
width: 160px;
aspect-ratio: 1 / 0.8;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #FFFFFFDD;
padding: 10px;
}
/* main-visual部分 */
.main-visual{
width: 100%;
height: calc(100vh - 60px);
}
.main-visual li{
width: 100%;
height: calc(100vh - 60px);
}
.main-visual img{
object-fit: cover;
width: 100%;
height: 100%;
}
/* nav部分 */
#g-nav-sp{
display: none;
}
#g-nav-pc{
width: 100%;
height: 60px;
background-color: #FFFFFF88;
position: sticky;
top: 0;
left: 0;
box-shadow: 0 6px 6px #BBB;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 1;
}
#g-nav-pc>ul{
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
#g-nav-pc li{
margin: 0 20px;
}
#g-nav-pc a{
color: var(--main_color);
font-weight: bold;
padding: 10px 16px;
}
#g-nav-pc a:hover{
text-decoration: underline 4px #dcbd3f;
text-underline-offset: 4px;
}

main{
padding-top: 100px;
}
main>div{
scroll-margin-top: 100px;
}
main h2{
text-align: center;
font-size: 32px;
}
main h2::before{
content: attr(data-en);
display: block;
color: var(--main_color);
font-size: 24px;
}

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

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

/* 動画部分 */
.movie-wrapper{
width: 60%;
margin: 100px auto;
}
.movie-wrapper>h3{
font-size: 26px;
margin-bottom: 10px;
}
.yt-box{
width: 100%;
aspect-ratio: 16 / 9;/* 横/縦 */
}
.yt{
width: 100%;
height: 100%;
}
video{
width: 100%;
height: 100%;
}

/* メニュー部分 */
.menu-wrapper{
max-width: 1200px;
margin: 50px auto 200px;
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.menu-box{
width: calc((100% - 80px) / 3);
transition: 0.3s;
}
.menu-box:hover{
box-shadow: 0 0 5px #BBB;
}
.menu-box img{
object-fit: cover;
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.menu-box>a{
color: #222;
display: block;
padding: 20px;
}
.menu-box h3{
font-size: 26px;
margin-bottom: 10px;
color: var(--main_color);
}
.menu-photo{
aspect-ratio: 16 / 9;
}

/* 店舗情報部分 */

.info-wrapper{
max-width: 900px;
margin: 50px auto 200px;
display: flex;
}
.tw-box>h3{
margin-bottom: 10px;
}
.shop-info{
margin-left: 60px;
display: flex;
flex-wrap: wrap;
border: 1px solid #888;
height: 400px;
margin-top: 32px;
}
.shop-info>dt{
width: 30%;
background-color: #f2f1d7;
font-weight: bold;
padding: 20px;
border-right:  1px solid #888;
}
.shop-info>dd{
width: 70%;
padding: 20px;
}
.shop-info>dt:nth-of-type(n+2),.shop-info>dd:nth-of-type(n+2){
border-top: 1px solid #888;
}
.shop-info .tel{
color: #222;
pointer-events: none;/* クリック出来なくなる */
}

/* 地図部分 */
.map-inner{
max-width: 1000px;
aspect-ratio: 2 / 0.7;
margin: 50px auto 200px;
}
.g-map{
width: 100%;
height: 100%;
filter:grayscale(100%);
}

footer{
width: 100%;
background-color: var(--main_color);
}
footer>p{
text-align: center;
padding: 40px 0;
color: #FFF;
font-size: 18px;
}

news-list.txt

<dt>2022年12月4日</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto ratione nihil ad non, voluptates similique.</dd>
<dt>2022年12月3日</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto ratione nihil ad non, voluptates similique.</dd>
<dt>2022年12月2日</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto ratione nihil ad non, voluptates similique.</dd>
<dt>2022年12月1日</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto ratione nihil ad non, voluptates similique.</dd>
<dt>2022年11月30日</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto ratione nihil ad non, voluptates similique.</dd>
<dt>2022年11月29日</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto ratione nihil ad non, voluptates similique.</dd>
<dt>2022年11月28日</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto ratione nihil ad non, voluptates similique.</dd>