HTMLとCSSの基礎から応用まで、長い道のりをお疲れ様でした！
ここまでの知識があれば、もう世の中にある大抵のWebサイトは作れるようになっています。
今回は「総集編」として、架空のカフェ「WDM CAFE」のランディングページを作ります。
以下の技術をすべて盛り込んでいます。
- ヒーローヘッダー： position と flex で文字を中央配置
- 特徴エリア： Flexbox で3列レイアウト
- メニュー： Grid でタイル状に写真を配置
- お問い合わせ： ユーザーに優しいフォーム
- スマホ対応： メディアクエリでレイアウト切り替え
完成イメージ
PCで見ると横並び、スマホで見ると縦並びになる、モダンなレスポンシブサイトです。
ソースコード（HTML + CSS）
以下のコードをまるごとエディタに貼り付けて、ブラウザで開いてみてください。
画像はフリー素材（Unsplash）を読み込むようにしているので、準備なしですぐに動きます！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ★スマホ対応の必須タグ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WDM CAFE | 最高のコーヒーをあなたに</title>
<style>
/* === 1. ベース設定 === */
body {
font-family: "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
line-height: 1.6;
}
/* 共通：見出しのデザイン（擬似要素で下線） */
h2 {
text-align: center;
margin-bottom: 40px;
font-size: 28px;
position: relative; /* 擬似要素の基準 */
}
h2::after {
content: "";
display: block;
width: 60px;
height: 3px;
background-color: #d4a373; /* カフェっぽいベージュ色 */
margin: 10px auto 0; /* 中央寄せ */
}
/* 共通：セクションの余白 */
section {
padding: 60px 20px;
max-width: 1000px; /* 横幅が広がりすぎないように制限 */
margin: 0 auto; /* 中央寄せ */
}
/* === 2. ヒーローヘッダー（トップ画像） === */
header {
height: 500px;
position: relative; /* 子要素（文字）の基準 */
background-image: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1200&q=80');
background-size: cover;
background-position: center;
}
/* 画像を少し暗くするフィルター（擬似要素の応用！） */
header::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* 黒の半透明 */
}
.hero-text {
position: absolute; /* 自由に配置 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 完全中央寄せ */
text-align: center;
color: white;
width: 90%;
}
.hero-text h1 {
font-size: 48px;
margin-bottom: 10px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* 文字を見やすく */
}
/* === 3. 特徴エリア（Flexbox） === */
.features {
display: flex; /* 横並びON */
justify-content: space-between;
gap: 20px;
}
.feature-item {
flex: 1; /* 均等な幅にする */
text-align: center;
padding: 20px;
background-color: #fdfbf7;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.feature-icon {
font-size: 40px;
margin-bottom: 10px;
display: block;
}
/* === 4. メニューエリア（Grid） === */
.menu-grid {
display: grid; /* GridモードON */
grid-template-columns: 1fr 1fr 1fr; /* 3列 */
gap: 20px;
}
.menu-item {
position: relative;
height: 200px;
border-radius: 10px;
overflow: hidden; /* 画像のはみ出し防止 */
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.menu-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 枠に合わせてトリミング */
transition: 0.3s; /* アニメーション */
}
/* ホバーで画像が拡大 */
.menu-item:hover img {
transform: scale(1.1);
}
/* === 5. お問い合わせフォーム === */
.contact-form {
background-color: #f9f9f9;
padding: 40px;
border-radius: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* 崩れ防止 */
}
button {
background: linear-gradient(to right, #d4a373, #8c6a46); /* グラデーション */
color: white;
padding: 15px 40px;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
display: block;
margin: 0 auto; /* ボタン中央寄せ */
transition: 0.3s;
}
button:hover {
opacity: 0.9;
transform: translateY(-2px); /* 少し浮く */
box-shadow: 0 5px 15px rgba(140, 106, 70, 0.4);
}
/* === 6. フッター === */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 50px;
}
/* === 7. スマホ対応（メディアクエリ） === */
@media (max-width: 768px) {
.hero-text h1 { font-size: 32px; }
.features {
flex-direction: column; /* 特徴を縦並びに */
}
.menu-grid {
grid-template-columns: 1fr; /* メニューを1列に */
}
}
</style>
</head>
<body>
<!-- ヒーローヘッダー -->
<header>
<div class="hero-text">
<h1>WDM CAFE</h1>
<p>極上のコーヒーと、安らぎの時間を。</p>
</div>
</header>
<!-- 特徴（Flexbox） -->
<main>
<section>
<h2>About Us</h2>
<div class="features">
<div class="feature-item">
<span class="feature-icon">☕</span>
<h3>厳選された豆</h3>
<p>世界中から選び抜かれた豆を自家焙煎しています。</p>
</div>
<div class="feature-item">
<span class="feature-icon">🍰</span>
<h3>手作りスイーツ</h3>
<p>コーヒーに合うケーキを毎日店内で焼いています。</p>
</div>
<div class="feature-item">
<span class="feature-icon">🌿</span>
<h3>癒やしの空間</h3>
<p>緑溢れる店内で、ゆったりとした時間をお過ごしください。</p>
</div>
</div>
</section>
<!-- メニュー（Grid） -->
<section>
<h2>Menu</h2>
<div class="menu-grid">
<div class="menu-item"><img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=600&q=80" alt="コーヒー"></div>
<div class="menu-item"><img src="https://images.unsplash.com/photo-1497935586351-b67a49e012bf?auto=format&fit=crop&w=600&q=80" alt="ラテ"></div>
<div class="menu-item"><img src="https://images.unsplash.com/photo-1579306194872-64d3b7bac4c2?auto=format&fit=crop&w=600&q=80" alt="ケーキ"></div>
<div class="menu-item"><img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=600&q=80" alt="カフェ風景"></div>
<div class="menu-item"><img src="https://images.unsplash.com/photo-1495147466023-ac5c588e2e94?auto=format&fit=crop&w=600&q=80" alt="デザート"></div>
<div class="menu-item"><img src="https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=600&q=80" alt="豆"></div>
</div>
</section>
<!-- お問い合わせ（Form） -->
<section>
<h2>Contact</h2>
<div class="contact-form">
<form>
<label>お名前</label>
<input type="text" placeholder="例：山田 太郎">
<label>メールアドレス</label>
<input type="email" placeholder="例：abc@example.com">
<label>メッセージ</label>
<textarea rows="5"></textarea>
<button type="submit">送 信</button>
</form>
</div>
</section>
</main>
<footer>
<p>© 2024 WDM CAFE. All Rights Reserved.</p>
</footer>
</body>
</html>解説：どこで何を使っている？
この1ページには、これまでの学びが凝縮されています。
- ヒーローヘッダー：
background-imageで背景画像を設定。header::beforeで黒いフィルターを重ねて文字を見やすく（擬似要素の応用テクニック！）。transform: translate(-50%, -50%)で文字をど真ん中に配置。
- About Us（特徴）：
display: flexで3つのボックスを横並びに。- スマホの時は
flex-direction: columnで縦並びに切り替え。
- Menu（メニュー）：
display: gridで写真をタイル状に配置。hoverとtransform: scale(1.1)で、マウスを乗せた時にズームするアニメーションを追加。
さいごに
おめでとうございます！
このコードが理解できていれば、あなたはもう自信を持って「Webサイトが作れます」と言って大丈夫です。
ここから先は、色を変えてみたり、自分の好きな写真を入れ替えたりして、オリジナルのポートフォリオサイトに改造してみてください。
Web制作の世界は、手を動かした分だけ楽しくなりますよ！