WEBサイト制作の勉強

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

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

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

index.html

<!DOCTYPE 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=Stick&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body id="top">
<header>
<h1>Trattoria La Famiglia</h1>
<p class="tag-line">家族のように温かい、本場のイタリア料理</p>
<p class="logo"><img src="img/logo.svg" alt=""></p>
</header>

<p class="hamburger hamburger--stand" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

<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="#video" data-en="VIDEO">動画</a></li>
<li><a href="#shop" data-en="SHOP">店舗情報</a></li>
<li><a href="#reserve" data-en="RESERVE">ご予約</a></li>
</ul>
</nav>

<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>
</ul>
</div>

<div class="main-copy">
<h2>ようこそ、家族のように温かいイタリアへ!</h2>
<p class="lead">
Trattoria La Famigliaは、イタリアの家庭料理をアットホームな雰囲気で提供するレストランです。<br>
まるでイタリアの田舎に来たような、温かく親しみやすい空間で、おばあちゃんが作るような素朴で美味しい料理をお楽しみください。<br>
厳選された旬の食材を使い、伝統的なレシピで丁寧に作られた料理は、心も体も温まる美味しさです。</p>
</div>

<div class="gallery">
<p><img src="img/gallery-1.jpg" alt=""></p>
<p><img src="img/gallery-2.jpg" alt=""></p>
</div>

<main>
<section id="news">
<h3 data-en="NEWS">お知らせ</h3>
<dl id="news-list">

</dl>
</section>

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

<section id="menu">
<h3 data-en="MENU">メニュー</h3>
<div class="menu-wrapper">
<div class="menu-box">
<a href="img/menu-1.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-1.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-2.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-2.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-3.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-3.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-4.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-4.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-5.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-5.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-6.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-6.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
</div><!-- /.menu-wrapper -->
</section>

<section id="video">
<h3 data-en="VIDEO">動画</h3>
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/toQ5bMf8mfw?si=qL3gYB4KltAxcIFF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div><!-- /.video-wrapper -->
</section>

<section id="shop">
<h3 data-en="SHOP">店舗情報</h3>
<div class="shop-wrapper">
<div class="map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9452895590807!2d139.7117402746393!3d35.72756402742931!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1710385754427!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-wrapper -->

<div class="shop-info">
<dl>
<dt>171-11xx</dt>
<dd>東京都豊島区南池袋x-x-x</dd>
<dt>Tel</dt>
<dd class="tel"><a href="tel:03-1111-xxxx">03-1111-xxxx</a></dd>
<dt>Mail</dt>
<dd>example@gmail.com</dd>
</dl>

<dl>
<dt>Open</dt>
<dd>11:00 — 23:00</dd>
<dt>定休日</dt>
<dd>年末年始</dd>
<dt>駐車場</dt>
<dd>5台</dd>
</dl>
</div><!-- /.shop-info -->
</div><!-- /.shop-wrapper -->
</section>

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


<section id="faq">
<h3 data-en="FAQ">よくある質問</h3>
<details open name="accordion">
<summary><span>Q</span>予約は必要ですか?</summary>
<p><span>A</span>ご予約なしでもご利用いただけますが、席数が限られているため、事前予約をおすすめしております。特に、週末や祝日などは混雑が予想されますので、お早めのご予約をお願いいたします。</p>
</details>

<details name="accordion">
<summary><span>Q</span>子供連れでも大丈夫ですか?</summary>
<p><span>A</span>はい、お子様連れでも大歓迎です。お子様用の椅子や食器もご用意しておりますので、ご安心ください。また、お子様向けメニューもございますので、お気軽にお声がけください。</p>
</details>

<details name="accordion">
<summary><span>Q</span>駐車場はありますか?</summary>
<p><span>A</span>はい、店舗裏に駐車場を5台分ご用意しております。ご利用の際は、スタッフにお声がけください。</p>
</details>
</section>

<section id="reserve">
<h3 data-en="RESERVE">ご予約</h3>
<div class="form-wrapper">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdoTVtLrY_tA-mNpykeYLvZvnbW6QhHjKvaEgg8q7km71bEdg/viewform?embedded=true"  height="1378" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

</div><!-- /.form-wrapper -->
</section>

<div class="carousel">
<ul class="bxslider2">
<li><img src="img/gallery-1.jpg" alt=""></li>
<li><img src="img/gallery-2.jpg" alt=""></li>
<li><img src="img/menu-1.jpg" alt=""></li>
<li><img src="img/menu-2.jpg" alt=""></li>
<li><img src="img/menu-3.jpg" alt=""></li>
<li><img src="img/menu-4.jpg" alt=""></li>
<li><img src="img/menu-5.jpg" alt=""></li>
<li><img src="img/menu-6.jpg" alt=""></li>
</ul>
</div><!-- /.carousel -->
</main>
<footer>
<p><small>&copy; <span id="this-year"></span> Trattoria La Famiglia</small></p>
</footer>

<div class="curtain">
<div class="logo-box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 663 84" style="enable-background:new 0 0 663 84;" xml:space="preserve">
<path id="XMLID_3_" d="M27.8,57c1-9.5,1.6-19.9,1.7-31.3L17.1,26l0.1-3.3c0.1-1.7,0.1-3.6,0.2-5.7c5.5,0,12,0.1,19.4,0.1l7.2,0h7
	l3.8,0l-0.2,2.9c-0.1,1.5-0.1,2.8-0.2,3.8s0,1.8,0,2.3c-4.2-0.2-7.6-0.3-10.3-0.3h-2c-0.3,3.5-0.5,6.6-0.7,9.6
	c-0.2,4.2-0.4,8.3-0.5,12.2s-0.2,7.1-0.2,9.6c-3.2,0-5.3-0.1-6.2-0.1C33.7,56.9,31.5,57,27.8,57z"/>
<path id="XMLID_5_" d="M56.6,57l0.9-13l0.3-7.5c0-1.3,0-2.7,0-4.1c0-1.4,0-3.2-0.1-5.3c2.4,0,4.2,0.1,5.6,0.1c1.6,0,3.5,0,5.6-0.1
	l-0.1,3.3c0.8-0.9,1.4-1.5,1.9-1.9c0.5-0.4,1-0.8,1.7-1.1c0.6-0.3,1.3-0.6,2-0.8c0.7-0.2,1.4-0.2,2.1-0.2c0.7,0,1.5,0.1,2.3,0.3
	c0,2.1,0.1,3.9,0.1,5.3l0.2,4.5c-1.1-0.3-2.1-0.5-3-0.5c-1.2,0-2.2,0.2-3,0.5c-0.8,0.3-1.6,0.9-2.3,1.6c-0.7,0.7-1.2,1.6-1.6,2.6
	c-0.4,1-0.7,2.7-0.8,4.9c-0.2,2.2-0.2,4.8-0.2,7.7c0,1,0,2.3,0.1,3.8c-1.9,0-3.8-0.1-5.7-0.1C60.8,56.9,58.8,57,56.6,57z"/>
