HTML/CSSの基礎を身につけるには、実際に手を動かして書くのが一番の近道です。この記事では、初心者〜中級者向けにHTML/CSSの練習問題を20問収録しました。
各問題には「お題」「ヒント」「解答例」を掲載しています。まずは自力で考え、詰まったらヒントを見て、最後に解答例と照らし合わせる流れで進めてください。
練習環境：ブラウザでCodePenを開けばすぐに始められます。ローカル環境で試したい場合はVSCodeでHTMLファイルを作成してブラウザで開いてください。
初級編：HTMLの基本（1〜7問）
問題1：自己紹介ページを作ろう
お題：名前・年齢・趣味を含む自己紹介ページを作成してください。見出し（h1）、段落（p）、箇条書きリスト（ul）を使いましょう。
ヒント：HTML文書の基本構造は <!DOCTYPE html>、<html>、<head>、<body> で構成されます。
解答例を見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己紹介</title>
</head>
<body>
<h1>山田太郎の自己紹介</h1>
<p>25歳のWeb制作を学んでいる初心者です。</p>
<h2>趣味</h2>
<ul>
<li>プログラミング</li>
<li>映画鑑賞</li>
<li>ランニング</li>
</ul>
</body>
</html>問題2：リンクと画像を配置しよう
お題：好きなWebサイトへのリンクと、画像を1枚表示するページを作成してください。リンクは新しいタブで開くようにしましょう。
ヒント：<a> タグの target="_blank" で新規タブ、<img> タグの alt 属性は必須です。
解答例を見る
<h1>お気に入りサイト</h1>
<p>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
MDN Web Docs
</a>
</p>
<img src="https://picsum.photos/400/300" alt="サンプル画像" width="400" height="300">問題3：テーブルを作成しよう
お題：3人分の「名前・年齢・職業」を表示するテーブルを作成してください。見出しセル（th）とデータセル（td）を使い分けましょう。
ヒント：<thead> と <tbody> でテーブルの構造を明確にしましょう。
解答例を見る
<table border="1">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>職業</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田太郎</td>
<td>25</td>
<td>エンジニア</td>
</tr>
<tr>
<td>佐藤花子</td>
<td>30</td>
<td>デザイナー</td>
</tr>
<tr>
<td>鈴木一郎</td>
<td>28</td>
<td>ディレクター</td>
</tr>
</tbody>
</table>問題4：お問い合わせフォームを作ろう
お題：名前（テキスト入力）、メールアドレス、問い合わせ種別（セレクトボックス）、メッセージ（テキストエリア）、送信ボタンを含むフォームを作成してください。
ヒント：<label> と <input> を for/id で紐付けるとアクセシビリティが向上します。
解答例を見る
<form>
<div>
<label for="name">名前</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="category">問い合わせ種別</label>
<select id="category" name="category">
<option value="">選択してください</option>
<option value="general">一般的な質問</option>
<option value="bug">不具合の報告</option>
<option value="other">その他</option>
</select>
</div>
<div>
<label for="message">メッセージ</label>
<textarea id="message" name="message" rows="5"></textarea>
</div>
<button type="submit">送信</button>
</form>問題5：セマンティックHTMLでページ構造を作ろう
お題：header・nav・main・article・aside・footerタグを使って、ブログ記事ページの骨格を作成してください。中身はダミーテキストで構いません。
ヒント：セマンティックHTMLはSEOとアクセシビリティの両方に貢献します。<div> の代わりに意味のあるタグを使いましょう。
解答例を見る
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">記事一覧</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<p>記事の本文がここに入ります。</p>
</article>
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 My Blog</p>
</footer>問題6：ネストされたリストを作ろう
お題：「フロントエンド」「バックエンド」「ツール」の3カテゴリーに分けた技術スタックリストを作成してください。親リストは順序なし、子リストは順序付きにしましょう。
ヒント：<li> の中に <ol> や <ul> をネストできます。
解答例を見る
<h2>技術スタック</h2>
<ul>
<li>フロントエンド
<ol>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>React</li>
</ol>
</li>
<li>バックエンド
<ol>
<li>PHP</li>
<li>Node.js</li>
<li>Python</li>
</ol>
</li>
<li>ツール
<ol>
<li>VSCode</li>
<li>Git</li>
<li>Docker</li>
</ol>
</li>
</ul>問題7：動画を埋め込もう
お題：HTMLの <video> タグでローカル動画を再生できるプレーヤーと、<iframe> でYouTube動画を埋め込んでください。動画は自動再生しない設定にしましょう。
ヒント：<video> には controls 属性を付け、<iframe> には loading="lazy" を追加するとパフォーマンスが向上します。
解答例を見る
<h2>動画プレーヤー</h2>
<video controls width="640" height="360">
<source src="sample.mp4" type="video/mp4">
お使いのブラウザは動画再生に対応していません。
</video>
<h2>YouTube埋め込み</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube動画"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope"
allowfullscreen
loading="lazy">
</iframe>中級編：CSSレイアウト（8〜14問）
問題8：ボックスモデルを理解しよう
お題：幅300px・高さ200pxのボックスを3つ横に並べてください。各ボックスにpadding 20px、border 2px、margin 16pxを設定し、box-sizing: border-box を使いましょう。
ヒント：border-box を指定すると、paddingとborderが幅に含まれるため計算が簡単になります。横並びは次の問題で学ぶFlexboxを先取りしても構いません。
解答例を見る
<style>
.box-container {
display: flex;
}
.box {
box-sizing: border-box;
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid #333;
margin: 16px;
background: #e8f1fe;
}
</style>
<div class="box-container">
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
<div class="box">ボックス3</div>
</div>問題9：Flexboxで横並びメニューを作ろう
お題：ロゴを左端、ナビゲーションリンク4つを右端に配置したヘッダーメニューを作成してください。
ヒント：display: flex と justify-content: space-between を組み合わせます。
解答例を見る
<style>
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: #333;
color: #fff;
}
.header-logo {
font-size: 24px;
font-weight: bold;
}
.header-nav {
display: flex;
list-style: none;
gap: 24px;
margin: 0;
padding: 0;
}
.header-nav a {
color: #fff;
text-decoration: none;
}
.header-nav a:hover {
text-decoration: underline;
}
</style>
<header class="header">
<div class="header-logo">MySite</div>
<ul class="header-nav">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</header>問題10：Flexboxでカードレイアウトを作ろう
お題：3枚のカード（画像・タイトル・説明文）を横並びにし、画面幅が狭くなったら折り返すレイアウトを作成してください。
ヒント：flex-wrap: wrap で折り返しを有効にし、各カードに flex: 1 1 300px を指定すると柔軟なレイアウトになります。
解答例を見る
<style>
.cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 24px;
}
.card {
flex: 1 1 300px;
border: 1px solid #e6e6e6;
border-radius: 12px;
overflow: hidden;
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
padding: 16px;
}
.card-body h3 {
margin: 0 0 8px;
}
</style>
<div class="cards">
<div class="card">
<img src="https://picsum.photos/400/200?1" alt="カード画像1">
<div class="card-body">
<h3>カードタイトル1</h3>
<p>カードの説明文が入ります。</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/400/200?2" alt="カード画像2">
<div class="card-body">
<h3>カードタイトル2</h3>
<p>カードの説明文が入ります。</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/400/200?3" alt="カード画像3">
<div class="card-body">
<h3>カードタイトル3</h3>
<p>カードの説明文が入ります。</p>
</div>
</div>
</div>問題11：CSS Gridで2カラムレイアウトを作ろう
お題：メインコンテンツ（幅2/3）とサイドバー（幅1/3）の2カラムレイアウトを CSS Grid で作成してください。
ヒント：grid-template-columns: 2fr 1fr で比率指定できます。グリッドの視覚的なレイアウト設計にはCSS Gridジェネレーターも活用できます。
解答例を見る
<style>
.layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
padding: 24px;
}
.main-content {
background: #f8f8fb;
padding: 24px;
border-radius: 12px;
}
.sidebar {
background: #e8f1fe;
padding: 24px;
border-radius: 12px;
}
</style>
<div class="layout">
<main class="main-content">
<h2>メインコンテンツ</h2>
<p>記事本文がここに入ります。</p>
</main>
<aside class="sidebar">
<h3>サイドバー</h3>
<p>関連リンクやウィジェットを配置します。</p>
</aside>
</div>問題12：レスポンシブ対応しよう
お題：問題11の2カラムレイアウトを、画面幅768px以下で1カラムに切り替わるようにしてください。
ヒント：@media (max-width: 768px) でブレークポイントを設定します。
解答例を見る
.layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
padding: 24px;
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}問題13：擬似要素とホバー効果を実装しよう
お題：ボタンにホバー時の色変化と、::after 擬似要素で右矢印（→）を追加してください。ホバー時に矢印が右に移動するアニメーションも付けましょう。
ヒント：transition プロパティと transform: translateX() を組み合わせます。
解答例を見る
<style>
.btn {
display: inline-block;
padding: 12px 24px;
background: #3460fb;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.btn::after {
content: " →";
display: inline-block;
transition: transform 0.3s;
}
.btn:hover {
background: #0017c1;
}
.btn:hover::after {
transform: translateX(4px);
}
</style>
<button class="btn">詳しく見る</button>問題14：CSSセレクタを活用しよう
お題：テーブルの奇数行と偶数行で背景色を変え、最初の行だけ太字にしてください。また、required 属性が付いた入力欄の枠線を赤くしてください。
ヒント：:nth-child(odd)、:first-child、[required] の3つのセレクタを使い分けます。
解答例を見る
<style>
table { border-collapse: collapse; width: 100%; }
th, td { padding: 12px 16px; border: 1px solid #e6e6e6; text-align: left; }
tbody tr:nth-child(odd) { background: #f8f8fb; }
tbody tr:nth-child(even) { background: #fff; }
tbody tr:first-child { font-weight: bold; }
input[required] { border: 2px solid #e53935; }
</style>
<table>
<thead>
<tr><th>名前</th><th>スコア</th></tr>
</thead>
<tbody>
<tr><td>山田</td><td>95</td></tr>
<tr><td>佐藤</td><td>88</td></tr>
<tr><td>鈴木</td><td>92</td></tr>
<tr><td>田中</td><td>78</td></tr>
</tbody>
</table>
<form style="margin-top: 24px;">
<input type="text" placeholder="必須項目" required>
<input type="text" placeholder="任意項目">
</form>上級編：実践的なUI（15〜20問）
問題15：固定ヘッダーを作ろう
お題：スクロールしても画面上部に固定されるヘッダーを作成してください。背景に半透明のブラー効果を付けましょう。
ヒント：position: sticky と backdrop-filter: blur() を使います。
解答例を見る
<style>
.sticky-header {
position: sticky;
top: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border-bottom: 1px solid #e6e6e6;
}
.sticky-header h1 { font-size: 20px; margin: 0; }
.sticky-header nav a {
margin-left: 24px;
text-decoration: none;
color: #333;
}
</style>
<header class="sticky-header">
<h1>MySite</h1>
<nav>
<a href="#">ホーム</a>
<a href="#">記事</a>
<a href="#">お問い合わせ</a>
</nav>
</header>問題16：ヒーローセクションを作ろう
お題：画面全幅の背景画像にオーバーレイを重ね、中央にキャッチコピーとCTAボタンを配置するヒーローセクションを作成してください。
ヒント：背景画像の上に半透明のオーバーレイを重ねるには、::before 擬似要素か linear-gradient を使います。
解答例を見る
<style>
.hero {
position: relative;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("https://picsum.photos/1200/600") center / cover no-repeat;
}
.hero-content h2 {
font-size: 40px;
margin-bottom: 16px;
}
.hero-content p {
font-size: 18px;
margin-bottom: 32px;
}
.hero-btn {
display: inline-block;
padding: 16px 32px;
background: #3460fb;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-size: 18px;
transition: background 0.3s;
}
.hero-btn:hover { background: #0017c1; }
</style>
<section class="hero">
<div class="hero-content">
<h2>Webサイトを、もっと速く。</h2>
<p>パフォーマンスに特化したWeb制作を提供します。</p>
<a href="#" class="hero-btn">お問い合わせ</a>
</div>
</section>問題17：プロフィールカードを作ろう
お題：丸いアバター画像・名前・肩書き・SNSリンクアイコンを含むプロフィールカードを作成してください。カードに影を付けましょう。
ヒント：画像を丸くするには border-radius: 50%、影は box-shadow を使います。
解答例を見る
<style>
.profile-card {
max-width: 320px;
text-align: center;
padding: 32px 24px;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.profile-card .avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 16px;
}
.profile-card h3 { margin: 0 0 4px; }
.profile-card .title {
color: #626264;
margin: 0 0 16px;
}
.profile-card .links {
display: flex;
justify-content: center;
gap: 16px;
}
.profile-card .links a {
display: inline-block;
padding: 8px 16px;
background: #f1f1f4;
border-radius: 8px;
text-decoration: none;
color: #333;
transition: background 0.3s;
}
.profile-card .links a:hover { background: #e6e6e6; }
</style>
<div class="profile-card">
<img class="avatar" src="https://picsum.photos/100/100" alt="アバター">
<h3>山田太郎</h3>
<p class="title">フロントエンドエンジニア</p>
<div class="links">
<a href="#">X</a>
<a href="#">GitHub</a>
<a href="#">Portfolio</a>
</div>
</div>問題18：料金テーブルを作ろう
お題：3つのプラン（Free・Standard・Premium）の料金テーブルを作成してください。おすすめプランをハイライトし、各プランに機能リストとCTAボタンを含めましょう。
ヒント：CSS Gridで3カラムに並べ、おすすめプランには transform: scale(1.05) で少し拡大するとメリハリが出ます。
解答例を見る
<style>
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 24px;
align-items: start;
}
.plan {
border: 1px solid #e6e6e6;
border-radius: 12px;
padding: 32px 24px;
text-align: center;
transition: transform 0.3s;
}
.plan.featured {
border-color: #3460fb;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(52, 96, 251, 0.2);
}
.plan h3 { margin: 0 0 8px; }
.plan .price {
font-size: 36px;
font-weight: bold;
margin: 16px 0;
}
.plan .price span { font-size: 16px; }
.plan ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
text-align: left;
}
.plan ul li {
padding: 8px 0;
border-bottom: 1px solid #f1f1f4;
}
.plan ul li::before { content: "✓ "; color: #00a63e; }
.plan-btn {
display: block;
padding: 12px;
background: #3460fb;
color: #fff;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s;
}
.plan-btn:hover { background: #0017c1; }
@media (max-width: 768px) {
.pricing { grid-template-columns: 1fr; }
.plan.featured { transform: none; }
}
</style>
<div class="pricing">
<div class="plan">
<h3>Free</h3>
<div class="price">¥0<span>/月</span></div>
<ul>
<li>基本機能</li>
<li>1プロジェクト</li>
<li>コミュニティサポート</li>
</ul>
<a href="#" class="plan-btn">始める</a>
</div>
<div class="plan featured">
<h3>Standard</h3>
<div class="price">¥980<span>/月</span></div>
<ul>
<li>全機能</li>
<li>10プロジェクト</li>
<li>優先サポート</li>
</ul>
<a href="#" class="plan-btn">おすすめ</a>
</div>
<div class="plan">
<h3>Premium</h3>
<div class="price">¥2,980<span>/月</span></div>
<ul>
<li>全機能 + API</li>
<li>無制限プロジェクト</li>
<li>専任サポート</li>
</ul>
<a href="#" class="plan-btn">始める</a>
</div>
</div>問題19：フッターレイアウトを作ろう
お題：4カラム構成（会社情報・サービス・サポート・SNSリンク）のフッターを作成してください。モバイルでは1カラムに切り替わるようにしましょう。
ヒント：CSS Gridの repeat(4, 1fr) で4カラム、メディアクエリで repeat(2, 1fr) → 1fr と段階的に切り替えます。
解答例を見る
<style>
.site-footer {
background: #333;
color: #fff;
padding: 48px 24px 24px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
max-width: 1200px;
margin: 0 auto;
}
.footer-grid h4 {
margin: 0 0 16px;
font-size: 18px;
}
.footer-grid ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-grid li { margin-bottom: 8px; }
.footer-grid a {
color: #ccc;
text-decoration: none;
}
.footer-grid a:hover { color: #fff; }
.footer-bottom {
text-align: center;
margin-top: 32px;
padding-top: 16px;
border-top: 1px solid #555;
color: #949494;
}
@media (max-width: 768px) {
.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
</style>
<footer class="site-footer">
<div class="footer-grid">
<div>
<h4>会社情報</h4>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">プレスリリース</a></li>
</ul>
</div>
<div>
<h4>サービス</h4>
<ul>
<li><a href="#">Web制作</a></li>
<li><a href="#">コンサルティング</a></li>
<li><a href="#">保守運用</a></li>
</ul>
</div>
<div>
<h4>サポート</h4>
<ul>
<li><a href="#">よくある質問</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">利用規約</a></li>
</ul>
</div>
<div>
<h4>フォロー</h4>
<ul>
<li><a href="#">X (Twitter)</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 MySite. All rights reserved.</p>
</div>
</footer>問題20：レスポンシブLPを作ろう（総合問題）
お題：ここまで学んだ要素を組み合わせて、以下のセクションを持つLPを1ページで作成してください。
- 固定ヘッダー（ロゴ + ナビ）
- ヒーローセクション（背景画像 + CTA）
- 特徴セクション（3カラムカード）
- 料金テーブル
- お問い合わせフォーム
- フッター
ヒント：問題9（ヘッダー）、問題16（ヒーロー）、問題10（カード）、問題18（料金）、問題4（フォーム）、問題19（フッター）を組み合わせましょう。すべてのセクションが768px以下で適切に1カラムに切り替わるようにしてください。
解答例を見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample LP</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; color: #333; line-height: 1.6; }
/* ヘッダー */
.header {
position: sticky; top: 0; z-index: 100;
display: flex; justify-content: space-between; align-items: center;
padding: 16px 24px;
background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
border-bottom: 1px solid #e6e6e6;
}
.header nav a { margin-left: 24px; text-decoration: none; color: #333; }
/* ヒーロー */
.hero {
min-height: 480px; display: flex; align-items: center; justify-content: center;
text-align: center; color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("https://picsum.photos/1200/600") center / cover;
}
.hero h2 { font-size: 36px; margin-bottom: 16px; }
.hero p { font-size: 18px; margin-bottom: 24px; }
/* 共通ボタン */
.btn {
display: inline-block; padding: 14px 28px;
background: #3460fb; color: #fff; text-decoration: none;
border: none; border-radius: 8px; font-size: 16px; cursor: pointer;
}
.btn:hover { background: #0017c1; }
/* セクション共通 */
section { padding: 64px 24px; }
section h2 { text-align: center; margin-bottom: 40px; font-size: 28px; }
/* 特徴カード */
.features { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.feature-card {
flex: 1 1 280px; max-width: 360px;
padding: 24px; border: 1px solid #e6e6e6; border-radius: 12px; text-align: center;
}
.feature-card h3 { margin-bottom: 8px; }
/* フォーム */
.contact-form { max-width: 600px; margin: 0 auto; }
.contact-form label { display: block; margin-bottom: 4px; font-weight: bold; }
.contact-form input,
.contact-form textarea {
width: 100%; padding: 12px; margin-bottom: 16px;
border: 1px solid #e6e6e6; border-radius: 8px; font-size: 16px;
}
/* フッター */
.site-footer { background: #333; color: #fff; padding: 32px 24px; text-align: center; }
@media (max-width: 768px) {
.header { flex-direction: column; gap: 8px; }
.hero h2 { font-size: 24px; }
}
</style>
</head>
<body>
<header class="header">
<strong>MySite</strong>
<nav>
<a href="#features">特徴</a>
<a href="#pricing">料金</a>
<a href="#contact">お問い合わせ</a>
</nav>
</header>
<section class="hero">
<div>
<h2>あなたのWebサイトを次のレベルへ</h2>
<p>高速・高品質なWeb制作を提供します</p>
<a href="#contact" class="btn">無料で相談する</a>
</div>
</section>
<section id="features">
<h2>サービスの特徴</h2>
<div class="features">
<div class="feature-card">
<h3>高速表示</h3>
<p>Core Web Vitalsを最適化し、ユーザー体験を向上させます。</p>
</div>
<div class="feature-card">
<h3>レスポンシブ</h3>
<p>あらゆるデバイスで美しく表示されるデザインを提供します。</p>
</div>
<div class="feature-card">
<h3>SEO対策</h3>
<p>構造化データと内部施策で検索順位の向上をサポートします。</p>
</div>
</div>
</section>
<section id="contact" style="background: #f8f8fb;">
<h2>お問い合わせ</h2>
<form class="contact-form">
<label for="name">名前</label>
<input type="text" id="name" required>
<label for="email">メールアドレス</label>
<input type="email" id="email" required>
<label for="message">メッセージ</label>
<textarea id="message" rows="5"></textarea>
<button type="submit" class="btn">送信</button>
</form>
</section>
<footer class="site-footer">
<p>© 2026 MySite. All rights reserved.</p>
</footer>
</body>
</html>よくある質問
Q. HTML/CSSの練習問題は初心者にどれくらい効果がありますか？
実際にコードを書いて試行錯誤することで、座学だけでは得られない実践力が身につきます。初級編を一通り解くだけでも、基本的なWebページを自力で作れるレベルに到達できます。
Q. 1日どのくらい練習すればいいですか？
1日1〜2問、30分〜1時間を目安に取り組むのがおすすめです。毎日少しずつ続けることで、2〜3週間で全20問を完了できます。
Q. 解答例と違うコードでも正解ですか？
はい、同じ表示結果が得られるなら別の書き方でも正解です。HTML/CSSは同じ見た目を実現する方法が複数あります。解答例はあくまで一例として参考にしてください。
Q. この練習問題を終えたら次は何を学べばいいですか？
JavaScriptの基礎に進むのがおすすめです。HTML/CSSで見た目を作れるようになったら、JavaScriptでインタラクションを追加できるようになります。
Q. 練習環境は何を使えばいいですか？
ブラウザだけで始めるならCodePenが手軽です。ローカル環境で練習したい場合はVSCodeでHTMLファイルを作成し、ブラウザで開くだけでOKです。
まとめと次のステップ
HTML/CSSの練習問題20選を紹介しました。初級編でHTMLの基本構造を理解し、中級編でCSSレイアウトの組み方を学び、上級編で実践的なUIを組み立てる力が身についたはずです。
次のステップとして、以下の記事もぜひ活用してください。
