皆さんこんにちわ！
今回は私がHTML5プロフェッショナル認定試験 レベル1の資格を取得する際にWEBで勉強したかったけどなかなかいいサイトがないなあと思いましたので、Webで勉強できるように問題と解答この記事にまとめてみました。※解説は含みません
試験の基本情報
試験名（略称）：HTML5プロフェッショナル認定試験 レベル1
試験方式：CBT (コンピュータベース試験)
所要時間：約 90分（試験 80分 + 契約・アンケート）
受験料：￥16,500（税込）
出題数：約 60問前後
出題範囲の主なカテゴリー：
- Webの基礎知識（HTTP／HTTPS、通信、URL／URI／ステータスコードなど）
- HTML／HTML5 マークアップ（要素・属性、セマンティクス、新タグ、構文など）
- CSS3（セレクタ、スタイル、カスケード／優先順位、レイアウトなど）
- レスポンシブ Web デザイン／マルチデバイス対応（メディアクエリ、viewport 等）
- Web API／マルチメディア／オフライン対応など（HTML5 の新機能含む）
合格ライン
正式には公表しておりません。筆者が受験したときは65％でしたので、確実に合格したければ70％以上の正答率は必要だと考えられます。
2025年12月時点の公式サイトの情報をもとに掲載しています。
下記が公式サイトになります。
https://html5exam.jp/
HTML5プロフェッショナル認定試験 レベル1 問題集
問題 1（HTTP基礎）
HTTP ステータスコード「301」が意味するものはどれか？
A. リソースが一時的に移動した
B. リソースが恒久的に移動した
C. 認証が必要
D. リソースが見つからない
解答
B
問題 2（HTML構造）
HTML5 のセマンティック要素として正しいものはどれか？
A. <section>
B. <blink>
C. <font>
D. <big>
解答
A
問題 3（DOCTYPE）
HTML5 の DOCTYPE として正しい記述はどれか？
A. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
B. <!DOCTYPE HTML5>
C. <!DOCTYPE html>
D. <!DOCTYPE HTML SYSTEM>
解答
C
問題 4（文字コード）
UTF-8 を指定する <meta> タグとして正しいものは？
A. <meta charset="UTF-8">
B. <meta encoding="UTF-8">
C. <meta type="UTF-8">
D. <meta charset="Unicode">
解答
A
問題 5（リンク指定）
外部 CSS を読み込む記述として正しいものは？
A. <style src="style.css">
B. <css link="style.css">
C. <link rel="stylesheet" href="style.css">
D. <stylesheet path="style.css">
解答
C
問題 6（CSS優先度）
CSS の優先順位として最も強いものはどれ？
A. クラスセレクタ
B. タグセレクタ
C. IDセレクタ
D. インラインスタイル
解答
D
問題 7（Flexbox）
Flexbox の親要素に指定するプロパティはどれ？
A. display: grid;
B. display: flex;
C. flex-direction: row;（単体使用）
D. float: left;
解答：B
問題 8（SEO）
検索エンジン向けの重要メタタグはどれ？
A. <meta http-equiv="refresh">
B. <meta name="description">
C. <meta name="viewport">
D. <meta charset>
解答：B
問題 9（画像タグ）
HTML5 で推奨される画像の代替テキストを設定する属性は？
A. title
B. alt
C. caption
D. value
解答：B
問題 10（フォーム）
メールアドレス入力専用の <input> タイプは？
A. text
B. mail
C. email
D. address
解答
C
問題 11（フォーム検証）
必須入力を指定する属性は？
A. require
B. mandatory
C. required
D. must
解答
C
問題 12（CSS セレクタ）
<p class="text red"> を指定するセレクタとして正しいものは？
A. .text.red
B. .text red
C. p#text.red
D. .text, .red
解答
A
問題 13（CSRF防止ではないもの）
HTML のフォーム送信に関係しない項目はどれ？
A. POST メソッド
B. CSRFトークン
C. <input type="hidden">
D. alt 属性
解答
D
問題 14（表示領域指定）
スマホで正しい幅を表示させる viewport 設定は？
A. <meta viewport="width=device">
B. <meta name="viewport" content="width=device-width">
C. <meta content="device-width" name="device">
D. <meta charset="viewport">
解答
B
問題 15（HTML5新要素）
HTML5 で導入された要素はどれ？
A. <marquee>
B. <article>
C. <dir>
D. <acronym>
解答
B
問題 16（テーブル）
表のキャプションを表すタグは？
A. <head>
B. <legend>
C. <caption>
D. <mark>
解答
C
問題 17（CSS box-model）
padding は何に含まれる？
A. 内容領域（content）の外側
B. 枠（border）の外側
C. margin の内側
D. border の内側
解答
A
問題 18（Grid Layout）
CSS Grid の記述として正しいものは？
A. display: flex-grid;
B. display: block-grid;
C. display: grid;
D. grid-layout: on;
解答
C
問題 19（音声要素）
音声ファイルを再生する HTML 要素は？
A. <sound>
B. <audio>
C. <media>
D. <voice>
解答
B
問題 20（動画要素）
動画のコントロールバーを表示する属性は？
A. controller
B. control
C. controls
D. bar
解答
B
問題 21（HTML属性）
<input> に初期値を入れる属性はどれ？
A. default
B. value
C. init
D. text
解答
B
問題 22（フォーム送信先）
フォームの送信先 URL を指定する属性は？
A. to
B. url
C. action
D. send
解答
C
問題 23（form method）
フォーム送信でファイルアップロードを含む場合に必須の method は？
A. GET
B. PUT
C. HEAD
D. POST
解答
D
問題 24（img 属性）
画像の幅を CSS ではなく HTML 属性で指定する場合は？
A. size
B. width
C. img-width
D. length
解答
B
問題 25（セマンティック）
「ナビゲーション」を意味する HTML 要素は？
A. <navigator>
B. <menu>
C. <nav>
D. <go>
解答
C
問題 26（リンクターゲット）
新しいタブで開くための属性は？
A. _tab
B. _blank
C. _new
D. _open
解答
B
問題 27（CSSアニメーション）
CSS アニメーションを設定するために必要なルールは？
A. @motion
B. @frames
C. @keyframes
D. @animate
解答
C
問題 28（position）
position: fixed; が適用される位置は？
A. 直前の要素基準
B. ブラウザのビューポート基準
C. 親要素基準
D. テキストの行基準
解答
B
解答：
問題 29（HTMLコメント）
HTML のコメント文として正しいのは？
A. /* comment */
B. # comment
C. <!-- comment -->
D. -- comment --
解答
C
問題 30（CSSコメント）
CSS のコメント文として正しいのは？
A. <!-- comment -->
B. // comment
C. /* comment */
D. ** comment **
解答
C
問題 31（リスト要素）
番号付きリストを作るタグは？
A. <ul>
B. <ol>
C. <list>
D. <num>
解答
B
問題 32（br要素）
<br> タグの特徴として正しいのは？
A. ペアタグである
B. 段落全体を分ける
C. 改行を挿入する
D. 強調を表す
解答
C
問題 33（CSS 優先度）
以下の選択肢で最も優先度が高い CSS は？
A. .box p { color: red; }
B. #main p { color: red; }
C. p { color: red; }
D. * { color: red; }
解答
B
問題 34（リンクの省略）
同じページ内の要素へ移動するためのリンクは？
A. <a href="#id名">
B. <a href="id名">
C. <a move="id名">
D. <a go="id名">
解答
A
問題 35（テーブル構造）
表の本体部分を表す要素は？
A. <thead>
B. <tfoot>
C. <tbody>
D. <table-body>
解答
C
問題 36（メディアクエリ）
スマホ幅（最大 600px）用の CSS を記述する正しい形式は？
A. @media screen and (screen < 600px)
B. @media (max-width: 600px)
C. @screen (max 600)
D. @media smartphone
解答
B
問題 37（表示非表示）
要素を非表示にしてレイアウトからも取り除くのは？
A. visibility: hidden;
B. display: none;
C. opacity: 0;
D. hide: true;
解答
B
問題 38（フォーム初期値）
placeholder 属性の説明として正しいのは？
A. 入力必須にする
B. 入力欄の背景色を変える
C. 入力例の薄い文字を表示する
D. 初期値を固定表示する
解答
C
問題 39（CSS単位）
相対単位であるものはどれ？
A. px
B. em
C. cm
D. in
解答
B
問題 40（HTMLシンタックス）
属性値の指定として正しいものは？
A. <div class=box>
B. <div class:"box">
C. <div class=>
D. <div class box>
解答
A
問題 41（HTML階層）
次のうち “インライン要素” はどれ？
A. <div>
B. <span>
C. <section>
D. <article>
解答
B
問題 42（画像の代替テキスト）
alt 属性の主な役割はどれ？
A. 画像のサイズを指定
B. 画像のファイル形式を指定
C. 読み込めないときの代替テキスト
D. 画像の表示枠を設定
解答
C
問題 43（scriptの読み込み）
HTML の最後で JavaScript を読み込む利点は？
A. 画像が高速化される
B. DOM の読み込みが邪魔されない
C. CSS が短縮される
D. サーバーアクセスが消える
解答
B
問題 44（audioタグ）
HTML5 で音声を再生するタグは？
A. <sound>
B. <music>
C. <audio>
D. <voice>
解答
C
問題 45（埋め込みコンテンツ）
外部ページを埋め込むために使うタグは？
A. <embed>
B. <iframe>
C. <include>
D. <import>
解答
B
問題 46（required属性）
required の説明として正しいものは？
A. 入力値を暗号化する
B. 入力欄を赤くする
C. 入力を必須にする
D. 入力値を数値に変換する
解答
C
問題 47（CSS float）
float: left; の特徴は？
A. 要素を中央に配置する
B. 要素を左に回り込ませる
C. 要素を縮小する
D. 要素を背景にする
解答
B
問題 48（セレクタ）
ul > li の意味として正しいのは？
A. すべての li
B. すべての ul の子孫 li
C. ul の “直接の子要素” li
D. li の親を選ぶ
解答
C
問題 49（正しいHTML構造）
HTML文書の最初に書くべき宣言は？
A. <!HTML5>
B. <DOCTYPE>
C. <html-doctype>
D. <!DOCTYPE html>
解答
D
問題 50（フォーム入力タイプ）
メールアドレス向けの入力タイプは？
A. type="mail"
B. type="email"
C. type="address"
D. type="text-mail"
解答
B
問題 51（input number）
数字のみ入力させたい場合の type は？
A. number
B. int
C. digit
D. numeric
解答
A
問題 52（labelのfor属性）
for 属性に設定すべき値は？
A. class名
B. name属性
C. id属性
D. 要素名
解答
C
問題 53（flexbox）
Flexbox で要素を横方向に並べるには？
A. flex-direction: row;
B. flex-direction: column;
C. display: inline;
D. display: table;
解答
A
問題 54（CSS 背景画像）
背景画像を設定するプロパティは？
A. background-src
B. bg-image
C. image-background
D. background-image
解答
D
問題 55（HTML5 API）
ローカルストレージに関する記述で正しいのは？
A. 有効期限がある
B. データはサーバーへ送られる
C. 同一ドメイン内で保存
D. ブラウザを閉じると消える
解答
C
問題 56（progressタグ）
進捗バーを表すタグは？
A. <meter>
B. <bar>
C. <progress>
D. <status>
解答
C
問題 57（HTMLエンティティ）
< は何を意味する？
A. >
B. <
C. &
D. /
解答
B
問題 58（CSS 優先順位）
以下のうち最も優先されるのは？
A. インラインスタイル
B. クラスセレクタ
C. タグセレクタ
D. 外部CSS
解答
A
問題 59（videoタグ）
動画にコントロールバーを表示する属性は？
A. bar
B. ui
C. control
D. controls
解答
D
問題 60（meta viewport）
スマホ表示で横幅を端末幅に合わせる設定は？
A. <meta name="scale" content="mobile">
B. <meta viewport="device-width">
C. <meta name="viewport" content="width=device-width">
D. <meta content="fit" name="mobile">
解答
C
問題 61（HTTPメソッド）
GET と POST の主な違いとして正しいものは？
A. GET はデータを URL に付加する、POST はリクエストボディに付加する
B. GET は暗号化される、POST は暗号化されない
C. GET は必ずキャッシュされる、POST はキャッシュされない
D. POST は URL にパラメータを付加できない
解答
A
問題 62（HTTPステータス）
HTTP ステータスコード 404 の意味は？
A. サーバーエラー
B. 認証が必要
C. リソースが見つからない
D. 永続的に移動した
解答
C
問題 63（HTTPS）
HTTPS が HTTP に比べて安全な理由は？
A. データを圧縮する
B. データを暗号化して通信する
C. サーバーが高速になる
D. すべてのブラウザでキャッシュされる
解答
B
問題 64（URL構造）
URL の正しい構造として正しいものは？
A. scheme://host:port/path?query#fragment
B. host://scheme:port/path#fragment?query
C. path://host:scheme?query#fragment
D. scheme://path?host#fragment:port
解答
A
問題 65（URIとURL）
URL と URI の違いとして正しいものは？
A. URL は資源の場所を示す、URI は資源の識別子を示す
B. URI はブラウザで使えない
C. URL は識別子だが URI は位置情報も示す
D. URI は常に IP アドレスで表す
解答
A
問題 66（Canvas API）
HTML5 の Canvas で描画を開始するためのメソッドは？
A. draw()
B. beginPath()
C. startCanvas()
D. createCanvas()
解答
B
問題 67（Web Storage）
localStorage に保存したデータの有効期限は？
A. ブラウザを閉じるまで
B. 30日間
C. 永続的（削除しない限り残る）
D. 1時間
解答
C
問題 68（sessionStorage）
sessionStorage に保存したデータはいつ消える？
A. ブラウザを閉じたとき
B. ブラウザを再起動しても残る
C. 永続的
D. 一定時間経過で自動消去
解答
A
問題 69（Service Worker）
Service Worker の主な用途は？
A. CSSアニメーションの高速化
B. オフライン対応やキャッシュ管理
C. 画像圧縮
D. HTMLタグの検証
解答
B
問題 70（WebSocket）
WebSocket の特徴は？
A. HTTPリクエストのみで通信
B. 双方向リアルタイム通信が可能
C. 常に非同期通信不可
D. サーバーのみ送信可能
解答
B
問題 71（Geolocation API）
ユーザーの位置情報を取得する API はどれ？
A. navigator.position
B. navigator.geolocation.getCurrentPosition()
C. navigator.location()
D. navigator.gps.getPosition()
解答
B
問題 72（Drag & Drop API）
HTML5 Drag & Drop API でドラッグ開始イベントは？
A. dragstart
B. dragend
C. dropstart
D. draginit
解答
A
問題 73（ARIA）
アクセシビリティ向上のための属性はどれ？
A. src
B. id
C. class
D. role
解答
D
問題 74（CSS Grid）
Grid レイアウトで列を指定するプロパティは？
A. grid-template-columns
B. grid-columns
C. columns
D. grid-template-rows
解答
A
問題 75（CSS Grid 行指定）
Grid レイアウトで行を指定するプロパティは？
A. grid-template-columns
B. grid-rows
C. rows
D. grid-template-rows
解答
D
問題 76（Transform）
CSS transform で要素を回転させるプロパティは？
A. rotate-angle
B. transform: rotate(45deg);
C. spin: 45deg;
D. rotate: 45deg;
解答
B
問題 77（Transition）
CSS Transition の用途は？
A. 要素の色や位置をアニメーションで変化させる
B. 要素を非表示にする
C. フォームを送信する
D. 画像圧縮を行う
解答
A
問題 78（Responsive Image）
スマホ用に画像サイズを切り替える HTML 属性は？
A. srcset
B. sizeset
C. src-size
D. img-responsive
解答
A
問題 79（Viewport幅）
レスポンシブで端末幅に合わせる meta タグは？
A. <meta content="responsive">
B. <meta name="device" content="screen">
C. <meta width="device-width">
D. <meta name="viewport" content="width=device-width">
解答
D
問題 80（Video API）
HTML5 video タグで再生時間を取得するプロパティは？
A. video.length
B. video.duration
C. video.time
D. video.total
解答
B
問題 81（Audio API）
Audio オブジェクトで音声を停止するメソッドは？
A. stop()
B. pause()
C. end()
D. finish()
解答
B
問題 82（IndexedDB）
IndexedDB の用途は？
A. オフラインでデータを永続保存する
B. 画像圧縮
C. HTTP通信
D. CSSアニメーション
解答
A
問題 83（Canvas）
2D描画コンテキストを取得するメソッドは？
A. createCanvas()
B. draw2D()
C. getContext(‘2d’)
D. start2D()
解答
C
問題 84（Push API）
Web Push で通知を送るときの特徴は？
A. ブラウザが開いていなくても通知可能
B. 常にサーバーから直接ブラウザに送信できる
C. CSSが必要
D. 動画を自動再生する
解答
A
問題 85（Canvas 塗りつぶし）
ctx.fillStyle で指定できるのは？
A. 色（文字列）
B. 画像URLのみ
C. 数字のみ
D. ブラウザ幅
解答
A
問題 86（CSS アニメーション遅延）
アニメーションの開始を遅らせるプロパティは？
A. animation-delay
B. animation-duration
C. animation-start
D. animation-time
解答
A
問題 87（ARIA role）
スクリーンリーダーに「ボタン」と認識させる role 属性は？
A. role=”clickable”
B. role=”button”
C. role=”action”
D. role=”press”
解答
B
問題 88（CSS overflow）
はみ出した内容を隠すプロパティは？
A. overflow: visible;
B. overflow: clip;
C. overflow: hidden;
D. overflow: scroll;
解答
C
問題 89（sessionStorage / localStorage 違い）
セッションストレージとローカルストレージの違いは？
A. sessionStorage はブラウザを閉じると消える、localStorage は消えない
B. localStorage はセッション単位
C. sessionStorage は永続保存
D. 同じ
解答
A
問題 90（Web API fetch）
fetch() 関数の用途は？
A. 画像を圧縮
B. CSSを適用
C. サーバーからリソースを非同期取得
D. HTMLタグ検証
解答
C
問題 91（Drag & Drop drop）
ドラッグ先でイベントを受け取るイベント名は？
A. dragenter
B. dragend
C. drop
D. dragstart
解答
C
問題 92（CSS media print）
印刷用スタイルを指定するメディアは？
A. screen
B. print
C. handheld
D. projector
解答
B
問題 93（WebSocket readyState）
WebSocket readyState が 1 の意味は？
A. 接続中
B. 接続済み
C. 接続解除済み
D. 初期化中
解答
B
問題 94（Canvas arc）
円を描くメソッドは？
A. ctx.circle()
B. ctx.ellipse()
C. ctx.drawCircle()
D. ctx.arc()
解答
D
問題 95（CSS opacity）
要素を半透明にするプロパティは？
A. transparency
B. fade
C. alpha
D. opacity
解答
D
問題 96（HTML meta refresh）
ページ自動リロードに使うタグは？
A. <meta refresh="5">
B. <meta name="reload" content="5">
C. <meta http-equiv="refresh" content="5">
D. <meta update="5">
解答
C
問題 97（localStorage データ取得）
保存したデータを取得するメソッドは？
A. fetchItem()
B. readItem()
C. getItem()
D. loadItem()
解答
C
問題 98（HTML picture要素）
異なる解像度で画像を切り替えるためのタグは？
A. <img>
B. <picture>
C. <source>
D. <image>
解答
B
問題 99（Video属性 autoplay）
動画を自動再生する属性は？
A. auto
B. play
C. autoplay
D. start
解答
C
問題 100（Canvas fillRect）
四角形を描画するメソッドは？
A. ctx.rect()
B. ctx.fillRect(x, y, w, h)
C. ctx.square()
D. ctx.drawRect()
解答
B
まとめ
いかがでしたか？
本記事では HTML5プロフェッショナル レベル1試験対策の問題集（全100問） を掲載しました。
問題を通して、HTML5の基本要素・フォーム・Web API・レスポンシブ対応 など試験でよく出る分野に触れることができます。
学習のポイント：
問題を解きながら、自分の理解度を確認する
間違えた箇所や分からなかった箇所は公式ドキュメントや参考書で復習
繰り返し問題を解くことで、試験合格に向けた実力を身につける
本問題集を活用して、HTML5プロフェッショナル レベル1試験の合格 を目指しましょう
少しでも皆さんのお力になれれば幸いです
ありがとうございました
コメント