<path id="XMLID_7_" d="M85.2,35.6c0.4-1.9,0.6-3.3,0.7-4c0.1-0.7,0.3-1.9,0.5-3.4c5.6-1.2,10.5-1.8,14.5-1.8c2.3,0,4.4,0.3,6.3,0.8
	c1.9,0.5,3.4,1.4,4.5,2.5c1.1,1.2,1.6,2.8,1.6,5c0,1.1-0.1,3.6-0.4,7.4c-0.3,3.8-0.5,8.8-0.7,15.1c-1.9,0-3.8-0.1-5.7-0.1
	c-1.8,0-3.8,0-5.9,0.1c0.3-2.1,0.6-6.6,0.9-13.3c-0.7,0.4-1.3,0.6-1.7,0.8c-0.4,0.2-1.2,0.4-2.2,0.7c-1.1,0.3-1.9,0.6-2.5,0.8
	c-0.6,0.2-1.1,0.5-1.5,0.8c-0.4,0.3-0.8,0.7-0.9,1s-0.3,0.7-0.3,1.2c0,0.7,0.3,1.2,0.8,1.7s1.4,0.7,2.5,0.7c0.4,0,0.8,0,1.3-0.1
	c0.5-0.1,1.1-0.2,1.9-0.5c-0.6,1.5-1.2,3.7-2,6.6c-1.7,0.3-3.3,0.4-4.8,0.4c-2.4,0-4.4-0.3-6-1s-2.9-1.8-3.7-3.3
	C81.4,52,81,50.5,81,49c0-0.9,0.2-1.8,0.5-2.7s0.8-1.7,1.5-2.6c0.7-0.8,1.5-1.6,2.4-2.2c0.9-0.6,2.2-1.2,3.8-1.7
	c1.6-0.5,3.6-1,6-1.5c1-0.2,1.9-0.4,2.8-0.6c0.8-0.2,1.5-0.4,1.8-0.6c0.4-0.2,0.7-0.4,0.9-0.6c0.2-0.2,0.4-0.5,0.5-0.7
	c0.1-0.2,0.1-0.5,0.1-0.8c0-0.7-0.3-1.3-0.9-1.7c-0.6-0.4-1.5-0.6-2.8-0.6C94.3,32.8,90.1,33.7,85.2,35.6z"/>
<path id="XMLID_9_" d="M140.6,48.4c-0.4,1.6-0.7,3.2-0.9,4.8l-0.6,3.6c-1.9,0.4-3.4,0.7-4.5,0.8s-2.1,0.2-3.1,0.2
	c-1.7,0-3.1-0.1-4.4-0.4c-1.3-0.3-2.4-0.8-3.2-1.6c-0.9-0.8-1.4-1.6-1.8-2.6c-0.3-1-0.5-2-0.5-3.1c0-0.2,0-0.5,0-1s0.1-1.6,0.2-3.3
	l0.6-10.1h-4.6c0.1-1.3,0.2-3.1,0.3-5.3l0.1-2.7h4.9c0.1-0.9,0.3-2.9,0.4-5.9l5-1c0.9-0.2,2.9-0.6,5.9-1.3c-0.1,2.6-0.2,5.3-0.3,8.3
	h6.7c-0.2,4.1-0.2,6.7-0.2,8.1h-6.7l-0.4,7.3c0,1.1-0.1,1.8-0.1,2.1c0,0.9,0.1,1.7,0.3,2.3c0.2,0.6,0.6,1.1,1.1,1.3
	c0.5,0.3,1.1,0.4,1.7,0.4c0.5,0,1,0,1.5-0.1C138.4,48.9,139.3,48.7,140.6,48.4z"/>
<path id="XMLID_11_" d="M166.1,48.4c-0.4,1.6-0.7,3.2-0.9,4.8l-0.6,3.6c-1.9,0.4-3.4,0.7-4.5,0.8s-2.1,0.2-3.1,0.2
	c-1.7,0-3.1-0.1-4.4-0.4c-1.3-0.3-2.4-0.8-3.2-1.6c-0.9-0.8-1.4-1.6-1.8-2.6c-0.3-1-0.5-2-0.5-3.1c0-0.2,0-0.5,0-1s0.1-1.6,0.2-3.3
	l0.6-10.1h-4.6c0.1-1.3,0.2-3.1,0.3-5.3l0.1-2.7h4.9c0.1-0.9,0.3-2.9,0.4-5.9l5-1c0.9-0.2,2.9-0.6,5.9-1.3c-0.1,2.6-0.2,5.3-0.3,8.3
	h6.7c-0.2,4.1-0.2,6.7-0.2,8.1h-6.7l-0.4,7.3c0,1.1-0.1,1.8-0.1,2.1c0,0.9,0.1,1.7,0.3,2.3c0.2,0.6,0.6,1.1,1.1,1.3
	c0.5,0.3,1.1,0.4,1.7,0.4c0.5,0,1,0,1.5-0.1C163.9,48.9,164.8,48.7,166.1,48.4z"/>
<path id="XMLID_13_" d="M187.3,26.3c2.4,0,4.8,0.4,7,1.1c2.2,0.7,4.1,1.8,5.7,3.2c1.5,1.4,2.7,3,3.4,4.9c0.7,1.9,1.1,3.9,1.1,6
	c0,2.1-0.3,4.1-1,6c-0.7,1.9-1.8,3.7-3.3,5.3c-1.6,1.7-3.5,2.9-6,3.7c-2.4,0.8-5,1.2-7.7,1.2c-2.5,0-4.9-0.4-7.1-1.1
	s-4.2-1.8-5.7-3.2c-1.5-1.4-2.7-3-3.5-5c-0.8-1.9-1.2-4-1.2-6.1c0-2.1,0.4-4.2,1.1-6.1c0.8-1.9,1.9-3.7,3.6-5.2
	c1.6-1.5,3.6-2.7,6-3.6C182.2,26.7,184.7,26.3,187.3,26.3z M187.1,34.9c-1.3,0-2.4,0.3-3.3,1c-1,0.6-1.7,1.6-2.2,2.8
	c-0.5,1.2-0.7,2.6-0.7,4.1c0,2.1,0.5,3.8,1.6,4.9c1.1,1.1,2.4,1.7,4,1.7c1.2,0,2.3-0.3,3.3-1c1-0.7,1.7-1.6,2.2-2.9
	c0.5-1.3,0.7-2.7,0.7-4.1c0-1.2-0.2-2.3-0.6-3.3c-0.4-1-1-1.8-1.9-2.3C189.3,35.2,188.3,34.9,187.1,34.9z"/>
