12æœˆï¼•æ—¥ã®ä½œæ¥ãƒ‡ãƒ¼ã‚¿(dunot-shop) - WEBã‚µã‚¤ãƒˆåˆ¶ä½œã®å‹‰å¼·

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Felica Bread&Salad</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:ital,wght@0,100..700;1,100..700&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">

<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon" href="touch-icon.png" sizes="192x192">

</head>
<body>
<div class="container">
<header>
<h1>Felica Bread&Salad</h1>
<nav id="l-nav">
<ul>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
<li><a href="#access">Access</a></li>
<li><a href="#"><img src="img/facebook-brands-solid.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram-brands-solid.svg" alt=""></a></li>
</ul>
</nav>
</header>

<p id="ham-btn" ><span></span></p>
<nav id="sp-nav">
<ul>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
<li><a href="#access">Access</a></li>
<li><a href="#"><img src="img/facebook-brands-solid.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram-brands-solid.svg" alt=""></a></li>
</ul>
</nav>




<main>
<div class="main-visual">
<ul class="bxslider">
<li><img src="img/main-1.webp" alt=""></li>
<li><img src="img/main-2.webp" alt=""></li>
<li><img src="img/main-3.webp" alt=""></li>
<li><img src="img/main-4.webp" alt=""></li>
</ul>
</div><!-- /.main-visual -->

<section class="content" id="news">
<h2 data-ja="ãŠçŸ¥ã‚‰ã›">News</h2>
<dl id="news-list">


</dl>
</section><!-- /.content -->

<section class="content" id="about">
<h2 data-ja="ç§ãŸã¡ã«ã¤ã„ã¦">About</h2>
<h3>è‡ªç„¶ã®æµã¿ã‚’å‘³ã‚ã†ã€ãŠã„ã—ã„ã”è¤’ç¾Ž</h3>
<p class="lead">åŽ³é¸ã•ã‚ŒãŸã‚ªãƒ¼ã‚¬ãƒ‹ãƒƒã‚¯ç´ æã§ä½œã‚‹ãƒ•ãƒ¬ãƒƒã‚·ãƒ¥ãªã‚µãƒ©ãƒ€ã¨ã€<br class="sp">
è·äººã®æ‰‹ä»•äº‹ã§ç„¼ãä¸Šã’ãŸãƒ‰ãƒ¼ãƒŠãƒ„ã€‚<br>
å£ã«ã—ãŸçž¬é–“ã€è‡ªç„¶ã®ç”˜ã¿ãŒåºƒãŒã‚Šã¾ã™ã€‚æ¯Žæ—¥ã®æš®ã‚‰ã—ã«ã€ã¡ã‚‡ã£ã¨ã—ãŸå¹¸ã›ã‚’ã€‚</p>
</section><!-- /.content -->

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

<section class="content" id="access">
<h2 data-ja="åº—èˆ—æƒ…å ±">Access</h2>
<div class="map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289559118!2d139.7117402752527!3d35.72756402742839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1732241890097!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-wrapper -->

<div class="info-wrapper">
<dl>
<dt>Address</dt>
<dd>æ±äº¬éƒ½è±Šå³¶åŒºå—æ± è¢‹x-x-x</dd>
<dt>Tel</dt>
<dd><a class="tel-num" href="tel:03-1234-5678">03-1234-5678</a></dd>
<dt>Mail</dt>
<dd><a href="mailto:[email protected]">[email protected]</a></dd>
</dl>
<dl>
<dt>Open</dt>
<dd>10:00-19:00</dd>
<dt>å®šä¼‘æ—¥</dt>
<dd>å¹´æœ«å¹´å§‹</dd>
<dt>é§è»Šå ´</dt>
<dd>æœ‰</dd>
</dl>
</div><!-- /.info-wrapper -->
</section><!-- /.content -->
</main>
</div><!-- /.container -->


<div class="shop-list">
<ul class="shop-photo">
<li><a href="#"><span>ã‚·ãƒ§ãƒƒãƒ—1</span></a></li>
<li><a href="#"><span>ã‚·ãƒ§ãƒƒãƒ—2</span></a></li>
<li><a href="#"><span>ã‚·ãƒ§ãƒƒãƒ—3</span></a></li>
<li><a href="#"><span>ã‚·ãƒ§ãƒƒãƒ—4</span></a></li>
<li><a href="#"><span>ã‚·ãƒ§ãƒƒãƒ—5</span></a></li>
<li><a href="#"><span>ã‚·ãƒ§ãƒƒãƒ—6</span></a></li>
</ul>
</div><!-- /.shop-list -->
<a href="#" class="to-online">ONLINE SHOP</a>

<footer>
<p class="footer-logo">Felica Bread&Salad</p>
<p><small>&copy; <span id="this-year"></span> Felica Bread&Salad</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>
$(function(){
//bxsliderç”¨
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
controls: false,
pager: false,
speed: 2000,
pause: 2000,
});

