【ソースコード】初級編：ストアサイト（和菓子）／縦書きレイアウト
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>創作</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<h1 class="site-title">
<a href="#"><img src="img/logo.svg" alt="創作"></a>
</h1>
<nav id="nav">
<ul>
<li><a href="#news">お知らせ</a></li>
<li><a href="#products1">商品のご紹介</a></li>
<li><a href="#shop">店舗のご案内</a></li>
</ul>
</nav>
<div class="onlinestore">
<a href="#" target="_blank">オンラインストアを見る</a>
</div>
</header>
<main>
<section id="news" class="wrapper">
<h2 class="section-title">
<span class="en">News</span>
<span class="ja">お知らせ</span>
</h2>
<dl class="list">
<dt>2021.01.01</dt>
<dd>タイトルタイトルタイトルタイトル</dd>
<dt>2021.01.01</dt>
<dd>タイトルタイトルタイトルタイトル</dd>
<dt>2021.01.01</dt>
<dd>タイトルタイトルタイトルタイトル</dd>
<dt>2021.01.01</dt>
<dd>タイトルタイトルタイトルタイトル</dd>
<dt>2021.01.01</dt>
<dd>タイトルタイトルタイトルタイトル</dd>
</dl>
</section>
<section id="products1" class="products wrapper">
<h2 class="section-title">
<span class="ja">新しい価値の創造</span>
<span class="en">Create New Values</span>
</h2>
<div class="img">
<img src="img/products1.jpg" alt="">
<p class="text">テキストテキスト<br>テキストテキスト</p>
</div>
</section>
<section id="products2" class="products wrapper">
<h2 class="section-title">
<span class="ja">科学と技術の調和</span>
<span class="en">Science & Technology</span>
</h2>
<div class="img">
<img src="img/products2.jpg" alt="">
<p class="text">テキストテキスト<br>テキストテキスト</p>
</div>
</section>
<div id="shop">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.6831613967106!2d139.73286700102722!3d35.66017708010212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b9c2ef8e6c3%3A0xff8de5eeddcd1e17!2z44CSMTA2LTAwMzIg5p2x5Lqs6YO95riv5Yy65YWt5pys5pyo77yV5LiB55uu!5e0!3m2!1sja!2sjp!4v1622980739129!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</main>
<footer id="footer">
<div class="inner">
<div class="left">
<p><a href="#" target="_blank">オンラインストアを見る</a>｜<a href="mailto:xxxxx@xxx.xxx">お問い合わせ</a></p>
</div>
<div class="right">
<div class="logo"><img src="img/logo.svg" alt="創作"></div>
<p class="info">
〒１０６-００３２ 東京都港区六本木５丁目×××××<br>
電話：<a href="tel:03-xxxx-xxxx">０３-ＸＸＸＸ-ＸＸＸＸ</a>
</p>
<ul class="menu">
<li><a href="#news">お知らせ</a></li>
<li><a href="#products1">商品のご紹介</a></li>
<li><a href="#shop">店舗のご案内</a></li>
</ul>
</div>
</div>
<p class="copyright">© SOUSAKU</p>
</footer>
</body>
</html>