<path id="XMLID_16_" d="M208.8,57l0.9-13l0.3-7.5c0-1.3,0-2.7,0-4.1c0-1.4,0-3.2-0.1-5.3c2.4,0,4.2,0.1,5.6,0.1c1.6,0,3.5,0,5.6-0.1
	l-0.1,3.3c0.8-0.9,1.4-1.5,1.9-1.9c0.5-0.4,1-0.8,1.7-1.1c0.6-0.3,1.3-0.6,2-0.8c0.7-0.2,1.4-0.2,2.1-0.2c0.7,0,1.5,0.1,2.3,0.3
	c0,2.1,0.1,3.9,0.1,5.3l0.2,4.5c-1.1-0.3-2.1-0.5-3-0.5c-1.2,0-2.2,0.2-3,0.5c-0.8,0.3-1.6,0.9-2.3,1.6c-0.7,0.7-1.2,1.6-1.6,2.6
	c-0.4,1-0.7,2.7-0.8,4.9c-0.2,2.2-0.2,4.8-0.2,7.7c0,1,0,2.3,0.1,3.8c-1.9,0-3.8-0.1-5.7-0.1C213,56.9,210.9,57,208.8,57z"/>
<path id="XMLID_18_" d="M234.4,57c0.3-2.4,0.5-4.3,0.6-5.9c0.1-1.5,0.3-3.5,0.4-5.9s0.2-5.1,0.3-8c0.1-2.9,0.2-6.3,0.2-10.1
	c2.5,0,4.6,0.1,6.1,0.1c1.4,0,3.4,0,6-0.1c-0.3,3.7-0.6,6.9-0.7,9.7c-0.1,2.8-0.2,5.8-0.3,8.9c-0.1,5.5-0.1,9.3-0.1,11.3
	c-2.3,0-4.3-0.1-6-0.1C239.3,56.9,237.1,57,234.4,57z M236.3,23.3c0.1-2.3,0.2-4.2,0.2-5.5c0-0.4,0-0.9,0-1.6c2.4,0,4.3,0.1,5.9,0.1
	c2.2,0,4.1,0,5.8-0.1c-0.1,0.6-0.1,1.1-0.1,1.5l-0.2,3.6c0,0.5-0.1,1.2-0.1,1.9c-1.9,0-3.8-0.1-5.6-0.1
	C240.4,23.3,238.4,23.3,236.3,23.3z"/>
<path id="XMLID_21_" d="M256.1,35.6c0.4-1.9,0.6-3.3,0.7-4c0.1-0.7,0.3-1.9,0.5-3.4c5.6-1.2,10.5-1.8,14.5-1.8
	c2.3,0,4.4,0.3,6.3,0.8c1.9,0.5,3.4,1.4,4.5,2.5c1.1,1.2,1.6,2.8,1.6,5c0,1.1-0.1,3.6-0.4,7.4c-0.3,3.8-0.5,8.8-0.7,15.1
	c-1.9,0-3.8-0.1-5.7-0.1c-1.8,0-3.8,0-5.9,0.1c0.3-2.1,0.6-6.6,0.9-13.3c-0.7,0.4-1.3,0.6-1.7,0.8c-0.4,0.2-1.2,0.4-2.2,0.7
	c-1.1,0.3-1.9,0.6-2.5,0.8c-0.6,0.2-1.1,0.5-1.5,0.8c-0.4,0.3-0.8,0.7-0.9,1s-0.3,0.7-0.3,1.2c0,0.7,0.3,1.2,0.8,1.7
	s1.4,0.7,2.5,0.7c0.4,0,0.8,0,1.3-0.1c0.5-0.1,1.1-0.2,1.9-0.5c-0.6,1.5-1.2,3.7-2,6.6c-1.7,0.3-3.3,0.4-4.8,0.4c-2.4,0-4.4-0.3-6-1
	s-2.9-1.8-3.7-3.3c-0.9-1.5-1.3-3-1.3-4.5c0-0.9,0.2-1.8,0.5-2.7s0.8-1.7,1.5-2.6c0.7-0.8,1.5-1.6,2.4-2.2c0.9-0.6,2.2-1.2,3.8-1.7
	c1.6-0.5,3.6-1,6-1.5c1-0.2,1.9-0.4,2.8-0.6c0.8-0.2,1.5-0.4,1.8-0.6c0.4-0.2,0.7-0.4,0.9-0.6c0.2-0.2,0.4-0.5,0.5-0.7
	c0.1-0.2,0.1-0.5,0.1-0.8c0-0.7-0.3-1.3-0.9-1.7c-0.6-0.4-1.5-0.6-2.8-0.6C265.1,32.8,261,33.7,256.1,35.6z"/>
<path id="XMLID_23_" d="M304.7,57c0.5-4.6,0.8-8.4,1.1-11.3c0.4-5.3,0.7-10.6,0.9-15.8S307,20.3,307,17c2.7,0,5,0.1,7.1,0.1
	c1.4,0,3.4,0,6-0.1l-0.7,10.6l-0.9,16.6l-0.1,4.1c3.4,0.1,5.5,0.1,6.6,0.1c5.1,0,9-0.1,11.7-0.2l-0.6,8.8c-5.1,0-10-0.1-14.7-0.1
	C314.9,56.9,309.4,57,304.7,57z"/>
<path id="XMLID_25_" d="M342.5,35.6c0.4-1.9,0.6-3.3,0.7-4s0.3-1.9,0.5-3.4c5.6-1.2,10.5-1.8,14.5-1.8c2.3,0,4.4,0.3,6.3,0.8
	c1.9,0.5,3.4,1.4,4.5,2.5c1.1,1.2,1.6,2.8,1.6,5c0,1.1-0.1,3.6-0.4,7.4c-0.3,3.8-0.5,8.8-0.7,15.1c-1.9,0-3.8-0.1-5.7-0.1
	c-1.8,0-3.8,0-5.9,0.1c0.3-2.1,0.6-6.6,0.9-13.3c-0.7,0.4-1.3,0.6-1.7,0.8c-0.4,0.2-1.2,0.4-2.2,0.7c-1.1,0.3-1.9,0.6-2.5,0.8
	c-0.6,0.2-1.1,0.5-1.5,0.8c-0.4,0.3-0.8,0.7-0.9,1s-0.3,0.7-0.3,1.2c0,0.7,0.3,1.2,0.8,1.7s1.4,0.7,2.5,0.7c0.4,0,0.8,0,1.3-0.1
	c0.5-0.1,1.1-0.2,1.9-0.5c-0.6,1.5-1.2,3.7-2,6.6c-1.7,0.3-3.3,0.4-4.8,0.4c-2.4,0-4.4-0.3-6-1s-2.9-1.8-3.7-3.3
	c-0.9-1.5-1.3-3-1.3-4.5c0-0.9,0.2-1.8,0.5-2.7s0.8-1.7,1.5-2.6c0.7-0.8,1.5-1.6,2.4-2.2c0.9-0.6,2.2-1.2,3.8-1.7
	c1.6-0.5,3.6-1,6-1.5c1-0.2,1.9-0.4,2.8-0.6c0.8-0.2,1.5-0.4,1.8-0.6c0.4-0.2,0.7-0.4,0.9-0.6c0.2-0.2,0.4-0.5,0.5-0.7
	c0.1-0.2,0.1-0.5,0.1-0.8c0-0.7-0.3-1.3-0.9-1.7c-0.6-0.4-1.5-0.6-2.8-0.6C351.6,32.8,347.5,33.7,342.5,35.6z"/>
