Preview
/demo/F01-morning-brew/index.html
Learning Points
1
セマンティックHTMLの基本構造
2
Flexboxでの横並びレイアウト
3
ヒーロー画像のフルブリード表示
4
メニュー一覧の整列とドット線装飾
5
モバイルファーストのレスポンシブ
Source Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morning Brew | A neighborhood coffee shop</title>
<meta name="description" content="朝のひとときに、丁寧に淹れた一杯を。Morning Brewは小さな町のスペシャルティコーヒー専門店です。">
<!-- Google Fonts -->
<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=Cormorant+Garamond:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ============ HEADER ============ -->
<header class="header">
<div class="header__inner">
<a href="#" class="header__logo">
<span class="header__logo-mark">M</span>
<span class="header__logo-text">Morning Brew</span>
</a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#menu" class="nav__link">Menu</a></li>
<li class="nav__item"><a href="#access" class="nav__link">Access</a></li>
<li class="nav__item"><a href="#contact" class="nav__link nav__link--cta">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- ============ HERO ============ -->
<section class="hero">
<div class="hero__image">
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=2000&q=80" alt="カフェの店内">
</div>
<div class="hero__content">
<p class="hero__sub">— A neighborhood coffee shop —</p>
<h1 class="hero__title">朝のひとときに、<br>丁寧に淹れた一杯を。</h1>
<p class="hero__lead">
週末の朝、ゆっくりと流れる時間の中で。<br>
私たちは一杯のコーヒーが、<br class="sp-only">日常を少しだけ豊かにすると信じています。
</p>
<a href="#menu" class="btn btn--primary">メニューを見る</a>
</div>
</section>
<!-- ============ ABOUT ============ -->
<section id="about" class="about section">
<div class="container">
<div class="section__head">
<p class="section__sub">About us</p>
<h2 class="section__title">私たちについて</h2>
</div>
<div class="about__grid">
<div class="about__image">
<img src="https://images.unsplash.com/photo-1442512595331-e89e73853f31?w=1200&q=80" alt="バリスタがコーヒーを淹れる様子">
</div>
<div class="about__text">
<h3 class="about__heading">素材と時間を、惜しみなく。</h3>
<p>
Morning Brewは2018年、東京の小さな路地裏に生まれたスペシャルティコーヒー専門店です。世界中の農園から届く厳選された豆を、一杯ずつハンドドリップで丁寧に抽出しています。
</p>
<p>
私たちが大切にしているのは、コーヒーを「飲む」だけの時間ではなく、訪れた方がふと立ち止まり、自分自身と向き合える「場所」を提供すること。一杯のコーヒーがあなたの朝を、少しだけ特別なものにしますように。
</p>
</div>
</div>
</div>
</section>
<!-- ============ MENU ============ -->
<section id="menu" class="menu section section--alt">
<div class="container">
<div class="section__head">
<p class="section__sub">Our menu</p>
<h2 class="section__title">メニュー</h2>
</div>
<div class="menu__category">
<h3 class="menu__category-title">Coffee</h3>
<ul class="menu__list">
<li class="menu__item">
<span class="menu__name">ハンドドリップコーヒー</span>
<span class="menu__dots"></span>
<span class="menu__price">¥550</span>
</li>
<li class="menu__item">
<span class="menu__name">エスプレッソ</span>
<span class="menu__dots"></span>
<span class="menu__price">¥400</span>
</li>
<li class="menu__item">
<span class="menu__name">カフェラテ</span>
<span class="menu__dots"></span>
<span class="menu__price">¥600</span>
</li>
<li class="menu__item">
<span class="menu__name">カプチーノ</span>
<span class="menu__dots"></span>
<span class="menu__price">¥600</span>
</li>
<li class="menu__item">
<span class="menu__name">アメリカーノ</span>
<span class="menu__dots"></span>
<span class="menu__price">¥500</span>
</li>
</ul>
</div>
<div class="menu__category">
<h3 class="menu__category-title">Food</h3>
<ul class="menu__list">
<li class="menu__item">
<span class="menu__name">自家製グラノーラボウル</span>
<span class="menu__dots"></span>
<span class="menu__price">¥850</span>
</li>
<li class="menu__item">
<span class="menu__name">アボカドトースト</span>
<span class="menu__dots"></span>
<span class="menu__price">¥780</span>
</li>
<li class="menu__item">
<span class="menu__name">本日のキッシュ</span>
<span class="menu__dots"></span>
<span class="menu__price">¥920</span>
</li>
<li class="menu__item">
<span class="menu__name">バナナブレッド</span>
<span class="menu__dots"></span>
<span class="menu__price">¥480</span>
</li>
</ul>
</div>
</div>
</section>
<!-- ============ ACCESS ============ -->
<section id="access" class="access section">
<div class="container">
<div class="section__head">
<p class="section__sub">Access</p>
<h2 class="section__title">店舗情報</h2>
</div>
<div class="access__grid">
<div class="access__info">
<dl class="info-list">
<div class="info-list__row">
<dt>住所</dt>
<dd>〒100-0005<br>東京都千代田区丸の内1-2-3</dd>
</div>
<div class="info-list__row">
<dt>営業時間</dt>
<dd>平日 7:00 - 19:00<br>土日祝 8:00 - 18:00</dd>
</div>
<div class="info-list__row">
<dt>定休日</dt>
<dd>毎週水曜日</dd>
</div>
<div class="info-list__row">
<dt>電話番号</dt>
<dd>03-1234-5678</dd>
</div>
</dl>
</div>
<div class="access__map">
<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1200&q=80" alt="店舗外観">
</div>
</div>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer id="contact" class="footer">
<div class="container">
<div class="footer__inner">
<div class="footer__brand">
<span class="footer__logo">Morning Brew</span>
<p class="footer__tagline">A neighborhood coffee shop since 2018</p>
</div>
<ul class="footer__sns">
<li><a href="#" aria-label="Instagram">Instagram</a></li>
<li><a href="#" aria-label="Twitter">Twitter</a></li>
<li><a href="#" aria-label="Facebook">Facebook</a></li>
</ul>
</div>
<p class="footer__copy">© 2026 Morning Brew. All rights reserved.</p>
</div>
</footer>
</body>
</html>