プログラミング 📅 2026年5月11日 🔄 更新: 2026-05-11 ⏱ 17分で読めます

中間テスト前にHTML・CSSを総復習！情報Ⅰの実技問題対策

情報Ⅰの中間テストで出るHTML・CSSの実技問題を総復習。穴埋め・コード修正・出力予測のパターン別対策と練習問題つきで得点力アップ。

2026年5月11日

情報Ⅰの中間テスト、HTML・CSSの実技問題が不安な人へ

情報Ⅰの中間テストで、HTML・CSSの実技問題が出ると聞いて焦っていませんか？

「タグの名前が覚えられない」「CSSのセレクタがよくわからない」という人も大丈夫です。この記事を読めば、テストに出やすいポイントを効率よく復習できます。

中間テストのHTML・CSS問題には、よく出るパターンがあります。穴埋め、コード修正、出力予測の3パターンです。パターンを知っておけば、本番で慌てません。

この記事では、HTML・CSSの基礎を総復習したあと、パターン別の対策と練習問題を用意しました。テスト前の最終チェックに使ってください。

HTMLの基本やCSSの基本をまだ読んでいない人は、先にそちらを読むとスムーズです。

HTML基礎の総復習

HTMLの基本構造

HTML（エイチティーエムエル）は、Webページの構造を作る言語です。テストでは「基本構造を書きなさい」という問題がよく出ます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここに表示する内容を書く -->
</body>
</html>

覚えるポイント：

  • <!DOCTYPE html> — HTML5であることを宣言する
  • <html lang="ja"> — 日本語のページであることを示す
  • <head> — ページの設定情報を入れる場所
  • <body> — 画面に表示する内容を入れる場所
  • <meta charset="UTF-8"> — 文字化けを防ぐ設定

タグの基本ルール

HTMLはタグで内容を囲みます。

  • 開始タグ：<p>
  • 終了タグ：</p>（スラッシュがつく）
  • 空要素：<br>、<img>（終了タグなし）

テストでは「終了タグを書き忘れている」問題がよく出ます。</p>のスラッシュを忘れないようにしましょう。

テストに出やすいタグ一覧

タグ意味使い方
<h1>〜<h6>見出し<h1>大見出し</h1>
<p>段落<p>文章</p>
<a>リンク<a href="URL">テキスト</a>
<img>画像<img src="画像.png" alt="説明">
<ul> / <ol>リスト<ul><li>項目</li></ul>
<table>表<table><tr><td>内容</td></tr></table>
<div>ブロックのまとまりレイアウト用
<span>インラインのまとまり一部分の装飾用

HTMLタグ一覧で、さらに多くのタグを確認できます。

属性（ぞくせい）の書き方

タグには属性をつけて、追加情報を指定できます。

<a href="https://example.com" target="_blank">リンク</a>
<img src="photo.jpg" alt="写真の説明" width="300">
属性使うタグ意味
href<a>リンク先のURL
src<img>画像ファイルのパス
alt<img>画像の代替テキスト
idすべて要素に固有の名前をつける
classすべて要素にグループ名をつける

属性は開始タグの中に書きます。終了タグには書きません。

セマンティックHTML

セマンティック（意味のある）HTMLとは、内容の役割に合ったタグを使うことです。

<header>ヘッダー（ページ上部）</header>
<nav>ナビゲーション（メニュー）</nav>
<main>メインコンテンツ</main>
<article>記事</article>
<section>セクション（区切り）</section>
<footer>フッター（ページ下部）</footer>

テストでは「適切なタグを選びなさい」という問題で出ます。<div>ではなく、意味のあるタグを使うのが正解です。

セマンティックHTMLの解説で詳しく学べます。

CSS基礎の総復習

CSSとは

CSS（シーエスエス）は、HTMLの見た目を整える言語です。HTMLが「骨格」なら、CSSは「服やメイク」です。

CSSの書き方（3つの方法）

<!-- 1. 外部ファイル（推奨） -->
<link rel="stylesheet" href="style.css">

<!-- 2. <style>タグ（head内に書く） -->
<style>
  p { color: red; }
</style>

<!-- 3. インラインスタイル（タグに直接書く） -->
<p style="color: red;">赤い文字</p>

テストでは「どの方法で書かれているか」を問う問題が出ます。3つの違いを覚えておきましょう。

CSSの基本構文

h1 {
  color: blue;
  font-size: 24px;
}

▶ プレビュー

  • セレクタ — どの要素に適用するか
  • プロパティ — 何を変えるか
  • 値 — どう変えるか

テストに出やすいセレクタ

