WEBサイト制作の勉強

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

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

12月28日の作業コード

2021年11月クラス

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>CAFE de FELICA</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=Kanit&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">
</head>
<body id="top">
<header>
<h1>CAFE de FELICA</h1>
</header>

<div class="main-visual">
<ul class="bxslider">
<li><img src="img/slide01.jpg" alt=""></li>
<li><img src="img/slide02.jpg" alt=""></li>
<li><img src="img/slide03.jpg" alt=""></li>
</ul>
</div>


<nav id="g-nav">
<ul>
<li><a href="#top">Top</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#reserve">Reserve</a></li>
</ul>
</nav>

<div id="news">
<h2>News</h2>
<dl id="list">
</dl>
</div>


<div class="contents" id="video">
<h2>Video</h2>
<div class="video-inner">
<iframe class="y-tube" src="https://www.youtube.com/embed/Zjqlu5Dyym0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div><!-- /#video -->


<div class="contents" id="menu">
<h2>Menu</h2>
<div class="menu-wrapper">
<div class="menu-box">
<a href="img/menu01.jpg" data-lightbox="gallery"><img src="img/menu01.jpg" alt=""></a>
</div>
<div class="menu-box">
<a href="img/menu02.jpg" data-lightbox="gallery"><img src="img/menu02.jpg" alt=""></a>
</div>
<div class="menu-box">
<a href="img/menu03.jpg" data-lightbox="gallery"><img src="img/menu03.jpg" alt=""></a>
</div>
</div>
</div><!-- /#menu -->


<div id="info">
<h2>Info</h2>

<div class="info-wrapper">
<dl class="company-info">
<dt>住所</dt>
<dd>東京都豊島区南池袋1-1-1</dd>
<dt>電話番号</dt>
<dd><a href="tel:0300001111">03-0000-1111</a></dd>
<dt>営業時間</dt>
<dd>11時~21時(LO:20時30分)</dd>
<dt>座席数</dt>
<dd>100席</dd>
</dl>

<div class="tw-wrapper">
<h3>Twitter</h3>
<div class="tw-inner">
<a class="twitter-timeline" data-width="300" data-height="500" data-theme="light" href="https://twitter.com/Starbucks_J?ref_src=twsrc%5Etfw">Tweets by Starbucks_J</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div><!-- /.tw-inner -->
</div><!-- /.tw-wrapper -->

<div class="map-wrapper">
<h3 class="heading03">Map</h3>
<div class="map-inner">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289249687!2d139.7121265146523!3d35.727564035038164!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1640653590975!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div><!-- /.map-inner -->
</div><!-- /.map-wrapper -->
</div><!-- /.info-wrapper -->
</div><!-- /#info -->



<div id="reserve">
<h2>Reserve form</h2>
<div class="reserve-inner">
ここにGoogle Formのコードが入ります
</div><!-- /.reserve-inner -->
</div><!-- /#reserve -->

<footer>
<p><small>&copy; 2011-2021 Cafe de Felica</small></p>
</footer>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/lightbox.js"></script>

</body>
</html>

style.css

@charset "UTF-8";

:root{
--main_color:#b4153d;
}


html,body,h1,h2,h3,h4,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}
*{
box-sizing: border-box;
}

/* スタイル部分 */

/* ヘッダー部分 */
header{
width: 40%;
height: 100px;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
top:100px;
left: 100px;
z-index: 20000;
display: flex;
justify-content: center;/* 水平方向に中央 */
align-items: center;/* 垂直方向に中央 */
}
h1{
color: var(--main_color);
font-family: 'Kanit', sans-serif;
font-size: 40px;
}
.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%;
}
/* ナビゲーション部分 */
#g-nav{
width: 100%;
height: 60px;
background-color: #FFF;
position: sticky;
top: 0;
box-shadow: 0 10px 10px #CCC;
}
#g-nav>ul{
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
#g-nav li{
margin: 0 20px;
}
#g-nav a{
padding: 16px 24px;
color: var(--main_color);
font-weight: bold;
}
#g-nav a:hover{
text-decoration: underline;
text-decoration-thickness: 4px;
text-underline-offset: 3px;
}

/* ニュース部分 */
#news{
margin: 140px 0;
}
h2{
text-align: center;
color: var(--main_color);
font-size: 32px;
margin-bottom: 50px;
}
#news>dl{
width: 600px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#news dt{
width: 30%;
padding: 20px;
border-bottom: 2px solid var(--main_color);
}
#news dd{
width: 70%;
padding: 20px;
border-bottom: 2px solid var(--main_color);
}
#news dt:nth-of-type(n+4),#news dd:nth-of-type(n+4){
display: none;
}

/* video部分 */
.video-inner{
width: 70%;
height: 400px;
margin: 0 auto 100px;
}
.y-tube{
width: 100%;
height: 100%;
}

/* メニュー部分 */
.menu-wrapper{
max-width: 960px;
margin: 100px auto 200px;
display: flex;
justify-content: space-between;
}
.menu-box{
width: calc((100% - 40px) / 3);
}
.menu-box img{
max-width: 100%;/* フルードイメージ */
}

/* Info部分 */
.info-wrapper{
max-width: 960px;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.company-info{
width: calc(50% - 20px);
display: flex;
flex-wrap: wrap;
height: 400px;
border: 1px solid #888;
}
.company-info>dt{
width: 30%;
padding: 20px;
background-color:#e6cbd6;
border-right: 1px solid #888;
}
.company-info>dd{
width: 70%;
padding: 20px;
}
.company-info>dt:nth-of-type(n+2),.company-info>dd:nth-of-type(n+2){
border-top: 1px solid #888;
}
.tw-wrapper{
width: calc(50% - 20px);
text-align: center;
}
.tw-wrapper>h3{
font-family: 'Kanit', sans-serif;
font-size: 28px;
margin-bottom: 20px;
color: var(--main_color);
}
.map-wrapper{
width: 100%;
}
.heading03 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
margin-bottom: 20px;
}

.heading03::before,
.heading03::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: var(--main_color);
}
.heading03::before {
	margin-right: 20px;
}
.heading03::after {
	margin-left: 20px;
}




.map-inner{
height: 300px;
}
.g-map{
width: 100%;
height: 100%;
}

/* フォーム部分 */
.reserve-inner{
max-width: 640px;
margin: 0 auto 100px;
}

footer{
background-color: var(--main_color);
}
footer>p{
text-align: center;
padding: 40px 0;
color: #FFF;
}


script.js

//ニュース記事を呼び出す
$('#list').load('../news.txt');


$(function(){

//bxsliderの呼び出し
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,//trueはon
controls: false,//falseはoff
pager: false,
speed: 2000,//画像の切り替わる時間
pause: 3500,//画像が止まっている時間
});


//スムーススクロール
$('#g-nav a').on('click',function(){
let x = $(this).attr('href');
console.log(x);
//目的地の取得
let target = $(x);
//目的地までの距離
let y = target.offset().top;
console.log(y);
$('html,body').animate({scrollTop:y});
});

})


lokeshdhakar.com


bxslider.com