<path id="XMLID_27_" d="M391.6,57c0.4-4,0.7-7.1,0.8-9.6c0.2-3.6,0.5-8.4,0.7-14.7c0.2-6.2,0.3-10.4,0.3-12.6V17
	c5.9,0,11.3,0.1,16.4,0.1c5.1,0,10,0,14.7-0.1c-0.3,4.5-0.5,7.4-0.5,8.8l-2.5-0.1l-2.1,0l-2.1,0h-5.8c-0.7,0-2.6,0-5.8,0.1l-0.3,6.8
	l4.2,0.1h4.7c1.4,0,3.5,0,6.3-0.1c-0.2,3.7-0.3,6.6-0.3,8.7c-3.1-0.1-5.5-0.1-7-0.1c-2.6,0-5.4,0-8.4,0.1l-0.3,10.5l0,3.9V57
	l-6.3-0.1C398,56.9,395.7,57,391.6,57z"/>
<path id="XMLID_29_" d="M430.7,35.6c0.4-1.9,0.6-3.3,0.7-4s0.3-1.9,0.5-3.4c5.6-1.2,10.5-1.8,14.5-1.8c2.3,0,4.4,0.3,6.3,0.8
	c1.9,0.5,3.4,1.4,4.5,2.5c1.1,1.2,1.6,2.8,1.6,5c0,1.1-0.1,3.6-0.4,7.4c-0.3,3.8-0.5,8.8-0.7,15.1c-1.9,0-3.8-0.1-5.7-0.1
	c-1.8,0-3.8,0-5.9,0.1c0.3-2.1,0.6-6.6,0.9-13.3c-0.7,0.4-1.3,0.6-1.7,0.8c-0.4,0.2-1.2,0.4-2.2,0.7c-1.1,0.3-1.9,0.6-2.5,0.8
	c-0.6,0.2-1.1,0.5-1.5,0.8c-0.4,0.3-0.8,0.7-0.9,1s-0.3,0.7-0.3,1.2c0,0.7,0.3,1.2,0.8,1.7s1.4,0.7,2.5,0.7c0.4,0,0.8,0,1.3-0.1
	c0.5-0.1,1.1-0.2,1.9-0.5c-0.6,1.5-1.2,3.7-2,6.6c-1.7,0.3-3.3,0.4-4.8,0.4c-2.4,0-4.4-0.3-6-1s-2.9-1.8-3.7-3.3
	c-0.9-1.5-1.3-3-1.3-4.5c0-0.9,0.2-1.8,0.5-2.7s0.8-1.7,1.5-2.6c0.7-0.8,1.5-1.6,2.4-2.2c0.9-0.6,2.2-1.2,3.8-1.7
	c1.6-0.5,3.6-1,6-1.5c1-0.2,1.9-0.4,2.8-0.6c0.8-0.2,1.5-0.4,1.8-0.6c0.4-0.2,0.7-0.4,0.9-0.6c0.2-0.2,0.4-0.5,0.5-0.7
	c0.1-0.2,0.1-0.5,0.1-0.8c0-0.7-0.3-1.3-0.9-1.7c-0.6-0.4-1.5-0.6-2.8-0.6C439.8,32.8,435.6,33.7,430.7,35.6z"/>
<path id="XMLID_31_" d="M464.4,57l0.8-14.1l0.5-11l0.1-4.7c2.1,0,4,0.1,5.7,0.1c1.9,0,3.7,0,5.4-0.1l-0.2,3.9
	c0.6-0.8,1.1-1.4,1.5-1.8c0.4-0.4,0.9-0.8,1.5-1.2c0.6-0.4,1.2-0.7,1.9-0.9c0.6-0.2,1.4-0.4,2.2-0.5c0.8-0.1,1.6-0.2,2.5-0.2
	c1,0,1.9,0.1,2.8,0.2c0.8,0.2,1.6,0.4,2.2,0.6c0.6,0.3,1.1,0.5,1.6,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.3,0.4,0.7,1,1.2,1.8
	c0.9-1.2,1.8-2.2,2.7-2.8s2-1.1,3.3-1.4c1.2-0.3,2.5-0.5,3.8-0.5c1.7,0,3.3,0.2,4.8,0.7c1.5,0.5,2.7,1.3,3.7,2.5s1.5,2.8,1.5,4.7
	c0,0.9-0.1,2.3-0.2,4.1c-0.1,1.8-0.3,4.9-0.5,9.4c-0.2,4.4-0.4,7.5-0.4,9.3c-1.8,0-3.5-0.1-5.2-0.1c-2,0-4.2,0-6.4,0.1
	c0.2-2.5,0.4-5.6,0.6-9.3c0.2-3.7,0.3-6.3,0.3-7.8c0-1.3-0.1-2.2-0.4-2.8s-0.7-1-1.1-1.3c-0.5-0.2-1-0.3-1.5-0.3
	c-0.6,0-1.1,0.1-1.5,0.3c-0.5,0.2-0.9,0.6-1.2,1.1c-0.5,0.6-0.9,1.5-1.1,2.5c-0.2,0.8-0.4,1.9-0.6,3.5c-0.1,1.6-0.2,3.7-0.3,6.3
	l-0.2,7.9c-2.1,0-4-0.1-5.6-0.1c-1.7,0-3.7,0-6.1,0.1c0.2-1.7,0.4-4.7,0.6-8.8s0.4-6.8,0.4-8.2c0-1.2-0.1-2.1-0.4-2.6
	s-0.6-1.1-1-1.4s-1-0.5-1.7-0.5c-0.8,0-1.4,0.2-2,0.7c-0.6,0.4-1,1.1-1.5,1.9c-0.4,0.8-0.7,2-0.8,3.5c-0.2,1.5-0.3,3.7-0.5,6.8
	c-0.1,3-0.2,5.9-0.3,8.7c-2.4,0-4.3-0.1-5.7-0.1C468.8,56.9,466.8,57,464.4,57z"/>
