素材を使って実践！画像挿入とページレイアウトを一から組み上げる

はじめに
1. 画像ファイルの配置と img タグの基本
- 1.1 フォルダ構成を整える
- 1.2 img タグと alt 属性の書き方
2. 3つのレイアウトパターンを実装する
3. ブラウザで確認しながら仕上げる
- 3.1 Live Serverで動作確認しながら微調整する
- 3.2 完成したページの全体構成
まとめ

はじめに

前回の記事では、写真ACから素材をダウンロードし、VS Codeでファイルを作成・保存し、ブラウザで確認するまでの「準備フロー」を解説しました。今回はいよいよその素材とファイルを使って実際にページを作ります。ヒーローエリア・横並びセクション・カードレイアウトの3パターンを通して、画像の挿入からレスポンシブ対応まで一気に体験しましょう。

1. 画像ファイルの配置と img タグの基本

1.1 フォルダ構成を整える

コーディングを始める前に、プロジェクトフォルダの構成をきちんと整えておきましょう。前回ダウンロードした写真ACの画像は images/ フォルダに移動させておきます。ファイル名は半角英数字にするとパスの指定でトラブルが起きにくくなります。

my-website/
├─ index.html
├─ style.css
└─ images/
├─ hero.jpg ← ヒーロー画像
├─ about.jpg ← 横並びセクション用
├─ card01.jpg ← カード1枚目
├─ card02.jpg ← カード2枚目
└─ card03.jpg ← カード3枚目

1.2 img タグと alt 属性の書き方

HTMLで画像を表示するには <img> タグを使います。src 属性にファイルのパスを、alt 属性に画像の説明文を必ず記入しましょう。alt はSEOとアクセシビリティの両面で重要です。

<!– 基本の書き方 –>
<img
src=”images/hero.jpg”
alt=”都市の夜景の写真”
width=”1200″
height=”600″
>

/* CSSで幅を可変にする（レスポンシブの基本） */
img {
max-width: 100%; /* 親要素をはみ出さない */
height: auto; /* 縦横比を保つ */
display: block; /* 余計な隙間をなくす */
}

💡 object-fit で画像を綺麗に切り抜く：カードやバナーなど固定サイズの枠に画像を収めたい場合は object-fit: cover を使います。画像の縦横比を保ちながら枠いっぱいに表示してくれるため、サイズがバラバラな素材でも統一感が出ます。

2. 3つのレイアウトパターンを実装する

2.1 パターン① ヒーローエリア（全幅画像＋テキスト重ね）

ページ最上部に配置する大きなビジュアルエリアです。position: relative と position: absolute を組み合わせて、画像の上にテキストを重ねます。

<!– HTML –>
<div class=”hero”>
<img src=”images/hero.jpg” alt=”ヒーロー画像”>
<div class=”hero-text”>
<h1>見出しテキスト</h1>
<p>サブテキスト</p>
</div>
</div>

/* CSS */
.hero { position: relative; }
.hero img { width: 100%; height: 400px; object-fit: cover; }
.hero-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.4); /* 半透明オーバーレイ */
color: #fff;
}

2.2 パターン② 画像＋テキストの横並びセクション

第二・三弾で学んだFlexboxとメディアクエリを組み合わせ、PC横並び・スマホ縦積みのセクションを作ります。下のプレビューで実際の切り替わりを確認してみましょう。

<!– HTML –>
<section class=”about”>
<div class=”about-img”>
<img src=”images/about.jpg” alt=”aboutの画像”>
</div>
<div class=”about-text”>
<h2>私たちについて</h2>
<p>テキストが入ります。</p>
</div>
</section>

/* CSS */
.about { display: flex; gap: 2rem; align-items: center; }
.about-img { flex: 1; }
.about-img img { width: 100%; border-radius: 8px; }
.about-text { flex: 1; }

@media (max-width: 640px) {
.about { flex-direction: column; }
}

2.3 パターン③ 画像カードの3列グリッド

ギャラリーやサービス紹介などでよく使われる、画像付きカードの横並びレイアウトです。Flexboxの flex-wrap を使うことでカードの数が増えても自動的に折り返してくれます。スマホでは1列に変わるようメディアクエリで制御します。

<!– HTML –>
<div class=”cards”>
<div class=”card”>
<img src=”images/card01.jpg” alt=”カード1″>
<div class=”card-body”>
<h3>タイトル</h3>
<p>説明文</p>
</div>
</div>
</div>

/* CSS */
.cards {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.card {
flex: 1 1 calc(33.333% – 1.25rem); /* 3列 */
border-radius: 8px;
overflow: hidden;
}
.card img {
width: 100%;
height: 180px;
object-fit: cover;
}

@media (max-width: 640px) {
.card { flex: 1 1 100%; } /* 1列 */
}

💡 画像の読み込み速度を上げるには：写真ACからダウンロードした画像は解像度が高くファイルサイズが大きい場合があります。Webに使う際はSquoosh（squoosh.app）などの無料ツールでWebP形式に変換・圧縮しておくと、ページの読み込みが大幅に速くなります。

3. ブラウザで確認しながら仕上げる

3.1 Live Serverで動作確認しながら微調整する

コードを書いたら必ずLive Serverでブラウザ表示を確認しながら進めましょう。特に画像のパス指定（src属性）は間違えやすいポイントです。画像が表示されない場合はまずファイル名とフォルダのスペルミスを確認しましょう。

1.画像が表示されない場合：srcのパスが正しいか確認します。images/photo.jpg のように images/ フォルダ名から始まっているかチェックしましょう。

2.画像が崩れる場合：CSSに max-width: 100%; height: auto; が当たっているか確認します。画像のデフォルトサイズがそのまま表示されている可能性があります。

3.スマホで確認する：開発者ツール（F12）を開き、デバイスツールバーで iPhone 14 Pro などを選択。Flexboxが縦に切り替わっているかチェックします。

4.Stylesパネルで素早く調整：開発者ツールの Styles タブで gap や border-radius の値をその場で変更し、納得できたらコードに反映します。

3.2 完成したページの全体構成

3つのレイアウトパターンを組み合わせると、1ページ完結型のシンプルなWebサイトが完成します。HTML・CSSそれぞれの役割分担を意識しながら、最終的なファイル構成を確認しましょう。

<!– index.html の全体構成イメージ –>
<body>
<!– ① ヒーローエリア –>
<div class=”hero”>…</div>

<!– ② 横並びセクション –>
<section class=”about”>…</section>

<!– ③ カードグリッド –>
<div class=”cards”>
<div class=”card”>…</div>
<div class=”card”>…</div>
<div class=”card”>…</div>
</div>
</body>