ストアサイト(和菓子):縦書きレイアウト
code-step.com
創作
お知らせ
商品のご紹介
店舗のご案内
オンラインストアを見る
News
お知らせ
2021.01.01
タイトルタイトルタイトルタイトル
2021.01.01
タイトルタイトルタイトルタイトル
2021.01.01
タイトルタイトルタイトルタイトル
2021.01.01
タイトルタイトルタイトルタイトル
2021.01.01
タイトルタイトルタイトルタイトル
新しい価値の創造 Create New Values
テキストテキスト
テキストテキスト
科学と技術の調和 Science & Technology
テキストテキスト
テキストテキスト
オンラインストアを見る|お問い合わせ
創作
〒106-0032 東京都港区六本木5丁目×××××
電話:03-XXXX-XXXX
お知らせ
商品のご紹介
店舗のご案内
© SOUSAKU
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング演習】創作</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.ico">
<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=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<h1 class="site-title">
<a href="#"><img src="img/logo.svg" alt="創作"></a>
</h1>
<nav class="gnav">
<ul>
<li><a href="#news">お知らせ</a></li>
<li><a href="#create">商品のご紹介</a></li>
<li><a href="#shop">店舗のご案内</a></li>
</ul>
</nav>
<div class="onlinestore">
<a href="#" target="_blank">オンラインストアを見る</a>
</div>
</header>
<main class="main-content">
<section id="news" class="news wrapper">
<h2 class="section-title">
<span class="en">News</span>
<span class="ja">お知らせ</span>
</h2>
<dl class="news-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="create" class="create 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 class="science 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" class="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 class="footer">
<div class="inner">
<div class="online">
<p><a href="#" target="_blank">オンラインストアを見る</a>|<a href="mailto:xxxxx@xxx.xxx.com">お問い合わせ</a></p>
</div>
<div class="info">
<div class="logo"><img src="img/logo.svg" alt="創作"></div>
<p class="info">
〒106-0032 東京都港区六本木5丁目×××××<br>
電話:<a href="tel:03-xxxx-xxxx">03-XXXX-XXXX</a>
</p>
<ul class="footer-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"><small>© SOUSAKU</small></p>
</footer>
</body>
</html>
@charset "UTF-8";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, li {
list-style: none;
}
a {
color: #fff;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body {
color: #333;
background-color: #e6e2d7;;
font-size: 16px;
font-family: 'Noto Serif JP', serif;
line-height: 1.0;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 0 20px 0 30px;
}
@media screen and (min-width: 768px) {
.wrapper {
max-width: 1024px;
padding: 0 20px;
}
}
.header {
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 80px;
padding: 20px;
background: url(../img/mainvisual-sp.jpg) no-repeat center top;
background-size: cover;
writing-mode: vertical-rl;
writing-mode: vertical-rl;
writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.site-title {
margin-left: 60px;
}
.site-title a {
display: block;
}
.site-title img {
width: 40px;
}
.gnav li {
margin-left: 25px;
line-height: 1.45;
}
@media screen and (min-width: 768px) {
.header {
margin-bottom: 180px;
padding: 60px 80px;
background: url(../img/mainvisual-pc.jpg) no-repeat center top;
background-size: cover;
}
}
.header .onlinestore {
position: absolute;
left: 20px;
bottom: 20px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.2);
}
.onlinestore a {
display: block;
padding: 30px 22px;
border: solid 1px #ccc;
}
.onlinestore a:hover {
opacity: 0.7;
}
@media screen and (min-width: 768px) {
.header .onlinestore {
left: 40px;
bottom: 30px;
}
}
.news {
margin-bottom: 80px;
display: flex;
flex-direction: row-reverse;
}
.news .section-title {
font-weight: normal;
writing-mode: vertical-rl;
writing-mode: vertical-rl;
writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.news .section-title .en {
display: block;
font-size: 14.5px;
margin-left: 15px;
}
.news .section-title .ja {
display: block;
font-size: 28px;
letter-spacing: 0.1em;
}
.news-list {
padding: 20px 30px 0 0;
writing-mode: vertical-rl;
writing-mode: vertical-rl;
writing-mode: tb-rl;
writing-mode: vertical-rl;
line-height: 1.45;
}
.news-list dt {
border-right: solid 1px #000;
font-size: 12px;
padding: 15px 12px 15px 5px;
}
.news-list dd {
padding: 15px 0 15px 12px;
}
.news-list dd:nth-of-type(3) {
border-left: solid 1px #000;
}
.news-list dt:nth-of-type(n + 4),
.news-list dd:nth-of-type(n + 4) {
display: none;
}
@media screen and (min-width: 768px) {
.news {
margin-bottom: 180px;
}
.news .section-title .en {
display: block;
font-size: 14px;
margin-left: 15px;
}
.news .section-title .ja {
display: block;
font-size: 36px;
letter-spacing: 0.1em;
}
.news-list {
padding: 80px 100px 0 0;
}
.news-list dt {
padding: 15px 30px 15px 5px;
}
.news-list dd {
padding: 15px 0 15px 30px;
}
.news-list dd:last-child {
border-left: solid 1px #000;
}
.news-list dd:nth-of-type(3) {
border-left: 0;
}
.news-list dt:nth-of-type(n + 4),
.news-list dd:nth-of-type(n + 4) {
display: block;
}
}
.products {
display: flex;
margin-bottom: 180px;
}
.products .section-title {
margin-left: 20px;
writing-mode: vertical-lr;
writing-mode: vertical-lr;
writing-mode: tb-lr;
writing-mode: vertical-lr;
}
.products .section-title {
font-weight: normal;
}
.products .section-title .ja {
margin-bottom: 20px;
font-size: 32px;
letter-spacing: 0.1em;
}
.products .section-title .en {
font-size: 14.5px;
letter-spacing: 0.02em;
}
.products .img {
position: relative;
margin-top: 100px;
}
.products .text {
position: absolute;
bottom: -20px;
width: 56%;
padding: 50px 0;
color: #fff;
font-size: 14px;
text-align: center;
}
.create {
flex-direction: row-reverse;
margin-bottom: 100px;
}
.create .section-title {
margin-left: 10px;
}
.create .section-title .ja {
font-size: 24px;
}
.create .section-title .en {
display: none;
}
.products .img {
margin-top: 70px;
}
.create .text {
width: 64%;
padding: 30px 0;
background: rgba(249, 233, 6, 0.6);
left: -20px;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.create {
margin-bottom: 180px;
}
.create .section-title {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 20px;
}
.create .section-title .ja {
font-size: 32px;
}
.create .section-title .en {
display: block;
}
.products .img {
width: 65%;
margin-top: 100px;
}
.create .text {
width: 56%;
padding: 50px 0;
font-size: 16px;
line-height: 1.5;
}
}
.science {
margin-bottom: 100px;
padding: 0 20px;
}
.science .section-title {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 10px 0 0;
}
.science .section-title .ja {
font-size: 24px;
}
.science .section-title .en {
display: none;
}
.science .img {
width: 90%;
}
.science .text {
width: 64%;
padding: 30px 0;
background: rgba(149, 42, 38, 0.6);
right: -20px;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.science {
margin-bottom: 180px;
}
.science .section-title {
margin: 0 20px 0 0;
}
.science .section-title .ja {
font-size: 32px;
}
.science .section-title .en {
display: block;
}
.science .text {
width: 56%;
padding: 50px 0;
font-size: 16px;
line-height: 1.5;
}
.science .img {
width: 65%;
}
}
.shop iframe {
width: 100%;
vertical-align: bottom;
}
.footer {
padding: 40px 20px 30px;
background-color: #000;
color: #fff;
}
.footer .inner {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 14.5px;
}
.footer .online,
.footer .info {
writing-mode: vertical-rl;
writing-mode: vertical-rl;
writing-mode: vertical-rl;
writing-mode: tb-rl;
}
.footer .inner .logo {
width: 40px;
margin-left: 26px;
}
.footer .inner .info {
line-height: 1.8;
}
.footer-menu {
font-size: 14.5px;
margin-right: 24px;
}
.footer-menu li a {
display: block;
padding: 0 2px;
}
.footer .copyright {
font-size: 10px;
text-align: center;
}
@media screen and (min-width: 768px) {
.footer {
padding: 80px 80px 30px 30px;
}
.footer .inner .logo {
margin-left: 60px;
}
.footer .inner .info {
line-height: 2.0;
}
.footer-menu {
font-size: 16px;
margin-right: 44px;
}
.footer-menu li a {
padding: 0 8px;
}
}