HTML・CSSを学んだあと、「タグやプロパティは分かるのに、白紙から書けない」と感じることがあります。そんなときは、答えを見る前に短い練習問題を解き、自分のコードと解答例を比較してみましょう。
この記事には、HTMLの基本構造から画像、リンク、ボックスモデル、Flexbox、Grid、フォーム、レスポンシブな記事カード一覧まで12問を用意しました。すべて解答例付きです。
コードを読むだけではなく、必ず自分のindex.htmlとstyle.cssへ入力してください。最後には、パソコンで3列、スマートフォンで1列になるページを完成させます。
練習問題の使い方
- 問題文を読み、10〜20分だけ自力で試す
- 止まったらヒントを1つ確認する
- 解答例と自分のコードを1行ずつ比較する
- 間違えた理由をメモする
- 色、文章、個数、画面幅を変えてもう一度試す
解答例と文字やクラス名が違っても、HTMLの意味が適切で、各画面幅で目的の表示になれば正解です。丸暗記ではなく、なぜその要素やプロパティを選んだか説明できる状態を目指してください。
まだHTMLファイルとCSSファイルの作り方が分からない場合は、先に次の記事で基本の書き方を確認できます。
HTMLの基礎練習問題
問題1：HTMLの基本構造を作る
index.htmlへ、HTML Living Standardに沿った最小限の文書を作ってください。言語は日本語、文字コードはUTF-8、スマートフォン向けのviewport、ページタイトル、h1見出しを含めます。
ヒント：html要素の中をheadとbodyに分けます。画面へ表示するh1はbody内です。
問題1の解答例を見る
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML・CSS練習ページ</title>
</head>
<body>
<h1>HTML・CSS練習ページ</h1>
</body>
</html>問題2：意味のあるページ構造を作る
ページをヘッダー、メインコンテンツ、2つのセクション、フッターに分けてください。メイン見出しは1つ、各セクションには小見出しと段落を置きます。
ヒント：header、main、section、footerを使います。見出しはh1の次にh2です。
問題2の解答例を見る
<header>
<p>Sample Site</p>
</header>
<main>
<h1>休日の過ごし方</h1>
<section>
<h2>午前の予定</h2>
<p>公園を散歩して写真を撮ります。</p>
</section>
<section>
<h2>午後の予定</h2>
<p>自宅で撮った写真を整理します。</p>
</section>
</main>
<footer>
<p><small>© Sample Site</small></p>
</footer>問題3：画像とリンクを追加する
images/lake.jpgを表示し、その下に「ギャラリーを見る」というリンクを置いてください。画像の内容は「山に囲まれた湖と青空」、リンク先はgallery.htmlです。
ヒント：画像にはsrcとalt、リンクにはhrefが必要です。画像本来の幅と高さも分かるなら指定します。
問題3の解答例を見る
<figure>
<img
src="images/lake.jpg"
alt="山に囲まれた湖と青空"
width="1200"
height="800"
>
<figcaption>朝の散歩で撮影した湖です。</figcaption>
</figure>
<p><a href="gallery.html">ギャラリーを見る</a></p>問題4：ナビゲーションをリストで作る
「ホーム」「記事一覧」「お問い合わせ」の3リンクを持つナビゲーションを作ってください。リンク先は順にindex.html、articles.html、contact.htmlです。
ヒント：ナビゲーション全体はnav、項目の集まりはulとliで表せます。ナビゲーションの目的が分かる名前も付けます。
問題4の解答例を見る
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="articles.html">記事一覧</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>CSSの基礎練習問題
問題5：クラスを使ってお知らせを装飾する
noticeクラスを付けた段落だけ、濃い青の文字、薄い青の背景、1remの内側余白、8pxの角丸にしてください。
ヒント：クラスセレクタの先頭にはピリオドを付けます。文字色はcolor、背景色はbackground-colorです。
問題5の解答例を見る
.notice {
color: #1e3a8a;
background-color: #eff6ff;
padding: 1rem;
border-radius: 8px;
}問題6：ボックスの実際の幅を考える
幅300px、左右paddingが20px、左右borderが2pxの要素があります。初期状態のcontent-boxでは、画面上で占める横幅はいくつでしょうか。さらに、全体を300pxへ収めるCSSも書いてください。
ヒント：content-boxでは、指定したwidthへpaddingとborderが外側に加算されます。
問題6の解答例を見る
300 + 20 + 20 + 2 + 2 = 344pxです。box-sizing: border-boxを指定すると、paddingとborderを含めて300pxになります。
*,
*::before,
*::after {
box-sizing: border-box;
}
.box {
width: 300px;
padding-inline: 20px;
border: 2px solid #334155;
}問題7：幅が縮むカードを中央に置く
カードの最大幅を480pxにし、狭い画面では親要素からはみ出さず、左右中央へ配置してください。カードの外側には16px以上の余白を残します。
ヒント：widthへmin()を使い、左右のmarginをautoにします。
問題7の解答例を見る
.card {
width: min(calc(100% - 2rem), 30rem);
margin-inline: auto;
}問題8：3つの項目をFlexboxで横並びにする
feature-listの子要素3つを横並びにし、間隔を24px空けてください。狭い画面では折り返せるようにします。
ヒント：親要素へdisplay: flex、gap、flex-wrapを指定します。
問題8の解答例を見る
.feature-list {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.feature-list > * {
flex: 1 1 14rem;
}アクセシビリティとレスポンシブの練習問題
問題9：リンクへhoverとfocusを設定する
ボタン風リンクへ、マウスを重ねた状態とキーボードでフォーカスした状態を追加してください。フォーカス表示は背景色だけでなく輪郭でも分かるようにします。
問題9の解答例を見る
.button-link:hover {
background-color: #9f2f20;
}
.button-link:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}問題10：画像をカード枠へ収める
縦横比が異なる3枚の画像を、カード内で同じ3:2の枠へ表示してください。画像は引き伸ばさず、枠を埋めるためにはみ出す部分を切り抜きます。
ヒント：aspect-ratioとobject-fitを使います。
問題10の解答例を見る
.article-card__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}問題11：フォームのラベルを正しく関連付ける
名前を入力するテキスト欄を作ってください。表示されるラベルと入力欄を関連付け、必須項目であることもHTMLで示します。
ヒント：labelのforとinputのidを同じ値にします。placeholderだけをラベルの代わりにしません。
問題11の解答例を見る
<div class="form-field">
<label for="name">お名前<span aria-hidden="true">（必須）</span></label>
<input id="name" name="name" type="text" autocomplete="name" required>
</div>最終問題：レスポンシブな記事カード一覧を作る
3件の記事カードを持つ一覧を作ってください。各カードには画像、h2見出し、説明、詳細ページへのリンクを置きます。パソコンでは3列、幅767px以下では1列に切り替えます。
- カード全体は
article要素にする - 画像へ内容に合った
altを設定する - Gridで3列にする
- 画像の比率を3:2に揃える
- リンクへhoverとfocus-visibleを設定する
- 狭い画面で横スクロールが出ないようにする
ヒント：grid-template-columns: repeat(3, 1fr)で3列を作れます。メディアクエリの中で1列へ変更してください。
最終問題のHTML解答例を見る
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>記事一覧</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="article-list">
<h1>おすすめの記事</h1>
<div class="article-grid">
<article class="article-card">
<img class="article-card__image" src="images/lab.jpg" alt="青い液体が入った実験器具" width="1200" height="800">
<div class="article-card__body">
<h2>身近な科学を観察する</h2>
<p>毎日の生活で見つけられる科学の仕組みを紹介します。</p>
<a class="article-card__link" href="science.html">詳しく見る</a>
</div>
</article>
<article class="article-card">
<img class="article-card__image" src="images/dna.jpg" alt="紫色で表したDNAの二重らせん" width="1200" height="800">
<div class="article-card__body">
<h2>遺伝子の基本を知る</h2>
<p>DNAが情報を伝える仕組みを初心者向けに説明します。</p>
<a class="article-card__link" href="dna.html">詳しく見る</a>
</div>
</article>
<article class="article-card">
<img class="article-card__image" src="images/microscope.jpg" alt="試料台をのぞく顕微鏡" width="1200" height="800">
<div class="article-card__body">
<h2>顕微鏡の使い方</h2>
<p>観察を始める前に知っておきたい手順をまとめます。</p>
<a class="article-card__link" href="microscope.html">詳しく見る</a>
</div>
</article>
</div>
</main>
</body>
</html>最終問題のCSS解答例を見る
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #172033;
background: #f4f7fb;
font-family: system-ui, sans-serif;
line-height: 1.7;
}
.article-list {
width: min(calc(100% - 2rem), 72rem);
margin-inline: auto;
padding-block: 3rem;
}
.article-list > h1 {
margin: 0 0 2rem;
font-size: clamp(2rem, 6vw, 3rem);
line-height: 1.3;
}
.article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.article-card {
overflow: hidden;
background: #ffffff;
border: 1px solid #d8e0ee;
border-radius: 1rem;
box-shadow: 0 0.75rem 2rem rgb(31 46 76 / 10%);
}
.article-card__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.article-card__body {
padding: 1.25rem;
}
.article-card h2 {
margin: 0 0 0.75rem;
font-size: 1.375rem;
line-height: 1.4;
}
.article-card p {
margin: 0 0 1.25rem;
}
.article-card__link {
display: inline-block;
padding: 0.75rem 1rem;
color: #ffffff;
background: #b43b28;
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
}
.article-card__link:hover {
background: #8f2f20;
}
.article-card__link:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
@media (max-width: 47.9375rem) {
.article-grid {
grid-template-columns: 1fr;
}
}解答後の確認チェックリスト
- HTMLの開始タグと終了タグが対応している
- 同じ
idを重複させていない - 画像のパスとファイル名の大文字・小文字が一致している
- 内容を伝える画像に適切な
altがある - 見出しの順序が不自然に飛んでいない
- リンクとフォームをTabキーで操作できる
- フォーカス位置を画面上で確認できる
- 320px程度の幅でも横スクロールが出ない
- 文字色と背景色のコントラストが十分にある
- 開発者ツールにHTML・CSSの警告が出ていない
解答例をそのまま入力できたら、カード数を4件へ増やし、広い画面だけ2列または4列に変えてみましょう。既存のコードを変更する練習を加えると、暗記ではなく応用できる知識になります。
次に取り組む練習
12問を終えたら、完成見本のある1ページを模写し、その次は文章と画像を自分で決めたページを作ります。基礎問題、模写、自作の順に進むと、知識を使う範囲を段階的に広げられます。
練習サイト、30日ロードマップ、模写の進め方は次の記事で詳しくまとめています。
実務に近いページを手順どおり作りたい場合は、当サイトの無料コーディング教材も利用できます。
練習問題は答えを変えてもう一度解こう
HTML・CSSの練習問題は、正解コードを1回表示できただけで終わりではありません。見本を閉じて作り直し、文章、画像、色、カード数、画面幅を変えても修正できるか確認してください。
全部を一度に解く必要はありません。今日はHTMLの4問、次はCSSの4問という進め方で大丈夫です。小さな問題を自力で完成させた回数が、白紙からWebページを作る力につながります。