記述例
- レシピ検索用ã®å‹•ç”»ã¯ã€YouTubeã«ã‚¢ãƒƒãƒ—ãƒãƒ¼ãƒ‰ã§ã¯ãªãvideoã‚¿ã‚°ã§æŒ¿å…¥
index.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=Shippori+Mincho+B1&display=swap" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.bxslider.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.bxslider.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox.min.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js" defer></script>
<script src="js/script.js" defer></script>
</head>
<body>
<header class="header">
<div class="container">
<h1><img src="img/logo.svg" alt="Bike Life"></h1>
<nav class="gnav">
<ul>
<li><a href="#">御飯</a></li>
<li><a href="#">麺</a></li>
<li><a href="#">惣èœ</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<div class="slider">
<ul class="bxslider">
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
</ul>
</div>
<div class="container">
<p class="lead" data-aos="fade-up">和食ã®é…力ã¯ã€ãã®ç¾Žã—ã•ã¨å¥åº·çš„ãªè¦ç´ ã«ã‚ã‚Šã¾ã™ã€‚å£ç¯€æ„Ÿã‚’大切ã«ã—ã€æ–°é®®ãªé£Ÿæã‚’æ´»ã‹ã—ãŸæ–™ç†ã¯ã€è¦‹ãŸç›®ã«ã‚‚楽ã—ã¾ã›ã¦ãã‚Œã¾ã™ã€‚例ãˆã°ã€è‰²ã¨ã‚Šã©ã‚Šã®é‡Žèœã‚„éšã‚’使ã£ãŸç››ã‚Šä»˜ã‘ã¯ã€ç›®ã«ã‚‚美味ã—ã„体験をæä¾›ã—ã¾ã™ã€‚ã•ã‚‰ã«ã€å’Œé£Ÿã¯é£Ÿäº‹ã‚’通ã˜ã¦å¿ƒã‚’è½ã¡ç€ã‘る文化ãŒæ ¹ä»˜ã„ã¦ãŠã‚Šã€é£Ÿã¹ã‚‹ã“ã¨ãŒå¿ƒã®è±Šã‹ã•ã«ã¤ãªãŒã‚Šã¾ã™ã€‚</p>
<section class="modal">
<h2>色々ãªå’Œé£Ÿ</h2>
<ul class="modal_gallery">
<li data-aos="fade-up"><a href="img/11.jpg" data-lightbox="example-set"><img src="img/11.jpg" alt=""></a></li>
<li data-aos="fade-up"><a href="img/12.jpg" data-lightbox="example-set"><img src="img/12.jpg" alt=""></a></li>
<li data-aos="fade-up"><a href="img/13.jpg" data-lightbox="example-set"><img src="img/13.jpg" alt=""></a></li>
<li data-aos="fade-up"><a href="img/14.jpg" data-lightbox="example-set"><img src="img/14.jpg" alt=""></a></li>
<li data-aos="fade-up"><a href="img/15.jpg" data-lightbox="example-set"><img src="img/15.jpg" alt=""/></a></li>
<li data-aos="fade-up"><a href="img/16.jpg" data-lightbox="example-set"><img src="img/16.jpg" alt=""></a></li>
</ul>
</section>
<section class="search">
<h2>レシピを探ã™</h2>
<p><video src="img/recipe.mp4" autoplay loop muted playsinline poster="video-poster.webp"></video></p>
</section>
<section class="charm">
<h2>和食ã®é…力</h2>
<ul id="accordion_menu">
<li>
<h3 class="label">美ã—ã•ã¨å£ç¯€æ„Ÿ</h3>
<ul class="detail">
<li>見ãŸç›®ã®ç¾Žã—ã•ã‚’é‡è¦–</li>
<li>色彩や形状ã€å™¨ã®é¸ã³æ–¹ãŒé‡è¦</li>
<li>å››å£æŠ˜ã€…ã®é£Ÿæを使用ã—ã€å£ç¯€ã®ç§»ã‚ã„を表ç¾</li>
</ul>
</li>
<li>
<h3 class="label">å¥åº·å¿—å‘</h3>
<ul class="detail">
<li>æ „é¤Šãƒãƒ©ãƒ³ã‚¹ãŒè‰¯ã„食事スタイル</li>
<li>主食（ã”飯）ã€ä¸»èœï¼ˆéšã‚„肉）ã€å‰¯èœï¼ˆé‡Žèœï¼‰ã€å‘³å™Œæ±ã‚„漬物ã®çµ„ã¿åˆã‚ã›</li>
<li>発酵食å“（味噌ã€é†¤æ²¹ã€ç´è±†ãªã©ï¼‰ã®å¤šç”¨</li>
<li>腸内環境を整ãˆã‚‹åŠ¹æžœãŒæœŸå¾…ã§ãã‚‹</li>
</ul>
</li>
<li>
<h3 class="label">ä¼çµ±ã¨æ–‡åŒ–</h3>
<ul class="detail">
<li>日本ã®ä¼çµ±ã‚„文化ãŒåæ˜ ã•ã‚ŒãŸé£Ÿæ–‡åŒ–</li>
<li>食事ã®ä½œæ³•ã‚„食æã®é¸ã³æ–¹ã€èª¿ç†æ³•ã«æ´å²ã¨åœ°åŸŸã®ç‰¹è‰²</li>
<li>「ãŠã‚‚ã¦ãªã—ã€ã®å¿ƒã‚’大切ã«ã—ã€äººã¨ã®ã¤ãªãŒã‚Šã‚’æ·±ã‚る役割</li>
<li>特別ãªæ—¥ã«ã¯ç¥ã„膳を用æ„ã—ã€å®¶æ—ã‚„å‹äººã¨ã®çµ†ã‚’æ·±ã‚ã‚‹</li>
</ul>
</li>
</ul>
</section>
</div>
<div class="carousel_list"><img src="img/11.jpg" alt=""><img src="img/12.jpg" alt=""><img src="img/13.jpg" alt=""><img src="img/14.jpg" alt=""><img src="img/15.jpg" alt=""><img src="img/16.jpg" alt=""></div>
</main>
<footer class="footer">
<p><small>© 和食ã®é…力</small></p>
<div id="toTop">to<br>TOP</div>
</footer>
</body>
</html>
@charset "UTF-8";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
html {
font-size: 100%;
scroll-behavior: smooth;
}
body {
background-color: #fff;
font-size: 1.0rem;
color: #333;
font-family: serif;
font-family: "Shippori Mincho B1", serif;
line-height: 1.0;
}
.container {
width: min(90%, 960px);
margin: 0 auto;
}
h2 {
width: fit-content;
margin: auto;
margin-bottom: 24px;
letter-spacing: -0.12rem;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
top: 0;
left: -5px;
width: 140px;
height: 100px;
background-image: url(../img/brush.png);
background-repeat: no-repeat;
background-size: contain;
z-index: -100;
}
.lead {
margin-bottom: 60px;
padding: 0 6rem;
line-height: 1.6;
text-align: justify;
}
@media screen and (max-width: 767px) {
.lead {
padding: 0 1rem;
font-size: 0.9rem;
}
}
.header > .container {
display: flex;
align-items: end;
width: min(92%, 960px);
margin: 0 auto;
padding: 16px 0;
}
h1 {
width: 180px;
margin-right: auto;
}
.gnav > ul {
display: flex;
justify-content: center;
gap: 30px;
padding: 5px 0;
font-size: 1.125rem;
font-weight: bold;
}
.footer {
padding: 10px 0;
background-color: #000;
color: #fff;
text-align: center;
}
.bx-wrapper {
box-shadow: none;
border: none;
background: #fff;
height: 600px;
}
.bx-wrapper .bx-prev {
background: none;
}
.bx-wrapper .bx-next {
background: none;
}
@media screen and (max-width: 767px) {
.bx-wrapper {
height: 26vh;
}
}
.modal {
margin-bottom: 40px;
}
.modal_gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.modal_gallery {
grid-template-columns: repeat(2, 1fr);
}
}
p.lead {
transition-delay: .4s;
}
.modal_gallery li:nth-of-type(2){
transition-delay: .4s;
}
.modal_gallery li:nth-of-type(3){
transition-delay: .6s;
}
.modal_gallery li:nth-of-type(4){
transition-delay: .4s;
}
.modal_gallery li:nth-of-type(5){
transition-delay: .6s;
}
.modal_gallery li:nth-of-type(6){
transition-delay: .8s;
}
.search {
margin-bottom: 60px;
}
.search > p {
text-align: center;
}
.search video {
width: min(98%, 640px);
margin: auto;
border: 12px solid #fff;
box-shadow: 0 0 6px #aaa;
}
#accordion_menu {
margin-bottom: 80px;
}
#accordion_menu {
border-bottom: solid 1px #999;
}
#accordion_menu .label {
padding: 16px 20px;
border-top: solid 1px #999;
font-size: 1.125rem;
font-weight: 600;
transition: .5s;
position: relative;
cursor:pointer;
}
.detail {
list-style: disc;
padding: 12px 0 12px 3.5rem;
border-top: solid 1px #999;
}
.detail li {
padding: 6px 0;
line-height: 1.4;
}
#accordion_menu .detail li:last-child {
border-bottom: none;
}
#accordion_menu .label:hover {
background-color: #d0e6c2;
}
@media screen and (max-width: 767px) {
.detail {
list-style: disc;
padding: 12px 0 12px 2.0rem;
border-top: solid 1px #999;
font-size: 0.875rem;
}
}
#accordion_menu .label::before,
#accordion_menu .label::after {
content: '';
width: 20px;
height: 1px;
background: #000;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
#accordion_menu .label::after {
transform: translateY(-50%) rotate(90deg);
transition: .5s;
}
#accordion_menu .label.open {
background-color: #d0e6c2;
}
#accordion_menu .label.open::before {
opacity: 0;
}
#accordion_menu .label.open::after {
transform: rotate(180deg);
}
.main > .bx-wrapper {
margin: 0;
height: fit-content;
}
#toTop {
position: fixed;
right: 16px;
bottom: 16px;
display: none;
width: 60px;
height: 60px;
padding-top: 14px;
background-color: #666;
border-radius: 50%;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
line-height: 1.0;
text-align: center;
cursor: pointer;
}
script.js
$(function(){
const slider = $('.bxslider').bxSlider({
mode: 'fade',
auto: true,
speed: 2000,
pause: 6000,
pager: false
});
AOS.init({
duration: 1000
});
slider.on('load', function(){
AOS.refresh();
});
$('.detail').hide();
$('#accordion_menu .label').on('click', function() {
let $detail = $(this).next();
$('.detail').not($detail).slideUp();
$('#accordion_menu .label').not(this).removeClass('open');
$detail.slideToggle();
$(this).toggleClass('open');
});
$('.carousel_list').bxSlider({
ticker: true,
shrinkItems: false,
speed: 30000,
minSlides: 4,
maxSlides: 6,
slideWidth: 240,
});
let toTop = $('#toTop');
toTop.on('click', function(){
$('html,body').animate({ scrollTop: 0 }, 200);
});
$(window).on('scroll', function(){
let scl = $(this).scrollTop();
if(scl > 500){
toTop.fadeIn();
}else{
toTop.fadeOut();
}
});
});