セレクタ書き方意味
要素セレクタpすべての<p>に適用
クラスセレクタ.redclass="red"の要素に適用
IDセレクタ#headerid="header"の要素に適用
子孫セレクタdiv p<div>の中の<p>に適用
グループセレクタh1, h2両方に適用

重要：クラスは「.（ドット）」、IDは「#（シャープ）」で始まります。テストでよく間違えるポイントです。

CSSセレクタの詳しい解説も確認しておきましょう。

テストに出やすいプロパティ

プロパティ意味値の例
color文字色red, #ff0000
background-color背景色blue, #0000ff
font-size文字サイズ16px, 1.5em
margin外側の余白10px, 0 auto
padding内側の余白10px
border枠線1px solid black
display表示方法block, none

CSSの優先順位（詳細度）

同じ要素に複数のスタイルが当たったとき、どれが優先されるかのルールです。

  1. !important（最優先）
  2. インラインスタイル（style=""）
  3. IDセレクタ（#id）
  4. クラスセレクタ（.class）
  5. 要素セレクタ（p, h1など）
p { color: blue; }
.text { color: green; }
#main { color: red; }
<p class="text" id="main">この文字は何色？</p>

答え：赤（red）。IDセレクタが最も優先度が高いからです。

実技問題パターン別対策

パターン1: 穴埋め問題

コードの一部が空欄になっていて、正しいタグや属性を書く問題です。

例題：

<【①】 href="page2.html">次のページへ</【②】>

①と②に入るものを答えなさい。

解き方のコツ：

  • href属性を使うのは<a>タグ
  • 開始タグと終了タグは同じタグ名

答え： ① a ② a

パターン2: コード修正問題

間違いのあるコードを見つけて直す問題です。

例題：次のHTMLの間違いを2つ見つけて修正しなさい。

<h1>私のページ<h1>
<p>こんにちは。<br/>
<img src="photo.jpg">
<a href="link.html">リンク<a>

解き方のコツ：

  • 終了タグにスラッシュ / があるか確認する
  • タグの対応（開始と終了）が正しいか確認する

答え：

  • 1行目：<h1>私のページ<h1> → <h1>私のページ</h1>（終了タグに/がない）
  • 4行目：<a href="link.html">リンク<a> → <a href="link.html">リンク</a>（終了タグに/がない）

パターン3: 出力予測問題

コードを見て「画面にどう表示されるか」を答える問題です。

例題：次のHTML・CSSが表示されたとき、「こんにちは」の見た目を答えなさい。

<p class="greeting" id="msg">こんにちは</p>
p { color: blue; font-size: 14px; }
.greeting { color: green; font-size: 20px; }
#msg { font-size: 24px; }

解き方のコツ：

  • color：p(blue) vs .greeting(green) → クラスが優先 → green
  • font-size：p(14px) vs .greeting(20px) vs #msg(24px) → IDが優先 → 24px

答え：文字色は緑（green）、文字サイズは24px

よくある間違い・ひっかけポイント

1. 終了タグの書き忘れ

<!-- NG -->
<p>テスト<p>

<!-- OK -->
<p>テスト</p>

終了タグには必ず / をつけます。

2. クラスとIDの記号を逆にする

/* NG: クラスに#を使っている */
#red { color: red; }

/* OK: クラスは.（ドット） */
.red { color: red; }

クラス → .（ドット）、ID → #（シャープ）。HTMLではclass="red"、CSSでは.redです。

3. imgタグのalt属性を忘れる

<!-- NG -->
<img src="photo.jpg">

<!-- OK -->
<img src="photo.jpg" alt="校舎の写真">

alt属性は画像が表示できないときの代替テキストです。テストでは「アクセシビリティの観点から必要」と出題されます。

4. CSSのセミコロン忘れ

/* NG: セミコロンがない */
h1 {
  color: red
  font-size: 20px
}

/* OK */
h1 {
  color: red;
  font-size: 20px;
}

プロパティの値のあとには必ず ;（セミコロン）をつけます。忘れると、次の行以降のスタイルが効かなくなります。

5. 入れ子（ネスト）の間違い

<!-- NG: タグの入れ子が交差している -->
<p><strong>太字の文章</p></strong>

<!-- OK: 正しい入れ子 -->
<p><strong>太字の文章</strong></p>

タグは「先に開いたものを後に閉じる」のがルールです。

6. リスト構造の間違い

<!-- NG: <li>が<ul>の外にある -->
<li>項目1</li>
<li>項目2</li>

<!-- OK -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

<li>は必ず<ul>か<ol>の中に入れます。

練習問題

問題1: 穴埋め

次のHTMLの空欄を埋めなさい。表示結果は番号つきリスト（1. りんご 2. みかん 3. ぶどう）になる。

<【①】>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</【②】>

問題2: コード修正

