HTML5プロフェッショナル認定試験レベル1の重要用語集【試験頻出】

公開: 2026年6月9日 更新: 2026年9月20日

HTML5プロフェッショナル認定試験レベル1（Ver2.5）で頻出する重要用語をカテゴリ別にまとめました。Web基礎・CSS・セマンティクス・レスポンシブ・APIの5分野を横断的に網羅しています。試験直前の総復習にご活用ください。

目次

• 1. Webの基礎知識
• 2. 要素とそのセマンティクス
• 3. CSS
• 4. レスポンシブWebデザイン
• 5. API の基礎知識

1. Webの基礎知識

HTML（エイチティーエムエル）

HyperText Markup Language。Webページの構造を記述するマークアップ言語。

DOCTYPE宣言

文書型宣言。HTML5では <!DOCTYPE html> と記述し、標準モードでレンダリングさせる。

文字コード（UTF-8）

文字を数値で表す方式。HTML5では <meta charset="UTF-8"> の指定が一般的。

HTTP / HTTPS

Web通信のプロトコル。HTTPSは通信を暗号化（TLS）した安全な方式。

URL

Uniform Resource Locator。Web上のリソースの所在を示すアドレス。

DOM

Document Object Model。HTML文書をツリー構造のオブジェクトとして扱う仕組み。

要素・属性

要素はタグで囲む構成単位、属性は要素に付加情報を与える指定（id, class等）。

レンダリングエンジン

HTML/CSSを解釈して画面を描画するブラウザの中核機能。

2. 要素とそのセマンティクス

セマンティック要素

意味を持つHTML5の構造化要素。文書構造を明確化しSEO・アクセシビリティに貢献。

header / footer

ページやセクションのヘッダー（導入部）・フッター（補足部）を表すセマンティック要素。

nav

主要なナビゲーションリンクをまとめる要素。

article / section

articleは独立した記事、sectionは文書内のまとまりを表す要素。

main / aside

mainは主要コンテンツ、asideは余談・補足（サイドバー等）を表す要素。

figure / figcaption

図・画像とそのキャプション（説明文）をまとめる要素。

form 要素

ユーザー入力を受け付けるフォームを定義する要素。

input type 属性

text, email, number, date, range など入力欄の種類を指定する属性。

audio / video 要素

HTML5で音声・動画を埋め込むメディア要素。controls属性で再生UIを表示。

alt 属性

img要素の代替テキスト。画像が表示されない時や音声読み上げで使用。

グローバル属性

id, class, style, lang など、すべての要素に指定できる共通属性。

3. CSS

CSS

Cascading Style Sheets。HTML要素の見た目（レイアウト・色・装飾）を指定する言語。

セレクタ

スタイルを適用する対象を指定する記述。要素・クラス・ID・擬似クラス等がある。

詳細度（カスケード）

複数のスタイルが競合した際の優先順位。ID＞クラス＞要素の順で強い。

ボックスモデル

要素をcontent・padding・border・marginの入れ子構造で捉える概念。

Flexbox

display:flex で要素を柔軟に並べる1次元レイアウト手法。

グリッドレイアウト

display:grid で行・列の2次元レイアウトを組む手法。

position プロパティ

要素の配置方法を指定。static / relative / absolute / fixed / sticky。

display プロパティ

要素の表示形式を指定。block / inline / flex / none 等。

色指定（RGB / HSL）

色をRGB値（#RRGGBB等）や色相・彩度・輝度（HSL）で表現する方法。

擬似クラス（ぎじクラス）

:hover, :focus, :nth-child() など、要素の状態や位置に応じてスタイルを当てるセレクタ。

擬似要素（ぎじようそ）

::before, ::after など、要素の一部に対して仮想的にスタイルや内容を追加する記法。

単位（px / em / rem）

長さの指定単位。pxは絶対値、emは親要素基準、remはルート要素基準の相対単位。

z-index（ゼットインデックス）

重なり順（前後関係）を指定するプロパティ。値が大きいほど前面に表示される。

transition / animation

transitionは状態変化を滑らかに補間し、animationは@keyframesで複雑な動きを定義するCSS機能。