<path id="XMLID_33_" d="M520,57c0.3-2.4,0.5-4.3,0.6-5.9c0.1-1.5,0.3-3.5,0.4-5.9c0.1-2.4,0.2-5.1,0.3-8c0.1-2.9,0.2-6.3,0.2-10.1
	c2.5,0,4.6,0.1,6.1,0.1c1.4,0,3.4,0,6-0.1c-0.3,3.7-0.6,6.9-0.7,9.7c-0.1,2.8-0.2,5.8-0.3,8.9c-0.1,5.5-0.1,9.3-0.1,11.3
	c-2.3,0-4.3-0.1-6-0.1C524.9,56.9,522.7,57,520,57z M521.9,23.3c0.1-2.3,0.2-4.2,0.2-5.5c0-0.4,0-0.9,0-1.6c2.4,0,4.3,0.1,5.9,0.1
	c2.2,0,4.1,0,5.8-0.1c-0.1,0.6-0.1,1.1-0.1,1.5l-0.2,3.6c0,0.5-0.1,1.2-0.1,1.9c-1.9,0-3.8-0.1-5.6-0.1
	C526,23.3,524,23.3,521.9,23.3z"/>
<path id="XMLID_36_" d="M541.3,60.6c2.5,0.9,4.7,1.5,6.7,1.8c1.9,0.3,3.6,0.5,5,0.5c1,0,2-0.1,2.8-0.3c0.8-0.2,1.5-0.5,2-0.8
	c0.5-0.3,0.9-0.8,1.3-1.3c0.4-0.5,0.6-1.1,0.8-1.7c0.2-0.6,0.3-1.3,0.4-2.2s0.1-2,0.2-3.4c-0.8,0.7-1.4,1.2-2,1.6s-1.2,0.8-2.1,1.2
	s-1.7,0.7-2.7,0.9s-2,0.3-3.1,0.3c-2.5,0-4.7-0.6-6.7-1.7c-2-1.2-3.5-2.8-4.5-4.8c-1-2.1-1.5-4.3-1.5-6.7c0-2.8,0.5-5.4,1.6-7.7
	s2.6-4.2,4.5-5.8c2-1.6,4.1-2.7,6.5-3.3c2.3-0.6,5-0.9,8-0.9c1.7,0,3.6,0.1,5.8,0.3s5.1,0.6,8.9,1.3l-0.7,9.7L572,48.2
	c0,0.8-0.1,1.4-0.1,1.9l-0.2,9.5c0,1.2-0.2,2.4-0.4,3.5c-0.2,1-0.6,1.9-1.1,2.8c-0.5,0.9-1.1,1.6-1.9,2.3c-0.8,0.7-1.7,1.3-2.8,1.7
	c-1,0.4-2.3,0.8-3.7,1.1c-1.5,0.3-3.1,0.4-4.8,0.4c-0.9,0-2.1,0-3.5-0.1s-2.8-0.2-4.2-0.4s-2.7-0.4-3.7-0.6s-2.4-0.5-4-0.8l-0.2-3.9
	C541.5,64.7,541.4,63.1,541.3,60.6z M561.4,35.3c-1.2-0.2-2.3-0.4-3.2-0.4c-1.8,0-3.3,0.3-4.5,1s-2.3,1.7-3,3s-1.1,2.7-1.1,4.2
	c0,1.1,0.2,2,0.6,2.9c0.4,0.9,1,1.6,1.8,2.1c0.9,0.5,1.8,0.8,2.7,0.8c1.4,0,2.7-0.5,3.7-1.5c1.1-1,1.8-2.4,2.2-4.2
	C561.1,41.5,561.3,38.9,561.4,35.3z"/>
<path id="XMLID_39_" d="M578.4,57l0.5-6.3l1.1-21.9l0.3-11.8c2.7,0,4.8,0.1,6.1,0.1c1.8,0,3.7,0,5.9-0.1l-0.7,9l-1.1,22.1l-0.2,8.8
	c-2.1,0-4,0-5.7,0L578.4,57z"/>
<path id="XMLID_41_" d="M596.9,57c0.3-2.4,0.5-4.3,0.6-5.9c0.1-1.5,0.3-3.5,0.4-5.9c0.1-2.4,0.2-5.1,0.3-8c0.1-2.9,0.2-6.3,0.2-10.1
	c2.5,0,4.6,0.1,6.1,0.1c1.4,0,3.4,0,6-0.1c-0.3,3.7-0.6,6.9-0.7,9.7c-0.1,2.8-0.2,5.8-0.3,8.9c-0.1,5.5-0.1,9.3-0.1,11.3
	c-2.3,0-4.3-0.1-6-0.1C601.7,56.9,599.6,57,596.9,57z M598.7,23.3c0.1-2.3,0.2-4.2,0.2-5.5c0-0.4,0-0.9,0-1.6c2.4,0,4.3,0.1,5.9,0.1
	c2.2,0,4.1,0,5.8-0.1c-0.1,0.6-0.1,1.1-0.1,1.5l-0.2,3.6c0,0.5-0.1,1.2-0.1,1.9c-1.9,0-3.8-0.1-5.6-0.1
	C602.9,23.3,600.9,23.3,598.7,23.3z"/>
<path id="XMLID_44_" d="M618.5,35.6c0.4-1.9,0.6-3.3,0.7-4s0.3-1.9,0.5-3.4c5.6-1.2,10.5-1.8,14.5-1.8c2.3,0,4.4,0.3,6.3,0.8
	c1.9,0.5,3.4,1.4,4.5,2.5c1.1,1.2,1.6,2.8,1.6,5c0,1.1-0.1,3.6-0.4,7.4c-0.3,3.8-0.5,8.8-0.7,15.1c-1.9,0-3.8-0.1-5.7-0.1
	c-1.8,0-3.8,0-5.9,0.1c0.3-2.1,0.6-6.6,0.9-13.3c-0.7,0.4-1.3,0.6-1.7,0.8c-0.4,0.2-1.2,0.4-2.2,0.7c-1.1,0.3-1.9,0.6-2.5,0.8
	c-0.6,0.2-1.1,0.5-1.5,0.8c-0.4,0.3-0.8,0.7-0.9,1s-0.3,0.7-0.3,1.2c0,0.7,0.3,1.2,0.8,1.7s1.4,0.7,2.5,0.7c0.4,0,0.8,0,1.3-0.1
	c0.5-0.1,1.1-0.2,1.9-0.5c-0.6,1.5-1.2,3.7-2,6.6c-1.7,0.3-3.3,0.4-4.8,0.4c-2.4,0-4.4-0.3-6-1s-2.9-1.8-3.7-3.3
	c-0.9-1.5-1.3-3-1.3-4.5c0-0.9,0.2-1.8,0.5-2.7s0.8-1.7,1.5-2.6c0.7-0.8,1.5-1.6,2.4-2.2c0.9-0.6,2.2-1.2,3.8-1.7
	c1.6-0.5,3.6-1,6-1.5c1-0.2,1.9-0.4,2.8-0.6c0.8-0.2,1.5-0.4,1.8-0.6c0.4-0.2,0.7-0.4,0.9-0.6c0.2-0.2,0.4-0.5,0.5-0.7
	c0.1-0.2,0.1-0.5,0.1-0.8c0-0.7-0.3-1.3-0.9-1.7c-0.6-0.4-1.5-0.6-2.8-0.6C627.6,32.8,623.5,33.7,618.5,35.6z"/>
