サイトのコンテンツを
HTMLで組み立てよう
前回作った"骨格"に、画像やテキスト、メニュー情報を入れて、café SOELのHTMLを完成させます。今回が終わるころには、すべてのコンテンツが揃った状態になりますよ。
前回のおさらい
- HTMLの3層構造（html → head → body）を理解した
- セマンティックタグ（header、nav、main、section、footer）の意味と使い方を学んだ
- café SOELの骨格を、見出しとテキストだけのスケルトンとして書き上げた
前回のコードがブラウザに表示されていて、ナビゲーションのページ内リンクが動作していれば準備完了です。
今回のゴール
- <img> 要素で画像を表示し、適切な alt 属性を書く
- class 属性の役割を理解し、CSSの準備としてクラス名を付ける
- café SOELの全セクションにコンテンツを入れ、HTMLを完成させる
CSSがまだないので、画像は原寸で表示され、テキストもブラウザのデフォルトスタイルのままです。見た目はまだ荒削りですが、今回でHTMLの「中身」が完成します。ここまで来れば、次回からCSSで一気に見た目が変わっていくので楽しみにしていてくださいね。
今回登場する新しいHTML要素
前回はサイトの「骨格」を作りましたが、今回は「中身」を入れていきます。そのために、いくつか新しいHTML要素を使います。コードを書きながら順番に紹介しますが、先に全体像を把握しておきましょう。
<img> は画像を表示するための要素です。写真やロゴをページに配置するときに使います。
<div> と <span> は、意味を持たないグルーピング用の要素です。CSSでスタイルを当てるために「グループ」を作りたいときに使います。
<article> は、それ自体で独立した意味を持つコンテンツを表します。メニューカードのような「1つのまとまり」に使います。
<dl>、<dt>、<dd> は定義リスト（説明リスト）です。「ラベル」と「値」のペアを表すのに最適で、店舗情報にぴったりです。
そして class 属性。これはHTMLの要素に「名前」を付ける仕組みで、次回以降のCSSでスタイルを当てるために使います。
画像を表示する — <img> 要素
Webページに画像を表示するには <img> 要素を使います。ここで、第1回でダウンロードした画像素材を使い始めます。img フォルダの中に画像ファイルが入っていることを確認してください。
<img src="img/hero.jpg" alt="café SOELの店内" width="1920" height="1080">src 属性は画像ファイルのパス（場所）です。img/hero.jpg は「imgフォルダの中のhero.jpg」という意味。index.html から見た相対パスで書きます。
alt 属性は、画像が表示できないときや、スクリーンリーダーが読み上げるときに使われる「代替テキスト」です。画像の内容を簡潔に説明する文章を書きます。
width と height は画像の元のサイズをピクセル単位で指定します。「ブラウザがページを読み込むとき、画像が表示される前にそのスペースを確保してくれる」ので、画像が読み込まれたときにページがガクッとズレる（レイアウトシフト）のを防げます。
<img> は閉じタグがないことに注目してください。<img ... > だけで完結する「空要素」です。
class属性 — CSSのための「名札」
前回の骨格コードでは class 属性を使いませんでしたが、今回からは積極的に付けていきます。
class 属性は、HTML要素に「名前」を付ける仕組みです。この名前は、次回以降CSSでスタイルを当てるときの「目印」になります。
<section class="hero">
<!-- ヒーローセクションの中身 -->
</section>id 属性は1ページに1つしか使えませんでしたが、class は同じ名前を何度でも使えます。たとえば class="menu-card" を4つのメニューカードすべてに付ける、といった使い方ができます。
クラス名の付け方にルールはありませんが、「その要素が何であるかが名前でわかる」ようにするのが基本です。box1 や red-text のような名前は避けて、hero-content や menu-card-title のように意味のある名前を付けましょう。
クラス名は「見た目」ではなく「役割」で名付ける。これだけで、将来の自分がコードを読むのがずっと楽になります。
<div> と <span> — 意味のないグルーピング
前回「セマンティックなタグを使いましょう」と言いましたが、どうしても意味のあるタグが当てはまらない場面があります。そんなときに使うのが <div> と <span> です。
<div> はブロック要素のグルーピング用。「複数の要素をまとめて1つの箱に入れたい」ときに使います。たとえば、画像とテキストをセットにして横並びにしたいとき、それらを <div> で囲みます。
<span> はインライン要素のグルーピング用。テキストの一部分にだけスタイルを当てたいときに使います。
どちらも「意味を持たない」のがポイントです。<header> や <nav> のように構造的な意味はありません。あくまで「CSSでスタイルを当てるためのグループ」として使います。
さっそく書き換えていこう
それでは、前回の骨格コードを本番のコンテンツに書き換えていきます。index.html を開いて、セクションごとに更新していきましょう。
<head> の中身はそのままです。変更するのは <body> の中身だけ。ただし <title> を少しだけ変更します。
<title>café SOEL — そよぐ光と、ひと息つくひととき</title>タイトルにキャッチコピーを追加しました。検索結果やブラウザのタブで、カフェの雰囲気が伝わるようになります。
ヘッダーを本番仕様にする
前回のヘッダーはテキストだけのシンプルな状態でした。今回は画像ロゴを使い、class 属性と aria-label を追加します。
<header class="header" id="top">
<div class="header-inner">
<a href="#top" class="logo">
<img src="img/logo.png" alt="café SOEL" width="160" height="40">
</a>
<nav aria-label="メインナビゲーション">
<ul class="nav-list">
<li><a href="#concept" class="nav-link">Concept</a></li>
<li><a href="#menu" class="nav-link">Menu</a></li>
<li><a href="#gallery" class="nav-link">Gallery</a></li>
<li><a href="#access" class="nav-link">Access</a></li>
</ul>
</nav>
</div>
</header>変更点を確認しましょう。テキストだった「café SOEL」を <img> に置き換えて、画像ロゴにしました。alt="café SOEL" でロゴの内容をテキストでも伝えています。
<div class="header-inner"> でロゴとナビゲーションを囲みました。これは第5回でFlexboxを使って横並びにするための準備です。
aria-label="メインナビゲーション" は、スクリーンリーダーに「このナビゲーションの名前」を伝える属性です。ページにナビゲーションが複数ある場合（ヘッダーとフッター）に区別するために使います。
各要素に class 属性を付けました。header、header-inner、logo、nav-list、nav-link。これらはすべてCSSの目印になります。
ヒーローセクションを書き換える
ヒーローセクションにメインビジュアル画像を追加し、構造を整えます。
<section class="hero" id="hero">
<div class="hero-image">
<img src="img/hero.jpg" alt="café SOELの店内。大きな窓から自然光が差し込む開放的な空間" width="1920" height="1080">
</div>
<div class="hero-content">
<p class="hero-sub">Natural Light & Coffee</p>
<h1 class="hero-title">そよぐ光と、<br>ひと息つくひととき。</h1>
<a href="#concept" class="hero-cta">Scroll</a>
</div>
</section>hero.jpg をメインビジュアルとして配置しました。alt 属性には画像の内容を具体的に書いています。
<br> は文中での改行を表す要素です。「そよぐ光と、」のあとで改行して、2行に分かれたキャッチコピーにしています。<br> は段落の区切りではなく、あくまで「1つの文の中での視覚的な改行」に使います。
「Scroll」リンクは、コンセプトセクションへのページ内リンクです。CSSで装飾すると、完成形のようなスクロールボタンになります。
コンセプトセクションを書き換える
コンセプトセクションに画像とリッチなテキスト構造を追加します。
<section class="concept section" id="concept">
<div class="concept-inner">
<div class="concept-image">
<img src="img/concept.jpg" alt="木のテーブルの上に置かれたハンドドリップコーヒーと陶器のカップ" width="1200" height="800">
</div>
<div class="concept-text">
<span class="section-label">Concept</span>
<h2 class="section-heading">ひかりと、木と、<br>一杯のコーヒーと。</h2>
<p>café SOEL（カフェ ソエル）は、「そよぐ光」をイメージした造語から名づけました。</p>
<p>大きな窓から差し込む自然光、ナチュラルな木のぬくもり、丁寧に淹れた一杯のコーヒー。忙しい日常からすこしだけ離れて、穏やかな時間を過ごしていただける場所でありたいと思っています。</p>
<p>素材の味を大切にしたフードとドリンクを、心を込めてお届けします。</p>
</div>
</div>
</section>class="concept section" のように、1つの要素に複数のクラスを付けることもできます。スペースで区切って書きます。section クラスは共通の余白に、concept クラスはこのセクション固有のスタイルに使う予定です。
<span class="section-label"> は、セクションの上に小さく「Concept」と表示するためのラベルです。<span> はインライン要素なので文の流れを乱しません。
concept-inner で画像とテキストを囲んでいるのは、第5回でFlexboxを使って横並びにするためです。今の段階では縦に並びますが、構造として準備しておきます。
メニューセクション — <article> を使おう
メニューセクションは、4つのメニューカードを並べる構成です。ここで新しい要素 <article> を使います。
<article> は「独立した1つのコンテンツ」を表す要素です。メニューカードのように、それだけで意味が成立するまとまりに使います。
<section class="menu section" id="menu">
<div class="section-header">
<span class="section-label">Menu</span>
<h2 class="section-heading">こだわりのメニュー</h2>
<p class="section-desc">素材を活かしたシンプルなおいしさを、丁寧にお届けします。</p>
</div>
<div class="menu-grid">
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-coffee.jpg" alt="ハンドドリップで淹れたコーヒー" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">Hand Drip Coffee</h3>
<p class="menu-card-desc">産地ごとに異なる豆の個性を引き出す、一杯ずつ丁寧なハンドドリップ。</p>
<span class="menu-card-price">¥550</span>
</div>
</article>
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-latte.jpg" alt="シンプルなラテアートが施されたカフェラテ" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">Café Latte</h3>
<p class="menu-card-desc">まろやかなミルクとエスプレッソのバランス。シンプルなラテアートを添えて。</p>
<span class="menu-card-price">¥600</span>
</div>
</article>
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-cake.jpg" alt="素朴で美しいケーキ" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">Seasonal Cake</h3>
<p class="menu-card-desc">季節のフルーツを使った、素朴だけど美しいケーキ。コーヒーとの相性も抜群です。</p>
<span class="menu-card-price">¥650</span>
</div>
</article>
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-sandwich.jpg" alt="断面が美しいサンドイッチ" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">SOEL Sandwich</h3>
<p class="menu-card-desc">新鮮な野菜とハム、自家製ソースをはさんだボリュームのあるサンドイッチ。</p>
<span class="menu-card-price">¥900</span>
</div>
</article>
</div>
</section>コードが長くなりましたが、構造はシンプルです。section-header（見出し部分）+ menu-grid（カード4枚を囲むコンテナ）という2つのブロック。そして menu-grid の中に article.menu-card が4つ並んでいます。
各カードの見出しが <h3> になっているのに注目してください。ページの見出し階層は「h1（キャッチコピー） → h2（セクション見出し） → h3（カードのタイトル）」です。きちんと階層が守られていますね。
ギャラリーセクションを書き換える
<section class="gallery section" id="gallery">
<div class="section-header">
<span class="section-label">Gallery</span>
<h2 class="section-heading">店内の様子</h2>
<p class="section-desc">自然光と木のぬくもりに包まれた、穏やかな空間。</p>
</div>
<div class="gallery-grid">
<div class="gallery-item gallery-item--large">
<img src="img/interior-01.jpg" alt="大きな窓から光が差し込む窓際の席" width="1200" height="800">
</div>
<div class="gallery-item">
<img src="img/interior-02.jpg" alt="木のカウンターとペンダントライト" width="1200" height="800">
</div>
<div class="gallery-item">
<img src="img/exterior.jpg" alt="白い外壁と黒フレームの窓が特徴的な外観" width="1600" height="1000">
</div>
</div>
</section>gallery-item--large というクラス名に注目してください。--（ダブルハイフン）は「バリエーション」を表す命名規則で、1枚目の写真を大きく表示するための目印です。第6回でCSS Gridを使ってレイアウトするときにこのクラスを使います。
アクセスセクション — 定義リスト <dl> を使おう
店舗情報は「住所」「営業時間」のように「ラベル → 値」のペアになっています。こういった構造には <dl>（定義リスト / 説明リスト）がぴったりです。
<dl> はリスト全体を囲む親要素、<dt> はラベル（用語）、<dd> は値（説明）です。HTML5では、<div> で <dt> と <dd> のペアを囲むことも認められています。
<section class="access section" id="access">
<div class="access-inner">
<div class="access-image">
<img src="img/exterior.jpg" alt="café SOELの外観" width="1600" height="1000">
</div>
<div class="access-info">
<span class="section-label">Access</span>
<h2 class="section-heading">店舗情報</h2>
<dl class="info-list">
<div class="info-item">
<dt>住所</dt>
<dd>〒156-0054 東京都世田谷区桜丘町3-12-8</dd>
</div>
<div class="info-item">
<dt>営業時間</dt>
<dd>
平日 10:00 – 19:00<br>
土日 9:00 – 19:00
</dd>
</div>
<div class="info-item">
<dt>定休日</dt>
<dd>毎週水曜日</dd>
</div>
<div class="info-item">
<dt>電話</dt>
<dd><a href="tel:03-0000-0000">03-0000-0000</a></dd>
</div>
<div class="info-item">
<dt>アクセス</dt>
<dd>小田急線 千歳船橋駅より徒歩8分</dd>
</div>
</dl>
</div>
</div>
</section>電話番号のリンク href="tel:03-0000-0000" に注目してください。tel: はスマートフォンでタップすると電話をかけられるリンクです。実店舗のサイトでは定番の書き方です。
フッターを書き換える
<footer class="footer">
<div class="footer-inner">
<a href="#top" class="footer-logo">
<img src="img/logo.png" alt="café SOEL" width="120" height="30">
</a>
<ul class="footer-nav">
<li><a href="#concept">Concept</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#access">Access</a></li>
</ul>
<p class="footer-copy">© 2025 café SOEL. All rights reserved.</p>
</div>
</footer>フッターにもロゴ、ナビゲーションリンク、著作権表記を入れました。ヘッダーよりもロゴサイズが小さい（width="120"）のは、フッターはページの脇役だからです。こういった細かなサイズの違いも、CSSで調整していきます。
ここまでの全体を確認しよう
すべてのセクションを書き終えました。保存してブラウザで確認してみましょう。
CSSがないので、テキストと画像がただ縦に並んでいるだけの状態です。画像は原寸で表示されるので、かなり大きく見えるかもしれません。でもこれでいいんです。HTMLは"構造"を作る言語。見た目は次回からCSSで整えていきます。あなたの画面でも同じように表示されていますか？
もしうまく表示されない場合や、画像が表示されない場合は、以下の点を確認してみてください。
ここまでの index.html の全体を掲載します。もし途中で迷ったら、このコードをまるごとコピーして貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>café SOEL — そよぐ光と、ひと息つくひととき</title>
</head>
<body>
<!-- ========== HEADER ========== -->
<header class="header" id="top">
<div class="header-inner">
<a href="#top" class="logo">
<img src="img/logo.png" alt="café SOEL" width="160" height="40">
</a>
<nav aria-label="メインナビゲーション">
<ul class="nav-list">
<li><a href="#concept" class="nav-link">Concept</a></li>
<li><a href="#menu" class="nav-link">Menu</a></li>
<li><a href="#gallery" class="nav-link">Gallery</a></li>
<li><a href="#access" class="nav-link">Access</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- ========== HERO ========== -->
<section class="hero" id="hero">
<div class="hero-image">
<img src="img/hero.jpg" alt="café SOELの店内。大きな窓から自然光が差し込む開放的な空間" width="1920" height="1080">
</div>
<div class="hero-content">
<p class="hero-sub">Natural Light & Coffee</p>
<h1 class="hero-title">そよぐ光と、<br>ひと息つくひととき。</h1>
<a href="#concept" class="hero-cta">Scroll</a>
</div>
</section>
<!-- ========== CONCEPT ========== -->
<section class="concept section" id="concept">
<div class="concept-inner">
<div class="concept-image">
<img src="img/concept.jpg" alt="木のテーブルの上に置かれたハンドドリップコーヒーと陶器のカップ" width="1200" height="800">
</div>
<div class="concept-text">
<span class="section-label">Concept</span>
<h2 class="section-heading">ひかりと、木と、<br>一杯のコーヒーと。</h2>
<p>café SOEL（カフェ ソエル）は、「そよぐ光」をイメージした造語から名づけました。</p>
<p>大きな窓から差し込む自然光、ナチュラルな木のぬくもり、丁寧に淹れた一杯のコーヒー。忙しい日常からすこしだけ離れて、穏やかな時間を過ごしていただける場所でありたいと思っています。</p>
<p>素材の味を大切にしたフードとドリンクを、心を込めてお届けします。</p>
</div>
</div>
</section>
<!-- ========== MENU ========== -->
<section class="menu section" id="menu">
<div class="section-header">
<span class="section-label">Menu</span>
<h2 class="section-heading">こだわりのメニュー</h2>
<p class="section-desc">素材を活かしたシンプルなおいしさを、丁寧にお届けします。</p>
</div>
<div class="menu-grid">
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-coffee.jpg" alt="ハンドドリップで淹れたコーヒー" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">Hand Drip Coffee</h3>
<p class="menu-card-desc">産地ごとに異なる豆の個性を引き出す、一杯ずつ丁寧なハンドドリップ。</p>
<span class="menu-card-price">¥550</span>
</div>
</article>
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-latte.jpg" alt="シンプルなラテアートが施されたカフェラテ" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">Café Latte</h3>
<p class="menu-card-desc">まろやかなミルクとエスプレッソのバランス。シンプルなラテアートを添えて。</p>
<span class="menu-card-price">¥600</span>
</div>
</article>
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-cake.jpg" alt="素朴で美しいケーキ" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">Seasonal Cake</h3>
<p class="menu-card-desc">季節のフルーツを使った、素朴だけど美しいケーキ。コーヒーとの相性も抜群です。</p>
<span class="menu-card-price">¥650</span>
</div>
</article>
<article class="menu-card">
<div class="menu-card-image">
<img src="img/menu-sandwich.jpg" alt="断面が美しいサンドイッチ" width="800" height="800">
</div>
<div class="menu-card-body">
<h3 class="menu-card-title">SOEL Sandwich</h3>
<p class="menu-card-desc">新鮮な野菜とハム、自家製ソースをはさんだボリュームのあるサンドイッチ。</p>
<span class="menu-card-price">¥900</span>
</div>
</article>
</div>
</section>
<!-- ========== GALLERY ========== -->
<section class="gallery section" id="gallery">
<div class="section-header">
<span class="section-label">Gallery</span>
<h2 class="section-heading">店内の様子</h2>
<p class="section-desc">自然光と木のぬくもりに包まれた、穏やかな空間。</p>
</div>
<div class="gallery-grid">
<div class="gallery-item gallery-item--large">
<img src="img/interior-01.jpg" alt="大きな窓から光が差し込む窓際の席" width="1200" height="800">
</div>
<div class="gallery-item">
<img src="img/interior-02.jpg" alt="木のカウンターとペンダントライト" width="1200" height="800">
</div>
<div class="gallery-item">
<img src="img/exterior.jpg" alt="白い外壁と黒フレームの窓が特徴的な外観" width="1600" height="1000">
</div>
</div>
</section>
<!-- ========== ACCESS ========== -->
<section class="access section" id="access">
<div class="access-inner">
<div class="access-image">
<img src="img/exterior.jpg" alt="café SOELの外観" width="1600" height="1000">
</div>
<div class="access-info">
<span class="section-label">Access</span>
<h2 class="section-heading">店舗情報</h2>
<dl class="info-list">
<div class="info-item">
<dt>住所</dt>
<dd>〒156-0054 東京都世田谷区桜丘町3-12-8</dd>
</div>
<div class="info-item">
<dt>営業時間</dt>
<dd>
平日 10:00 – 19:00<br>
土日 9:00 – 19:00
</dd>
</div>
<div class="info-item">
<dt>定休日</dt>
<dd>毎週水曜日</dd>
</div>
<div class="info-item">
<dt>電話</dt>
<dd><a href="tel:03-0000-0000">03-0000-0000</a></dd>
</div>
<div class="info-item">
<dt>アクセス</dt>
<dd>小田急線 千歳船橋駅より徒歩8分</dd>
</div>
</dl>
</div>
</div>
</section>
</main>
<!-- ========== FOOTER ========== -->
<footer class="footer">
<div class="footer-inner">
<a href="#top" class="footer-logo">
<img src="img/logo.png" alt="café SOEL" width="120" height="30">
</a>
<ul class="footer-nav">
<li><a href="#concept">Concept</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#access">Access</a></li>
</ul>
<p class="footer-copy">© 2025 café SOEL. All rights reserved.</p>
</div>
</footer>
</body>
</html>今回のまとめ
- <img> 要素で画像を表示する。src（パス）、alt（代替テキスト）、width / height（サイズ）の4つの属性を必ず書く
- class 属性はCSSでスタイルを当てるための「名札」。同じクラス名を複数の要素に付けられる
- <div> と <span> は意味を持たないグルーピング要素。セマンティックタグが使えないときの最終手段
- <article> は独立した1つのコンテンツを表す要素で、メニューカードのようなまとまりに最適
- <dl> / <dt> / <dd> の定義リストは「ラベルと値のペア」を表し、店舗情報の構造化に適している
- café SOELの全セクション（ヘッダー、ヒーロー、コンセプト、メニュー、ギャラリー、アクセス、フッター）のHTMLが完成した
おめでとうございます！ これでcafé SOELのHTMLは完成です。まだCSSがないので見た目は素朴ですが、構造としてはもう「サイトの中身」がすべて揃っています。次回はいよいよCSSを導入して、この骨格に色やフォント、余白を与えていきます。ここからサイトの見た目が一気に変わるので、楽しみにしていてくださいね。