次のHTMLには間違いが3つあります。見つけて修正しなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テストページ<title>
</head>
<body>
  <h1>見出し</h1>
  <p class=text>本文です。</p>
  <img src="image.png">
</body>
</html>

問題3: CSS適用結果

次のHTML・CSSが表示されたとき、各要素の見た目を答えなさい。

<h1 class="title">タイトル</h1>
<p class="intro">紹介文</p>
<p>普通の段落</p>
h1 { color: black; }
.title { color: navy; font-size: 32px; }
p { color: gray; font-size: 14px; }
.intro { font-size: 18px; }
  1. 「タイトル」の文字色と文字サイズは？
  2. 「紹介文」の文字色と文字サイズは？
  3. 「普通の段落」の文字色と文字サイズは？

問題4: 表の作成

「教科 | 点数」「数学 | 85」「英語 | 72」の表をHTMLで作りなさい。

問題5: セレクタの指定

class="red"がついた段落だけを赤色にするCSSを書きなさい。

練習問題の解答

問題1の解答

① ol ② ol

番号つきリストは<ol>（ordered list）を使います。番号なしリストは<ul>（unordered list）です。

問題2の解答

  • 間違い1：5行目 <title>テストページ<title> → <title>テストページ</title>（終了タグに/がない）
  • 間違い2：9行目 <p class=text> → <p class="text">（属性値はダブルクォーテーションで囲む）
  • 間違い3：10行目 <img src="image.png"> → <img src="image.png" alt="画像の説明">（alt属性がない）

問題3の解答

(1) 「タイトル」 — 文字色：navy、文字サイズ：32px（.titleクラスセレクタが優先）

(2) 「紹介文」 — 文字色：gray（.introにcolorの指定がないのでpの値）、文字サイズ：18px（.introが優先）

(3) 「普通の段落」 — 文字色：gray、文字サイズ：14px（p要素セレクタ）

問題4の解答

<table>
  <tr>
    <th>教科</th>
    <th>点数</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>85</td>
  </tr>
  <tr>
    <td>英語</td>
    <td>72</td>
  </tr>
</table>

問題5の解答

.red {
  color: red;
}

クラスセレクタ.redを使います。要素セレクタpを使うと、すべての<p>に適用されてしまいます。

テスト直前チェックリスト

  • ✅ HTMLの基本構造（DOCTYPE、html、head、body）を書けるか
  • ✅ よく使うタグ10個の意味と使い方を言えるか
  • ✅ 開始タグと終了タグの違いがわかるか
  • ✅ 属性の書き方（属性名="値"）を覚えているか
  • ✅ CSSの基本構文（セレクタ { プロパティ: 値; } ）を書けるか
  • ✅ クラス（.）とID（#）の違いがわかるか
  • ✅ CSSの優先順位を説明できるか
  • ✅ 表（table）の構造を書けるか

まとめ

この記事では、情報Ⅰの中間テストに向けてHTML・CSSを総復習しました。

HTMLのポイント：

  • 基本構造（DOCTYPE → html → head + body）
  • タグは開始タグと終了タグのペア
  • 属性は開始タグの中に書く
  • セマンティックタグで意味を伝える

CSSのポイント：

  • 基本構文は「セレクタ { プロパティ: 値; }」
  • クラスは.、IDは#
  • 優先順位：ID > クラス > 要素
  • セミコロンを忘れない

テスト対策のコツ：

  • 穴埋め → タグの役割と属性を覚える
  • コード修正 → 終了タグ・セミコロン・引用符を確認
  • 出力予測 → CSSの優先順位を使って判断

練習問題を解いて間違えたところは、もう一度復習しておきましょう。

次のステップ

テスト勉強、応援しています！わからないところがあれば、各リンク先の記事で詳しく学べます。がんばってください！

⚡ HTML/CSSを実際に書いて練習しよう！

テストで出るタグやCSSプロパティを、実際にコードを書いて確認できます。完全無料・登録不要。

HTMLレッスン1を始める →
目次

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

関連記事

プログラミング

CSS の記事一覧

 プログラミング

HTML の記事一覧

 プログラミング

CSSでレイアウトが崩れた原因の探し方と直し方【よくあるパターン10選】

CSSのレイアウトが崩れた・ズレたときの原因の探し方を初心者向けに解説。開発者ツールでの特定手順と、はみ出し・余白ズレ・横並び失敗などよくある崩れパターン10個の直し方を紹介します。
𝕏 シェア LINE シェア

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

情報Ⅰの中間テストで出るHTML・CSSの実技問題を総復習。穴埋め・コード修正・出力予測のパターン別対策と練習問題つきで得点力アップ。

出典: https://start-web-programming.com/blog/midterm-test-html-css-review/