//ãƒãƒ³ãƒãƒ¼ã‚¬ãƒ¼ãƒœã‚¿ãƒ³ç”¨
$('#ham-btn').on('click',function(){
$(this).toggleClass('click');
$('#sp-nav').fadeToggle(200);
});

//spç”¨ãƒŠãƒ“ã‚’ã‚¯ãƒªãƒƒã‚¯ã—ãŸã‚‰
$('#sp-nav a').on('click',function(){
$('#sp-nav').fadeOut(200);
$('#ham-btn').removeClass('click');
});

//ajaxã§å¤–éƒ¨ãƒ‡ãƒ¼ã‚¿ã‚’å‘¼ã³å‡ºã™
$('#news-list').load('news.txt');

//è¥¿æš¦ã‚’å‘¼ã³å‡ºã—è¡¨ç¤ºã•ã›ã‚‹
let today = new Date().getFullYear();
console.log(today);

if(today === 2024){
$('#this-year').text(today);
}else{
$('#this-year').text('2024-'+today);
}

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

style.css

@charset "utf-8";

/* å¤‰æ•°ã®ç™»éŒ² */
:root{
--base_color:#ffffff;
--main_color:#d31082;
--text_color:#444444;
--font_en:"Josefin Sans", sans-serif;
--font_ja:"Zen Maru Gothic", serif;
}

*{
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%;
}

/* PCãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ */
body{
background-color: var(--base_color);
color: var(--text_color);
font-family: serif;
}
header{
width: 240px;
height: auto;
padding:40px 20px;
background-color: var(--base_color);
position: fixed;
left: 0;
top: 0;
z-index: 20;
>h1{
font-family: var(--font_en);
margin-bottom: 100px;
}
}

/* pcç”¨ãƒŠãƒ“ã‚²ãƒ¼ã‚·ãƒ§ãƒ³ */
#l-nav li{
margin-bottom: 20px;
&:nth-of-type(n+4){
width: 30px;
}
>a{
color: var(--text_color);
font-size: 18px;
&:hover{
text-decoration: underline;
}
}
}

/* ãƒ¡ã‚¤ãƒ³ãƒ“ã‚¸ãƒ¥ã‚¢ãƒ« */
.main-visual{
width: calc(100% - 80px);
height: calc(100vh - 40px);
margin: 40px 0 0 80px;
li{
width: 100%;
height: calc(100vh - 40px);
}
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}

/* å…±é€šéƒ¨åˆ† */
.content{
max-width: 960px;
margin: 0 auto;
padding: 140px 10px;
>h2{
text-align: center;
font-size: 30px;
font-family: var(--font_en);
color: var(--text_color);
margin-bottom: 60px;
&::before{
content: attr(data-ja);
display: block;
font-family: var(--font_ja);
font-size: 24px;
margin-bottom: 10px;
}
}
}

/* ãŠçŸ¥ã‚‰ã›éƒ¨åˆ† */
#news-list{
max-width: 680px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
>dt{
width: 30%;
padding: 10px;
font-weight: bold;
}
>dd{
width: 70%;
padding: 10px;
}
}

/* aboutéƒ¨åˆ† */
#about{
text-align: center;
font-family: var(--font_ja);
>h3{
font-size: 26px;
margin-bottom: 30px;
}
>.lead{
font-size: 18px;
line-height: 2;
padding: 0 20px;
}
}

/* ãƒ‘ãƒ©ãƒ©ãƒƒã‚¯ã‚¹ */
.parallax{
width: 100%;
height: 60vh;
background: #000 url(../img/parallax.webp) no-repeat center center/cover fixed;
@media (960px >= width){
/* iOSå¯¾å¿œ */
background: #000 url(../img/parallax.webp) no-repeat center center/cover scroll;
}
}


/* accesséƒ¨åˆ† */
.map-wrapper{
width: 100%;
aspect-ratio: 2/1;/* æ¨ª/ç¸¦ã®æ¯”çŽ‡ */
margin-bottom: 50px;
>iframe{
width: 100%;
height: 100%;
}
}

.info-wrapper{
display: flex;
>dl{
width: 50%;
display: flex;
flex-wrap: wrap;
>dt{
width: 30%;
margin-bottom: 20px;
}
>dd{
width: 70%;
margin-bottom: 20px;
>a{
color: var(--text_color);
}
}
}
}


/* é›»è©±ã®ãƒªãƒ³ã‚¯ */
.tel-num{
pointer-events: none;/* aè¦ç´ ã‚’ç„¡åŠ¹ã«ã™ã‚‹ */
font-size: 20px;
}


/* shop-listéƒ¨åˆ† */
.shop-list{
position: relative;
z-index: 30;
}