</svg>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/lightbox.js"></script>
<script>
$(function(){
//ハンバーガーボタン
//#ham-btnをon.clickしたらthisに「is-active」をtoggleClassさせる
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
});


//メインビジュアル
$('.bxslider').bxSlider({
mode: 'fade',//画像の切り替わり方
auto: true,//trueがon
controls: false,//falseがoff
pager: false,
speed: 2000,//画像が切り替わる時間
pause: 2000,//画像が止まっている時間
});

//ajaxで外部データを呼び出す
$('#news-list').load('news.txt');

//カルーセル
$('.bxslider2').bxSlider({
ticker: true,
speed: 50000,
minSlides: 2,
maxSlides: 6,
slideWidth: 300,
});

//西暦の取得
let year = new Date().getFullYear();
if(year > 2024){
$('#this-year').text('2024 - '+year);
}else{
$('#this-year').text(year);
}

//ローディングアニメーション
$('.curtain').delay(3000).fadeOut(1000);


});
</script>


</body>
</html>


style.css

@charset "utf-8";

/* 変数の登録 */
:root{
--font_ja:"Stick", sans-serif;
--font_en:"Ubuntu", sans-serif;
--color_1:#297884;
--color_2:#e8ba3c;
--bg_1:#c9e9c2;
}


*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}

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


header{
background-color: #d7ea91dc;
width: fit-content;/* 幅が中身の幅に合う */
position: absolute;
top: 80px;
left: 60px;
z-index: 10;
padding: 80px 40px 40px;

>h1{
font-family: var(--font_en);
margin-bottom: 20px;
font-size: 38px;
}
>.tag-line{
font-family: var(--font_ja);
font-size: 22px;
}
}

#g-nav{
/* display: none; */
}

/* ロゴを回す */
.logo{
width: 160px;
position: absolute;
right: -70px;
top: -50px;
animation: logo-anime 7s infinite linear;
}

@keyframes logo-anime{
0%{rotate: 0;}
100%{rotate: 360deg;}
}



/* ハンバーガーボタン */
#ham-btn{
position: fixed;
top: 0;
right: 0;
z-index: 100;
background-color: #FFF;
}


/* メインビジュアル部分 */
.main-visual{
width: 100%;
height: 100vh;
margin-bottom: 140px;
}
.main-visual li{
width: 100%;
height: 100vh;
>img{
object-fit: cover;
width: 100%;
height: 100%;
}
}

/* メインコピー部分 */
.main-copy{
text-align: center;
font-family: var(--font_ja);
margin-bottom: 140px;
>h2{
font-size: 34px;
margin-bottom: 40px;
}
>.lead{
font-size: 22px;
max-width: 680px;
margin: 0 auto;
line-height: 2.2;
text-align: left;
}
}

/* ギャラリー部分 */
.gallery{
max-width: 600px;
margin: 0 auto 140px;
position: relative;/* positionの基準点 */
>p:nth-of-type(1){
box-shadow: 20px 20px 0 var(--color_1);
}
>p:nth-of-type(2){
width: 50%;
position: absolute;
right: -100px;
bottom: -100px;
box-shadow: 20px 20px 0 var(--color_2);/* 横、縦、影の距離、影の色 */
}
}


/* セクション部分 */
section{
padding: 100px 10px;

>h3{
text-align: center;
font-family: var(--font_ja);
color: var(--color_1);
font-size: 34px;
margin-bottom: 50px;
&::before{
display: block;
content: attr(data-en);
font-family: var(--font_en);
font-size: 28px;
color: var(--color_2);
}
}
}


/* お知らせ部分 */
#news-list{
max-width: 600px;
margin: 0 auto 140px;
display: flex;
flex-wrap: wrap;
font-size: 20px;
>dt{
width: 30%;
margin-bottom: 20px;
border-bottom: 2px solid var(--color_1);
padding: 5px 10px;
&:nth-of-type(n+4){
display: none;
}
}
>dd{
width: 70%;
margin-bottom: 20px;
border-bottom: 2px solid var(--color_1);
padding: 5px 10px;
&:nth-of-type(n+4){
display: none;
}
}
}


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

/* メニュー部分 */
.menu-wrapper{
width: 90%;
margin: 0 auto 140px;
display: flex;
gap: 80px 40px;/* 上下、左右 */
flex-wrap: wrap;/* 折り返しの指定 */
}
.menu-box{
width: calc((100% - 80px) / 3 );/* 全部から必要な余白を引いて、3で割る */
border: 1px solid #5d5d5d;
padding: 16px;
>a{
color: #222;
&:hover img{
scale: 1.2;
transition: 0.2s;
}
>.menu-photo{
margin-bottom: 10px;
overflow: hidden;
}
>.menu-txt{
line-height: 1.6;
}
}
}


/* 動画部分 */
.video-wrapper{
width: 70%;
aspect-ratio: 16/9;
margin: 0 auto;
>iframe{
width: 100%;
height: 100%;
}
}


/* 店舗情報部分 */
.shop-wrapper{
max-width: 960px;
margin: 0 auto;
}
.map-wrapper{
width: 100%;
aspect-ratio: 2/0.8;
margin-bottom: 80px;
>iframe{
width: 100%;
height: 100%;
}
}

.shop-info{
display: flex;
>dl{
width: 50%;
display: flex;
flex-wrap: wrap;
>dt{
width: 25%;
margin-bottom: 20px;
}
>dd{ 
width: 75%;
margin-bottom: 20px;
}
}
}

/* 電話番号の設定 */
.tel>a{
pointer-events: none;
color: #333;
font-size: 24px;
}


/* よくある質問部分 */
details{
max-width: 680px;
margin: 0 auto 70px;
>summary{
background-color: var(--bg_1);
padding: 14px;
font-size: 20px;
list-style: none;/* 黒い▼を消す */
cursor: pointer;
transition: 0.3s;
&:hover{
background-color: #b7d4b0;
}
>span{
font-size: 26px;
color: #d30d32;
margin-right: 10px;
}
}
}


/* iOS用のリセット */
summary::-webkit-details-marker{
list-style: none;
}

details>p{
background-color: #e3e3e3;
padding: 14px 14px 14px 44px;
text-indent: -28px;
>span{
font-size: 26px;
color: #0d80d3;
margin-right: 10px;
}
}


/* googleフォーム部分 */
.form-wrapper{
max-width: 640px;
margin: 0 auto;
>iframe{
width: 100%;
}
}

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

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


/* ローディングアニメーション */
.curtain{
width: 100%;
height: 100vh;
background-color: var(--color_1);
position: fixed;
top: 0;
left: 0;
z-index: calc(infinity);
}
.logo-box{
width: 600px;
margin: 200px auto 0;
}