4. レスポンシブWebデザイン

レスポンシブWebデザイン

画面サイズに応じてレイアウトを最適化する設計手法。

viewport

ブラウザの表示領域。<meta name="viewport" content="width=device-width"> で最適化。

メディアクエリ

@media で画面幅などの条件に応じてCSSを切り替える仕組み。

ブレークポイント

メディアクエリでレイアウトを切り替える画面幅の境界値。

モバイルファースト

小さい画面を基準に設計し、大画面へ拡張していく設計思想。

可変グリッド

幅を%やfr等の相対値で指定し、画面に応じて伸縮させるレイアウト。

srcset / sizes 属性

img要素で画面幅や解像度に応じた画像を切り替える属性。レスポンシブイメージを実現する。

picture 要素

複数のsourceを条件分岐し、状況に応じた画像を表示するレスポンシブ画像用の要素。

5. API の基礎知識

Canvas

JavaScriptで2Dグラフィックスを動的に描画するHTML5要素・API。

Web Storage

ブラウザにデータを保存するAPI。永続のlocalStorage、セッション限定のsessionStorage。

Geolocation

端末の位置情報（緯度・経度）を取得するAPI。利用には利用者の許可が必要。

Web Workers

バックグラウンドで処理を並列実行し、UIの応答性を保つAPI。

CORS

Cross-Origin Resource Sharing。異なるオリジン間のリソース取得を制御する仕組み。

SVG

Scalable Vector Graphics。拡大しても劣化しないベクター画像形式。

ステータスコード

HTTPの応答結果を表す3桁の番号。200は成功、404は未検出、301は恒久的移動、500はサーバーエラー。

Service Worker（サービスワーカー）

ページとは別に動作し、オフライン対応やプッシュ通知を可能にするバックグラウンドのスクリプト。

WebSocket（ウェブソケット）

サーバーとブラウザ間で双方向通信を維持するプロトコル。チャットやリアルタイム更新に用いる。

microdata（マイクロデータ）

HTMLに意味情報を埋め込む構造化データの記法。検索エンジンの理解を助ける。

Base64（ベースろくじゅうよん）

バイナリデータを文字列で表現する符号化方式。画像をdata URIとして埋め込む際などに使う。

Cookie（クッキー）

ブラウザに保存される小さなデータ。セッション管理やログイン状態の保持に利用される。

まとめ

HTML5レベル1は5分野から幅広く出題されます。要素名・属性名・CSSプロパティは正確に押さえ、一問一答と組み合わせて知識を定着させましょう。特にセマンティクス要素・CSS・レスポンシブ設計は頻出テーマです。

用語集の活用法・関連学習リソース

用語の意味を確認したら、実際の問題演習で定着させましょう。以下の関連ページもご活用ください。

• 勉強法・参考書ガイド — 体系的な学習ロードマップ
• よくある質問・Q&A — 受験者の疑問を一括解決
• 難易度・学習時間の解説 — 他資格との比較・学習時間の目安
• 一問一答で用語を演習 — 用語の使い方を実戦形式で確認

よくある質問

Q. DOCTYPE宣言とは？

HTML文書の先頭に書く文書型宣言です。HTML5では「!DOCTYPE html」を山かっこで囲んで記述し、ブラウザに標準モードで表示させる役割があります。

Q. セマンティック要素とは？

header・nav・article・section・footerなど、意味を持つHTML5の構造化要素です。文書構造を明確にし、SEOやアクセシビリティの向上に役立ちます。

Q. メディアクエリとは？

画面幅などの条件に応じてCSSを切り替える仕組み（@media）です。レスポンシブWebデザインの中核技術です。

Q. viewportとは？

ブラウザの表示領域のことで、metaタグでwidth=device-widthなどを指定し、モバイル端末での表示を最適化します。

Q. Web Storageとは？

ブラウザにデータを保存するHTML5 APIで、永続保存のlocalStorageと、セッション限定のsessionStorageがあります。

📚 関連資格の用語集【IT系】

同じIT系の資格では用語が重複・関連することが多くあります。あわせて確認すると理解が深まります。