はじめての世界のビール｜スターターセット LP
e218.deau-ae.com
・作品タイトル（サイト名）
『はじめての世界のビール』
・クライアント
〈ビール会社様〉
想い：
ビールを呑んだことのない方や、もっと色んなビールを世の中の人に知ってもらいたい
・使用ソフト
テラパッド・FFFTP
・制作期間
10時間
・制作時に考慮した点 など
編集のしやすさを考慮し、メモを詳しく記入。
HTMLとCSSを見比べやすいように、番号を記載。
サイトの読み込み速度を軽量化の意識。
モバイル版にした際に別の画像に変換しています。
〇HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめての世界のビール｜スターターセット LP</title>
<link rel="stylesheet" href="style.css" />
<!-- Google Fonts（日本語＆英数字の見栄えを良くするため） -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Merriweather:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<!-- ===================================== -->
<!-- １）タイトル(はじめての世界のビール -->
<!-- ===================================== -->
<header class="titleblock">
<img src="png/title_beer.png"class="titlephoto">
</header>
<main>
<div class="container">
<!-- ===================================== -->
<!-- ２）ビール紹介リスト -->
<!-- ===================================== -->
<section class="beer-list" id="beer-intro">
<!-- ▼ビール1（アサヒ） -->
<div class="beer-item">
<img src="png/2beerlist_1.png"class="flag">
<div>
<p class="beerlist-product-name">アサヒビール／日本</p>
<p>100年以上の歴史を誇る日本を代表するビールブランド。</p>
<p>中でも「アサヒスーパードライ」は、1987年の発売以来、</p>
<p>“辛口”という新しいジャンルを切り開き、</p>
<p>世界中で愛され続けている。</p>
<p> <br> </p>
<p>特徴：キレのあるのどごしと、爽快な飲みごたえ</p>
</div>
</div>
<!-- ▼ビール2（ヒューガルデン） -->
<div class="beer-item">
<img src="png/2beerlist_2.png"class="flag">
<div>
<p class="beerlist-product-name">ヒューガルデン・ホワイト／ベルギー</p>
<p>約600年の歴史があるホワイトビールの王道。世界最大のビール</p>
<p>メーカーのAB InBevは『コロナ エキストラ」や『バドワイザー」</p>
<p>など、日本でも親しまれているビールを多数取り扱っている。</p>
<p> <br> </p>
<p>特徴：苦味が控えめで、爽やかな口当たり</p>
</div>
</div>
<!-- ▼ビール3（ストーン＆ウッド） -->
<div class="beer-item">
<img src="png/2beerlist_3.png"class="flag">
<div>
<p class="beerlist-product-name">ストーン＆ウッド／オーストラリア</p>
<p>パッションフルーツやシトラスの爽やかな香りが心をリラックス</p>
<p>させてくれるフルーツ系ビール。苦味がほぼなくジュースの様に</p>
<p>飲め、女性におすすめ。</p>
<p> <br> </p>
<p>特徴：苦味がほぼなく、清涼感のあるクセのない口当たり</p>
</div>
</div>
</section>
<!-- ===================================== -->
<!-- 3)ビールの魅力（Feature） -->
<!-- ===================================== -->
<!--魅力その1 ビールとよく合うおつまみ -->
<section class="feature" id="feature1">
<div class="feature-content">
<img src="png/attractive-products1.png">
</div>
</section>
<!--魅力その2大切な人との時間 -->
<section class="feature" id="feature2">
<div class="feature-content">
<img src="png/attractive-products2.png">
</div>
</section>
<!--魅力その3 観光気分を味わう -->
<section class="feature" id="feature3">
<div class="feature-content">
<img src="png/attractive-products3.png">
</div>
</section>
<!-- ===================================== -->
<!-- 4)CTA -->
<!-- ===================================== -->
<section class="cta">
<h2 class="cta-title">スターターセットを購入してみる</h2>
<a href="#" class="cta-btn">今すぐ注文する</a>
</section>
<!-- ===================================== -->
<!-- 5)レビュー -->
<!-- ===================================== -->
<section class="reviews" id="reviews">
<div class="review-item">
<img src="png/review.png"class="avatar">
</section>
<!-- ===================================== -->
<!-- 6)FAQ -->
<!-- ===================================== -->
<section class="faq" id="faq">
<h2 class="feature-heading">よくある質問</h2>
<div class="faq-item">
<p class="faq-item-q">Q. 苦いビールが苦手なのですが…</p>
<p class="faq-item-a">A. ご紹介しているビールは苦味が少ない物やフルーティーで甘い物が多め。苦味が苦手でも美味しく飲んで頂けます。</p>
</div>
<div class="faq-item">
<p class="faq-item-q">Q. 冷やしてどのくらいで飲めますか？</p>
<p class="faq-item-a">A. 冷蔵庫で3時間程、冷やして頂くのがおすすめです。</p>
</div>
</section>
<!-- ===================================== -->
<!-- 7)ご利用ガイド -->
<!-- ===================================== -->
<section class="guide" id="guide">
<h2 class="feature-heading">ご利用ガイド</h2>
<p>〇 配送料について<br>
ご注文後、通常1?3営業日以内に発送いたします。<br>
全国一律5000円（税込）以上で送料無料に致します。</p>
</section>
</div> <!-- .container -->
</main>
<!-- ===================================== -->
<!-- 8)フッター -->
<!-- ===================================== -->
<footer>
c 2025 株式会社TUKASA
</footer>
</body>
</html>
〇CSS
@charset "utf-8";
/* ===== フォント変数 ===== */
:root{
--heading-font:
"YuMincho", "游明朝", "Yu Mincho", /* Windows */
"Hiragino Mincho ProN", "Hiragino Mincho Pro", /* macOS */
"Noto Serif JP", serif; /* Fallback */
}
/* =======================================
全体の共通設定
======================================= */
*, *::before, *::after {
box-sizing: border-box; /* レイアウト崩れ防止 */
}
body {
margin: 0;
font-family: "Noto Sans JP", sans-serif;
line-height: 1.7;
color: #F5F5F5; /* 文字は明るいオフホワイト */
background: #071624; /* デザインカンプの濃紺背景に近い色 */
}
h1, h2, h3, h4, h5, h6, p {
margin: 0; /* ブロック要素のデフォルト余白をリセット */
}
a {
color: inherit; /* ボタン以外のリンクは文字色を継承 */
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block; /* 下に余白ができるのを防止 */
}
.container {
width: 90%;
max-width: 820px; /* レイアウトを中央寄せで見やすく */
margin: 0 auto;
}
/* =======================================
１）タイトル(はじめての世界のビール) 画像貼り付け
======================================= */
.titlephoto{
width: 800px; /* 画像 */
max-width: 90%;
height: auto;
margin: 0 auto 24px;
display: block;
}
.titleblock{
display: flex;
justify-content: center; /* 中央寄せ */
align-items: center;
flex-direction: column;
}
/* =======================================
２）ビール紹介リスト 一部画像貼り付け
======================================= */
/* マージン１との間隔150px*/
.beer-list {
margin: 150px 0 60px;
}
.beer-item {
display: flex;
gap: 0px;
margin-bottom: 100px;
align-items: flex-start;
}
/*↑align-items: flex-start;上部で揃える指定 */
.beer-item img.flag {
width: 150px; /* 商品画像の固定幅 */
flex-shrink: 0;
}
/* 商品名 */
.beerlist-product-name {
font-family: var(--heading-font);
font-weight: 700;
font-size: 1.8rem;
color: #F5EAC2;
margin-bottom: 10px;
}
/* =======================================
3)ビールの魅力（Feature）画像貼り付け
======================================= */
/* マージン2との間隔150px*/
.feature {
margin: 150px 0;
}
.feature-heading {
font-size: 1.6rem;
color: #F5EAC2;
margin-bottom: 16px;
}
.feature-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
align-items: center;
}
/* =======================================
４）CTA（スターターセットを購入してみる）
======================================= */
/* パディング3との間隔150px*/
.cta {
text-align: center;
padding: 150px 0;
}
/* スターターセットを購入してみる */
.cta-title {
font-size: 3rem;
color: #F5EAC2;
margin-bottom: 24px;
}
/* 今すぐ購入するボタン */
.cta-btn {
display: inline-block;
background: #F5EAC2;
color: #071624;
padding: 16px 48px;
font-size: 1.1rem;
font-weight: bold;
border-radius: 4px;
transition: opacity 0.3s ease;
}
/* カーソルが乗っている間、不透明度を 0.85 に変更するという宣言 */
.cta-btn:hover {
opacity: 0.85;
}
/* =======================================
５）レビュー（Testimonials）画像貼り付け
======================================= */
/* マージン４との間隔150px*/
.reviews {
margin: 150px 0;
}
/* ← 横並び→縦並び flex-direction:column;*/
/* 中央寄せ align-items:center; */
.review-item {
display: flex;
flex-direction:column;
gap: 16px;
margin-bottom: 24px;
align-items: center;
}
/* 画像サイズと画像枠線 */
.review-item img.avatar {
width:300;
height:300px;
border: 2px solid #F5EAC2;
}
/* =======================================
６）FAQ
======================================= */
.faq {
margin: 80px 0 60px;
}
.faq-item {
margin-bottom: 20px;
}
.faq-item-q {
font-weight: 700;
color: #F5EAC2;
}
/* =======================================
７）ご利用ガイド
======================================= */
.guide {
margin: 60px 0;
}
/* =======================================
８）フッター
======================================= */
footer {
text-align: center;
font-size: 0.875rem;
padding: 40px 0 60px;
color: #8A98A6;
}
/* =======================================
メディアクエリ（スマホ向けの調整例）
======================================= */
@media (max-width: 600px) {
.hero-title {
font-size: 1.6rem;
padding: 0.75rem 1.5rem;
}
.beer-item {
flex-direction: column;
align-items: flex-start;
}
.beer-item img.flag {
margin-bottom: 12px;
}
}
/**/
コメント