#レイヤー_1 path{
fill: var(--color_1);/* 塗りの色 */
stroke: var(--color_2);
stroke-width: 1px;
stroke-dasharray: 260px;
stroke-dashoffset: 260px;
animation: text 1.6s 0.5s linear forwards;
}
@keyframes text{
0%{stroke-dashoffset: 260px;}
80%{stroke-dashoffset: 0;fill: var(--color_1);}
100%{stroke-dashoffset: 0;fill: var(--color_2);}
}

svgアニメーションの作成


See the Pen
q-chan
by yachin29 (@yachin29)
on CodePen.




tympanus.net

http://gardenstudio.com.br/gardenstudio.com.br

jakearchibald.com

SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー


blog.codecamp.jp

svgで使用するタグの分類


svgで使用するタグは大きく分けると3種類に分ける事が出来ます。

  • 基本図形(rect, circle, ellipse, line, polyline, polygon)
  • パス(path)
  • テキスト(text)


今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。


変化させる方法は主に以下の3つがあります。

CSSプロパティ(transitionやanimation)を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います(ちなみにjQuerySVGの要素を扱えないので使えません)。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke:線の色
stroke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置






今回は破線のプロパティである、stroke-dasharraystroke-dashoffsetを使い、線を引くアニメーションを作成します。





また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none(初期値)

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。


animation-timing-functionについて

shu-naka-blog.com

3月14日の作業データ

index.html
<!DOCTYPE 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=Stick&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body id="top">
<header>
<h1>Trattoria La Famiglia</h1>
<p class="tag-line">家族のように温かい、本場のイタリア料理</p>
<p class="logo"><img src="img/logo.svg" alt=""></p>
</header>

<p class="hamburger hamburger--stand" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

<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="#video" data-en="VIDEO">動画</a></li>
<li><a href="#shop" data-en="SHOP">店舗情報</a></li>
<li><a href="#reserve" data-en="RESERVE">ご予約</a></li>
</ul>
</nav>

<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>
</ul>
</div>

<div class="main-copy">
<h2>ようこそ、家族のように温かいイタリアへ!</h2>
<p class="lead">
Trattoria La Famigliaは、イタリアの家庭料理をアットホームな雰囲気で提供するレストランです。<br>
まるでイタリアの田舎に来たような、温かく親しみやすい空間で、おばあちゃんが作るような素朴で美味しい料理をお楽しみください。<br>
厳選された旬の食材を使い、伝統的なレシピで丁寧に作られた料理は、心も体も温まる美味しさです。</p>
</div>

<div class="gallery">
<p><img src="img/gallery-1.jpg" alt=""></p>
<p><img src="img/gallery-2.jpg" alt=""></p>
</div>

<main>
<section id="news">
<h3 data-en="NEWS">お知らせ</h3>
<dl id="news-list">

</dl>
</section>

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

<section id="menu">
<h3 data-en="MENU">メニュー</h3>
<div class="menu-wrapper">
<div class="menu-box">
<a href="img/menu-1.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-1.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-2.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-2.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-3.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-3.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-4.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-4.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-5.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-5.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
<div class="menu-box">
<a href="img/menu-6.jpg" data-lightbox="photo">
<p class="menu-photo"><img src="img/menu-6.jpg" alt=""></p>
<p class="menu-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, necessitatibus?</p>
</a>
</div><!-- /.menu-box -->
</div><!-- /.menu-wrapper -->
</section>

<section id="video">
<h3 data-en="VIDEO">動画</h3>
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/toQ5bMf8mfw?si=qL3gYB4KltAxcIFF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div><!-- /.video-wrapper -->
</section>

<section id="shop">
<h3 data-en="SHOP">店舗情報</h3>
<div class="shop-wrapper">
<div class="map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9452895590807!2d139.7117402746393!3d35.72756402742931!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1710385754427!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-wrapper -->

<div class="shop-info">
<dl>
<dt>171-11xx</dt>
<dd>東京都豊島区南池袋x-x-x</dd>
<dt>Tel</dt>
<dd class="tel"><a href="tel:03-1111-xxxx">03-1111-xxxx</a></dd>
<dt>Mail</dt>
<dd>example@gmail.com</dd>
</dl>

<dl>
<dt>Open</dt>
<dd>11:00 — 23:00</dd>
<dt>定休日</dt>
<dd>年末年始</dd>
<dt>駐車場</dt>
<dd>5台</dd>
</dl>
</div><!-- /.shop-info -->
</div><!-- /.shop-wrapper -->
</section>

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

<section id="reserve">
<h3 data-en="RESERVE">ご予約</h3>
</section>
</main>
<footer>

</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 src="js/lightbox.js"></script>
<script>
$(function(){
//ハンバーガーボタン
//#ham-btnをon.clickしたらthisに「is-active」をtoggleClassさせる
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
});


//メインビジュアル
$('.bxslider').bxSlider({
mode: 'fade',//画像の切り替わり方
auto: true,//trueがon
controls: false,//falseがoff
pager: false,
speed: 2000,//画像が切り替わる時間
pause: 2000,//画像が止まっている時間
});

//ajaxで外部データを呼び出す
$('#news-list').load('news.txt');



});
</script>
</body>
</html>
style.css
@charset "utf-8";

/* 変数の登録 */
:root{
--font_ja:"Stick", sans-serif;
--font_en:"Ubuntu", sans-serif;
--color_1:#297884;
--color_2:#e8ba3c;
--bg_1:#000;
}


*{
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: #333;
}


header{
background-color: #d7ea91dc;
width: fit-content;/* 幅が中身の幅に合う */
position: absolute;
top: 80px;
left: 60px;
z-index: 10;
padding: 80px 40px 40px;

>h1{
font-family: var(--font_en);
margin-bottom: 20px;
font-size: 38px;
}
>.tag-line{
font-family: var(--font_ja);
font-size: 22px;
}
}


#g-nav{
display: none;
}

/* ロゴを回す */
.logo{
width: 160px;
position: absolute;
right: -70px;
top: -50px;
animation: logo-anime 7s infinite linear;
}

@keyframes logo-anime{
0%{rotate: 0;}
100%{rotate: 360deg;}
}



/* ハンバーガーボタン */
#ham-btn{
position: fixed;
top: 0;
right: 0;
z-index: calc(infinity);
background-color: #FFF;
}


/* メインビジュアル部分 */
.main-visual{
width: 100%;
height: 100vh;
margin-bottom: 140px;
}
.main-visual li{
width: 100%;
height: 100vh;
>img{
object-fit: cover;
width: 100%;
height: 100%;
}
}

/* メインコピー部分 */
.main-copy{
text-align: center;
font-family: var(--font_ja);
margin-bottom: 140px;
>h2{
font-size: 34px;
margin-bottom: 40px;
}
>.lead{
font-size: 22px;
max-width: 680px;
margin: 0 auto;
line-height: 2.2;
text-align: left;
}
}

