難易度は Level 1（やさしめ）〜Level 5（難関） の5段階です。
HTML5プロフェッショナル認定 レベル1のサンプル問題（本番形式・解説付き）
HTML5プロフェッショナル認定 レベル1（LPI-Japan・HTML5プロフェッショナル認定試験 レベル1（Ver2.5 対象））の出題形式を、実際の問題で確かめられます。ここに掲載する5問は、無料の会員登録で解ける模試 第1回（60問）の冒頭から抜粋したオリジナル問題です。当サイトは全660問を本番CBT準拠の形式で収録しており、この5問はそのごく一部にあたります。
設問1
次のスタイルを指定した幅 100px のボックスに、折り返しなしでは収まらない長いテキストを入れた時の表示の説明として正しいものはどれですか。 .title { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- テキストは 1 行に収められ、ボックスからはみ出す部分が「…」で省略されて表示されます（正解）
- テキストはボックスの幅で折り返され、複数行で全文が表示されます
- テキストは 1 行のまま折り返されず、はみ出した部分もそのまま表示されます
- テキストは 1 行に収まるように文字サイズが自動で小さくなります
解説
white-space: nowrap; で自動の折り返しを止め、overflow: hidden; ではみ出た部分を隠し、text-overflow: ellipsis; で切れた位置に「…」を表示します。この 3 つを組み合わせるのが 1 行省略の定番です。nowrap があるため折り返されず、overflow: hidden があるためはみ出した部分は表示されません。文字サイズを自動で変える機能はこの指定にはありません。
他の選択肢が誤りである理由
- 「テキストはボックスの幅で折り返され、複数行で全文が表示されます」white-space: nowrap; が指定されているため、テキストは自動で折り返されません。
- 「テキストは 1 行のまま折り返されず、はみ出した部分もそのまま表示されます」overflow: hidden; が指定されているため、はみ出した部分は表示されず、text-overflow の「…」で省略されます。
- 「テキストは 1 行に収まるように文字サイズが自動で小さくなります」文字サイズを自動で変える指定はありません。文字サイズは font-size で決まります。
設問2
価格の改定を次のように記述しました。 <p>価格: <del datetime="2026-09-30">1,980 円</del> <ins datetime="2026-10-01" cite="/notice/price.html">2,180 円</ins></p> この記述についての説明として正しいものはどれですか。
- del要素とins要素は同じ段落の中で対にして使う決まりがあり、片方だけを単独で書くと文書は無効になります
- datetime属性を付けると、ブラウザがその日時を要素の横に「変更日: …」の形で自動的に表示します
- cite属性には変更理由の説明文そのものを書き、ブラウザがマウスオーバー時にツールチップとして表示します
- cite属性は変更理由を説明する文書のURLを示し、datetime属性は変更が行われた日時を示します（正解）
解説
ins要素とdel要素の cite属性は変更理由を説明する文書のURL、datetime属性は変更の日時を示します。cite属性に書くのは説明文ではなくURLで、ブラウザがツールチップとして出す物ではありません。datetime属性の値も自動表示されません。ins要素とdel要素はそれぞれ単独で使えます。
他の選択肢が誤りである理由
- 「del要素とins要素は同じ段落の中で対にして使う決まりがあり、片方だけを単独で書くと文書は無効になります」ins要素とdel要素はそれぞれ単独で使えます。対で使う決まりはありません。
- 「datetime属性を付けると、ブラウザがその日時を要素の横に「変更日: …」の形で自動的に表示します」datetime属性の値はブラウザが自動で表示する物ではなく、機械向けの情報です。
- 「cite属性には変更理由の説明文そのものを書き、ブラウザがマウスオーバー時にツールチップとして表示します」cite属性にはURLを書きます。説明文を書く属性ではなく、ツールチップ表示もされません。
設問3
WebRTC の役割を社内で説明する資料を作っています。WebRTC の説明として誤っているものはどれですか。
- WebRTC はサーバからのプッシュ通知をブラウザに届ける仕組みで、ページを閉じていても通知を受け取れる（正解）
- RTCDataChannel を使うと、音声や映像だけでなく任意のデータをブラウザ同士で直接送れる
- 接続の相手を見つけて接続情報を交換するシグナリングの手順は WebRTC の仕様に含まれず、WebSocket などで別に実装する
- RTCPeerConnection でブラウザ同士の接続を作り、音声・映像のストリームをやり取りする
解説
サーバからのプッシュ通知をページを閉じていても受け取れるのは Push API と Service Worker の仕組みで、WebRTC は開いているブラウザ同士の通信です。RTCPeerConnection による接続、RTCDataChannel による任意のデータの送受信、シグナリングが仕様外であることは、いずれも正しい説明です。
他の選択肢が誤りである理由
- 「RTCDataChannel を使うと、音声や映像だけでなく任意のデータをブラウザ同士で直接送れる」RTCDataChannel で任意のデータを直接送れます。説明は正しいです。
- 「接続の相手を見つけて接続情報を交換するシグナリングの手順は WebRTC の仕様に含まれず、WebSocket などで別に実装する」シグナリングは WebRTC の仕様の範囲外で、別に実装します。説明は正しいです。
- 「RTCPeerConnection でブラウザ同士の接続を作り、音声・映像のストリームをやり取りする」RTCPeerConnection は WebRTC の中心となる接続のオブジェクトで、説明は正しいです。
設問4
スマートフォンを振ると画面が切り替わる機能を作ります。次のコードと DeviceMotion Event の説明として正しいものはどれですか。（3 つ選択） window.addEventListener("devicemotion", (e) => { const a = e.acceleration; if (!a || a.x === null) { return; } const strength = Math.sqrt(a.x * a.x + a.y * a.y + a.z * a.z); if (strength > 15) { nextPage(); } });
- strength は 3 軸の加速度を合成した大きさで、単位はメートル毎秒毎秒である（正解）
- 加速度を測れないデバイスでは acceleration が null になったり各軸の値が null になったりするため、コードの先頭の確認は必要である（正解）
- e.acceleration の代わりに e.accelerationIncludingGravity を使っても、静止時の値は同じく 0 になる
- e.acceleration は重力を除いた加速度なので、静止しているときは各軸がほぼ 0 になり、振ったときだけ大きな値になる（正解）
- devicemotion は振ったときにだけ発生するイベントなので、strength の判定は不要である
- e.rotationRate は加速度の積分で求めた移動距離を返す
解説
acceleration は重力を除くので静止時はほぼ 0 で、振ると大きくなります。センサーが無い場合は null になるので確認が要ります。3 軸を合成した strength の単位はメートル毎秒毎秒です。accelerationIncludingGravity には重力の約 9.8 が含まれるので静止時は 0 になりません。rotationRate は角速度で、移動距離ではありません。devicemotion はセンサーの周期で常に発生するので、判定が要ります。
他の選択肢が誤りである理由
- 「e.acceleration の代わりに e.accelerationIncludingGravity を使っても、静止時の値は同じく 0 になる」accelerationIncludingGravity には重力が含まれるので、静止していてもいずれかの軸に約 9.8 の値が出ます。
- 「devicemotion は振ったときにだけ発生するイベントなので、strength の判定は不要である」devicemotion はセンサーの読み取りの周期で常に発生します。振ったかどうかは加速度の大きさで自分で判定します。
- 「e.rotationRate は加速度の積分で求めた移動距離を返す」rotationRate はジャイロスコープで測った角速度（度毎秒）です。移動距離は返しません。
設問5
次のソースコードの p要素について、正しい説明はどれですか。 <p hidden>読み込み中のメッセージ</p> <img src="card.png" alt="カード" draggable="false"> <textarea spellcheck="false"></textarea>
- hidden属性は要素を半透明にして表示する属性で、p要素の文字は薄く表示されます
- draggable属性の既定値は false なので、img要素に draggable="false" を書いても動作は変わりません
- hidden属性の付いた p要素は、CSS で上書きしない限り画面に表示されません（正解）
- spellcheck="false" を付けても、textarea要素では変わらずスペルチェックが行われます
解説
hidden属性は要素が現時点で無関係であることを示し、ブラウザは表示しません（display: none 相当）。半透明にする属性ではありません。また、img要素は既定でドラッグできる要素なので draggable="false" でドラッグを無効にでき、spellcheck="false" でスペルチェックを止められます。
他の選択肢が誤りである理由
- 「hidden属性は要素を半透明にして表示する属性で、p要素の文字は薄く表示されます」hidden属性は要素を表示しない指定で、半透明の表示ではありません。
- 「draggable属性の既定値は false なので、img要素に draggable="false" を書いても動作は変わりません」img要素と a要素は既定でドラッグ可能なため、draggable="false" で動作が変わります。
- 「spellcheck="false" を付けても、textarea要素では変わらずスペルチェックが行われます」spellcheck="false" を付けると、その要素ではスペルチェックが行われません。
続きは、会員登録なしでそのまま50問解けます。採点と解説つきで、上と同じ本物の問題です。
登録なしで50問解く