.shop-photo{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
gap: 2px;
>li{
background: url(../img/thumb-1.jpg) no-repeat center center/cover;
aspect-ratio: 4/3;
&:nth-of-type(2){
background: url(../img/thumb-2.jpg) no-repeat center center/cover;
}
&:nth-of-type(3){
background: url(../img/thumb-3.jpg) no-repeat center center/cover;
}
&:nth-of-type(4){
background: url(../img/thumb-4.jpg) no-repeat center center/cover;
}
&:nth-of-type(5){
background: url(../img/thumb-5.jpg) no-repeat center center/cover;
}
&:nth-of-type(6){
background: url(../img/thumb-6.jpg) no-repeat center center/cover;
}

>a{
display: block;
background-color: #00000066;
color: #ffffff;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
&:hover{
background-color: #00000022;
transition: 0.3s;
}
}
}
}

/* ctaãƒœã‚¿ãƒ³ */
.to-online{
position: fixed;
z-index: calc(infinity);/* ä¸€ç•ªä¸Šã®ãƒ¬ã‚¤ãƒ¤ãƒ¼ã«ãªã‚‹ */
right: 0;
top: 40%;
background-color: var(--main_color);
color: #ffffff;
writing-mode: vertical-rl;
font-family: var(--font_en);
font-size: 20px;
padding: 10px;
}


/* footeréƒ¨åˆ† */
footer{
position: relative;
z-index: 30;/* positionã®æŒ‡å®šãŒå¿…é ˆ */
background-color: var(--text_color);
color: #ffffff;
padding: 40px 0;
margin-top: 2px;
text-align: center;
font-size: 18px;
>.footer-logo{
font-size: 26px;
margin-bottom: 20px;
font-family: var(--font_en);
}
}


/* ãƒãƒ³ãƒãƒ¼ã‚¬ãƒ¼ãƒœã‚¿ãƒ³ */
#ham-btn{
display: none;
}

/* spç”¨ãƒŠãƒ“ */
#sp-nav{
display: none;
}

/* 1150pxä»¥ä¸‹ */
@media (1150px >= width){

/* headeréƒ¨åˆ† */
header{
width: 100%;
height: 80px;
padding: 10px;
z-index: 20;
display: flex;
align-items: center;
>h1{
margin-bottom: 0;
font-size: 26px;
}
>#l-nav{
display: none;
}
}


/* ãƒ¡ã‚¤ãƒ³ãƒ“ã‚¸ãƒ¥ã‚¢ãƒ« */
.main-visual{
width: 100%;
height: 70vh;
margin: 0;
li{
width: 100%;
height: 70vh;
}
}

/* ãŠçŸ¥ã‚‰ã›éƒ¨åˆ† */
#news-list{
margin: 0 auto;
display: block;
padding-left: 20%;
>dt{
width: 100%;
padding: 10px 10px 0;
}
>dd{
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
@media (600px >= width){
padding-left: 20px;
}
}

/* aboutéƒ¨åˆ† */
#about{
max-width: 600px;
>h3{
font-size: 22px;
}
>.lead{
font-size: 16px;
}
}


/* accesséƒ¨åˆ† */
.info-wrapper{
flex-direction: column;
align-items: center;
padding-left: 100px;
>dl{
width: 100%;
}
@media (600px >= width){
padding-left: 20px;
}
}


/* ãƒãƒ³ãƒãƒ¼ã‚¬ãƒ¼ãƒœã‚¿ãƒ³ */
#ham-btn{
display: block;
width: 50px;
height: 50px;
border: 1px solid #333;
position: fixed;
right: 15px;
top: 15px;
z-index: calc(infinity);
>span{
display: block;
width: 30px;
height: 3px;
background-color: #333;
position: absolute;
inset: 0;
top: -14px;
margin: auto;
transition: 0.2s;
&::after{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: #333;
position: absolute;
top: 14px;
transition: 0.2s;
}
}
&.click>span{
rotate: 45deg;
top: 0;
&::after{
rotate: 90deg;
top: 0;
}
}
}


/* spç”¨ãƒŠãƒ“ */
#sp-nav{
width: 100%;
height: calc(100vh - 80px);
background-color: #f1eedb;
position: fixed;
top: 80px;
left: 0;
z-index: 40;
padding: 80px 60px;
li{
margin-bottom: 20px;
>a{
display: block;
padding: 8px;
border-bottom: 2px solid var(--text_color);
color: var(--text_color);
font-family: var(--font_en);
}
}
}

/* ã‚¢ã‚¤ã‚³ãƒ³ */
#sp-nav li:nth-of-type(n+4){
width: 40px;
margin-bottom: 0;
>a{
border-bottom: 0;
}
}


}


/* æ”¹è¡Œã‚’ç„¡åŠ¹ã«ã™ã‚‹ */
@media (600px >= width){
br.sp{
display: none;
}
}

/* æœ€æ–°ï¼“ä»¶ã®ãŠçŸ¥ã‚‰ã›ã‚’è¡¨ç¤º */
#news-list>dt:nth-of-type(n+4){
display: none;
}
#news-list>dd:nth-of-type(n+4){
display: none;
}