/* ギャラリー部分 */
.gallery{
max-width: 600px;
margin: 0 auto 140px;
position: relative;/* positionの基準点 */
>p:nth-of-type(1){
box-shadow: 20px 20px 0 var(--color_1);
}
>p:nth-of-type(2){
width: 50%;
position: absolute;
right: -100px;
bottom: -100px;
box-shadow: 20px 20px 0 var(--color_2);/* 横、縦、影の距離、影の色 */
}
}


/* セクション部分 */
section{
padding: 100px 10px;

>h3{
text-align: center;
font-family: var(--font_ja);
color: var(--color_1);
font-size: 34px;
margin-bottom: 50px;
&::before{
display: block;
content: attr(data-en);
font-family: var(--font_en);
font-size: 28px;
color: var(--color_2);
}
}
}


/* お知らせ部分 */
#news-list{
max-width: 600px;
margin: 0 auto 140px;
display: flex;
flex-wrap: wrap;
font-size: 20px;
>dt{
width: 30%;
margin-bottom: 20px;
border-bottom: 2px solid var(--color_1);
padding: 5px 10px;
&:nth-of-type(n+4){
display: none;
}
}
>dd{
width: 70%;
margin-bottom: 20px;
border-bottom: 2px solid var(--color_1);
padding: 5px 10px;
&:nth-of-type(n+4){
display: none;
}
}
}


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

/* メニュー部分 */
.menu-wrapper{
width: 90%;
margin: 0 auto 140px;
display: flex;
gap: 80px 40px;/* 上下、左右 */
flex-wrap: wrap;/* 折り返しの指定 */
}
.menu-box{
width: calc((100% - 80px) / 3 );/* 全部から必要な余白を引いて、3で割る */
border: 1px solid #5d5d5d;
padding: 16px;
>a{
color: #222;
&:hover img{
scale: 1.2;
transition: 0.2s;
}
>.menu-photo{
margin-bottom: 10px;
overflow: hidden;
}
>.menu-txt{
line-height: 1.6;
}
}
}


/* 動画部分 */
.video-wrapper{
width: 70%;
aspect-ratio: 16/9;
margin: 0 auto;
>iframe{
width: 100%;
height: 100%;
}
}


/* 店舗情報部分 */
.shop-wrapper{
max-width: 960px;
margin: 0 auto;
}
.map-wrapper{
width: 100%;
aspect-ratio: 2/0.8;
margin-bottom: 80px;
>iframe{
width: 100%;
height: 100%;
}
}

.shop-info{
display: flex;
>dl{
width: 50%;
display: flex;
flex-wrap: wrap;
>dt{
width: 25%;
margin-bottom: 20px;
}
>dd{ 
width: 75%;
margin-bottom: 20px;
}
}
}

/* 電話番号の設定 */
.tel>a{
pointer-events: none;
color: #333;
font-size: 24px;
}
news.txt
<dt>2024年3月17日</dt>
<dd>新メニューのご提供</dd>
<dt>2024年3月16日</dt>
<dd>お客様感謝祭開催!</dd>
<dt>2024年3月15日</dt>
<dd>春のワインフェア開催</dd>
<dt>2024年3月14日</dt>
<dd>ホワイトデー限定メニューのご提供</dd>
<dt>2024年3月10日</dt>
<dd>春の食材を使った特別コースのご提供</dd>
<dt>2024年3月09日</dt>
<dd>営業時間変更のお知らせ</dd>

配色のルール

配色には色々なルールがありますが、まずはこの3つを覚えましょう

1、コントラスに気を付ける

2、色数を抑える

3、トーンを合わせる


HSBを使った配色

photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是非覚えておきましょう。
HSBは色相(Hue)、彩度(Saturation)、明度(Brightness)の3つの値を調整していきます。

トーン(色調)を合わせる方法

トーン(色調)とは彩度と明度の2つの値を合わせた物です。なので上記の「トーンを合わせる」場合は彩度(Saturation)、明度(Lightness)の2つの値は動かさずに色相(Hue)を動かして色を決めていきます。




webnaut.jp



www.slideshare.net


hue360.herokuapp.com


配色を考えるのは非常に難しい作業ですが、今はキーワードでカラーパレットを生成してくれるAIなどが豊富にあるので、これらを使って作業を効率よく進めましょう



キーワードから配色を提案するColor Magic(日本語可)

colormagic.app

キーワードから配色を提案するHuemint(英語のみ)

aicolors.co



プロジェクトにあった配色を自動で提案してくれるツールHuemint

色の組み合わせを確認できるサンプルイメージが豊富。
huemint.com


クリックするだけのお手軽AIカラーツール Colormind

colormind.io

background-attachment

background-attachmentをfixedにすると簡単にパララックス(視差効果)を使ったスクロールが実装出来ます。
ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為(ベンダープレフィックスを付けてもダメ)、iOSでは別の対応が必要になります。
今回はiOSではパララックス(視差効果)を使わずにシンプルに背景画像がスクロールしていく形で対応させます。


See the Pen
background-attachment:fixedでパララックス
by yachin29 (@yachin29)
on CodePen.

各ブラウザの対応


backgroundのショートハンド

background関連の指定は多いのでbackground-attachmentも含めてショートハンドでまとめてしまいましょう。

background: #FFF url() no-repeat center center/cover fixed;/* 背景色、背景画像、背景の位置、背景のサイズ、背景のスクロールの有無 */

iOSの対応

iOSSafariでは「background-attachment」は未対応のため、そのままでは表示が崩れてしまうので対応が必要です。ここでは「background-attachment:fixed」の値を「background-attachment:scroll」に変更するという非常にシンプルな方法で対応します。さらに高さを50vhほどに抑えておきます。

@media (max-width: 959px) {

.bg-1{
height: 50vh;
background: url() no-repeat center center/cover scroll;
}

}

今後のiOS

今後、iOSで「background-attachment」が対応されるのかは、解らないですが、AppleのDeveloper Forumsで「background-attachment」については以下のコメントで締められています。

Apple decided fixed background is not the vibe. That's all. Apple is god remember it


developer.apple.com

CODEPENを使って自身のコードを掲載させる



https://codepen.io/



CODEPENとは?
「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブログやWEBサイトに埋め込むことも簡単にできます。
有料・無料アカウントがあり、無料アカウントは一部の機能が使えません。
ソースコードを保存・公開・共有できるサービスの為、画像は自身のサーバー等にアップロードする必要があります。(有料プランの場合、画像をアップロード出来るスペースが与えられます)
なので、WebGLCSSアニメーションなど、比較的リッチな動きを見せるものの掲載が多いです。
webのポートフォリオなどに使ってみるのも良いと思います。


cssプラグインを使ってハンバーガーボタンを作る

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。



jonsuh.com



アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。


<p class="hamburger " id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>