HTML5プロフェッショナル認定試験 レベル1「レスポンシブWebデザイン」の一問一答

HTML5プロフェッショナル認定試験 レベル1のレスポンシブWebデザインに関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．レスポンシブWebデザインでは、グリッドの幅を%などの相対値で指定する「フルードグリッド」が用いられる。

   正解：○（正しい）

   解説：フルードグリッドは画面幅に応じて伸縮するよう、列幅を%等の相対値で指定する手法である。

2. 問2．フルードイメージを実現するため、画像に「max-width: 100%;」を指定するのが一般的である。

   正解：○（正しい）

   解説：img{max-width:100%}により親要素を超えない範囲で画像が縮小し、レイアウト崩れを防ぐ。

3. 問3．可変（リキッド）レイアウトは、ウィンドウ幅に応じてコンテンツの幅が伸縮するレイアウトである。

   正解：○（正しい）

   解説：リキッドレイアウトは%等の相対値で幅を指定し、ウィンドウ幅に応じて伸縮する。

4. 問4．リセットCSSは、ブラウザごとに異なるデフォルトスタイルを打ち消し、ほぼ無装飾の状態に揃えることを目的とする。

   正解：○（正しい）

   解説：リセットCSSはmarginやpadding等のデフォルト値を0等にリセットし、ブラウザ間の差異をなくす。

5. 問5．CSSスプライトは、複数の画像を1枚にまとめ、background-positionで表示位置をずらして使う手法である。

   正解：○（正しい）

   解説：CSSスプライトは画像を1枚に統合しHTTPリクエスト数を減らす手法で、位置はbackground-positionで調整する。

6. 問6．高解像度（Retina）ディスプレイ向けには、2倍などの大きな画像を用意して縮小表示するとぼやけを防げる。

   正解：○（正しい）

   解説：高解像度端末ではdprが高く、2倍画像を用意して縮小表示することで鮮明に表示できる。

7. 問7．img要素のsizes属性は、各表示条件における画像の表示サイズをブラウザに伝え、srcsetからの選択を補助する。

   正解：○（正しい）

   解説：sizesはメディア条件ごとの表示幅を示し、ブラウザがsrcsetから適切な画像を選ぶ材料となる。

8. 問8．srcsetの「2x」のようなx記述子は、デバイスピクセル比（dpr）に基づいて画像を切り替える指定である。

   正解：○（正しい）

   解説：x記述子(1x/2x等)はデバイスピクセル比に応じて画像を選択させる指定方法である。

9. 問9．ビューポートを指定するmeta要素は「<meta name="viewport" content="width=device-width, initial-scale=1">」のように記述する。

   正解：○（正しい）

   解説：width=device-widthで端末幅に合わせ、initial-scale=1で初期倍率を等倍にする標準的記述である。

10. 問10．viewportのcontentで「width=device-width」と指定すると、ビューポートの幅を端末の画面幅に合わせる。

    正解：○（正しい）

    解説：width=device-widthはビューポート幅をデバイスの画面幅(CSSピクセル)に一致させる指定である。

11. 問11．viewportの「initial-scale」は、ページ読み込み時の初期ズーム倍率を指定するプロパティである。

    正解：○（正しい）

    解説：initial-scaleはページ表示開始時の拡大率を指定し、1で等倍となる。

12. 問12．viewportの「user-scalable」をnoにすると、ピンチ操作などでの拡大・縮小を禁止できる。

    正解：○（正しい）

    解説：user-scalable=noでユーザーのズーム操作が無効化される(アクセシビリティ上は非推奨)。

13. 問13．デバイスピクセル比（dpr）とは、1つのCSSピクセルに対応する物理（デバイス）ピクセルの数を示す比率である。

    正解：○（正しい）

    解説：dprはCSSピクセル1に対する物理ピクセル数の比で、Retina端末では2や3となる。

14. 問14．ファビコンは、ブラウザのタブやブックマークに表示されるサイトのアイコンである。

    正解：○（正しい）

    解説：ファビコンはタブ・ブックマーク・履歴などに表示される小さなサイトアイコンである。

15. 問15．apple-touch-icon-precomposedは、iOSが自動で付ける光沢などの効果を適用させずにアイコンを表示させる指定である。

    正解：○（正しい）

    解説：precomposed版はOSによる光沢加工を無効にし、用意した画像をそのまま表示させる。

16. 問16．apple-mobile-web-app-capableをyesにすると、iOSでホーム画面から起動した際にスタンドアロンモード（ブラウザUIなし）で表示できる。

    正解：○（正しい）

    解説：このmetaをyesにすると、ホーム画面起動時にブラウザUIを隠したフルスクリーン表示になる。

17. 問17．電話番号へのリンクは「<a href="tel:0312345678">」のようにtelスキームを用いて記述する。

    正解：○（正しい）

    解説：tel:スキームを使うと、対応端末でタップにより発信できる電話番号リンクになる。

18. 問18．script要素のasync属性を付けると、スクリプトは非同期にダウンロードされ、完了次第すぐに実行される。

    正解：○（正しい）

    解説：asyncはダウンロードを非同期で行い、完了次第HTML解析を止めて実行する(順序は保証されない)。

19. 問19．script要素のdefer属性を付けると、スクリプトはHTMLの解析完了後に記述順で実行される。

    正解：○（正しい）

    解説：deferはダウンロードを並行で行い、HTML解析完了後に記述順で実行される。

20. 問20．async属性は外部スクリプト（src属性付き）に対して有効であり、インラインスクリプトには効果がない。

    正解：○（正しい）

    解説：asyncはsrcを持つ外部スクリプトにのみ作用し、インラインスクリプトには無効である。

21. 問21．メディアクエリは「@media」というアットルールを使って、特定の条件下でのみ適用するスタイルを記述する。

    正解：○（正しい）

    解説：@media条件{...}の形でメディアクエリを記述し、条件に合うときだけスタイルを適用する。

22. 問22．メディアタイプ「screen」は、画面（ディスプレイ）向けの表示を対象とする。

    正解：○（正しい）

    解説：screenはPCやスマートフォンなどのスクリーン表示を対象とするメディアタイプである。

23. 問23．メディアタイプ「all」は、すべてのメディアタイプを対象とする。

    正解：○（正しい）

    解説：allはすべてのデバイス・メディアを対象とするメディアタイプである。

24. 問24．固定（フィックス）レイアウトは、ウィンドウ幅に応じてコンテンツ幅がpx等の固定値から伸縮する。

    正解：×（誤り）

    解説：誤り。正しくは、固定レイアウトは幅を固定値で指定し、ウィンドウ幅が変わってもコンテンツ幅は変化しない。

25. 問25．ノーマライズCSS（Normalize.css）は、ブラウザのデフォルトスタイルをすべて0にリセットすることを目的としている。

    正解：×（誤り）

    解説：誤り。正しくは、Normalize.cssは有用な既定値を残しつつブラウザ間の差異だけを揃える手法で、すべてを0にはしない。

26. 問26．CSSスプライトを使うとHTTPリクエスト数が増えるため、表示速度はむしろ低下する。

    正解：×（誤り）

    解説：誤り。正しくは、複数画像を1枚に束ねることでリクエスト数は削減され、表示は高速化される。

27. 問27．img要素のsrcset属性は、ページに表示する音声ファイルのビットレート候補を指定する属性である。

    正解：×（誤り）

    解説：誤り。正しくは、srcsetは複数の画像候補を解像度や幅とともに指定し最適な画像を選ばせる属性である。

28. 問28．srcsetの「w記述子」は、各画像のファイルサイズをキロバイト単位で示すものである。

    正解：×（誤り）

    解説：誤り。正しくは、w記述子は画像の実際の横幅をピクセル単位で示すものである。

29. 問29．viewportの「maximum-scale」は、ユーザーが拡大できる最小の倍率を指定する。

    正解：×（誤り）

    解説：誤り。正しくは、maximum-scaleはユーザーが拡大できる最大倍率を指定する。最小はminimum-scaleである。

30. 問30．viewportの「device-width」は、サーバー側で設定した固定のページ幅を表すキーワードである。

    正解：×（誤り）

    解説：誤り。正しくは、device-widthは端末の画面幅(デバイス幅)を表すキーワードである。

31. 問31．apple-touch-iconは、印刷時に用紙の余白に表示する透かしアイコンを指定するためのものである。

    正解：×（誤り）

    解説：誤り。正しくは、apple-touch-iconはiOSでホーム画面に追加した際に使われるアイコンを指定するものである。

32. 問32．defer属性を付けた複数のスクリプトは、記述順とは無関係にダウンロード完了が早い順で実行される。

    正解：×（誤り）

    解説：誤り。正しくは、deferのスクリプトはHTML中の記述順で実行される。順不同なのはasyncである。

33. 問33．メディアタイプ「print」は、画面表示のみを対象とし印刷時には適用されない。

    正解：×（誤り）

    解説：誤り。正しくは、printは印刷出力および印刷プレビューに適用されるメディアタイプである。

34. 問34．メディア特性「max-width: 600px」は、ビューポート幅が600px以上のときに条件が真となる。

    正解：×（誤り）

    解説：誤り。正しくは、max-widthは指定値以下の幅で真となる。以上で真になるのはmin-widthである。

35. 問35．メディア特性「orientation: landscape」は、幅が高さより大きい縦長表示のときに真となる。

    正解：×（誤り）

    解説：誤り。正しくは、landscapeは幅が高さより大きい横長表示で真となる。縦長はportraitである。

36. 問36．メディアクエリでカンマ（,）は、すべての条件を満たさなければならない論理積（AND）の意味を持つ。

    正解：×（誤り）

    解説：誤り。正しくは、カンマは論理和(OR)で、いずれかの条件を満たせば適用される。

37. 問37．解像度単位「dpi」は、1センチメートルあたりのドット数を表す。

    正解：×（誤り）

    解説：誤り。正しくは、dpiはdots per inchで1インチあたりのドット数を表す。cm単位はdpcmである。

38. 問38．viewportで「initial-scale=1.0」と指定すると、ページが2倍に拡大された状態で初期表示される。

    正解：×（誤り）

    解説：誤り。正しくは、initial-scale=1.0は等倍(拡大なし)で初期表示する指定である。

39. 問39．async属性を付けたスクリプトの実行順序は、複数ある場合でも記述順に従って保証される。

    正解：×（誤り）

    解説：誤り。正しくは、asyncはダウンロード完了順で実行され、記述順は保証されない。順序保証はdeferである。

40. 問40．tel:リンクは、発信機能のないPCを含むすべての環境で必ず電話発信ダイアログを表示する。

    正解：×（誤り）

    解説：誤り。正しくは、tel:の挙動は環境依存で、発信機能のないPC等ではダイアログが出ないことがある。

41. 問41．メディアクエリの長さ値は単位を省略しても、自動的にpxとして解釈される。

    正解：×（誤り）

    解説：誤り。正しくは、長さの値には単位が必須で、省略すると無効になる(0を除く)。

42. 問42．レスポンシブWebデザインでは、デバイスごとに別々のURLとHTMLを用意するのが必須である。

    正解：×（誤り）

    解説：誤り。正しくは、レスポンシブは1つのHTMLをCSSで切り替える手法で、別URL別HTMLは必須ではない。

43. 問43．viewportの「minimum-scale」は、ユーザーが拡大できる最大の倍率を指定する。

    正解：×（誤り）

    解説：誤り。正しくは、minimum-scaleは縮小できる最小倍率を指定する。最大はmaximum-scaleである。

44. 問44．メディア特性「min-width」は、ビューポート幅が指定値以下のときに条件が真となる。

    正解：×（誤り）

    解説：誤り。正しくは、min-widthは指定値以上の幅で真となる。以下で真になるのはmax-widthである。

45. 問45．フルードグリッドでは、列幅をすべてpxの固定値で指定して画面幅に依存しないようにする。

    正解：×（誤り）

    解説：誤り。正しくは、フルードグリッドは列幅を%等の相対値で指定し画面幅に応じ伸縮させる。

46. 問46．次のうち、フルードイメージを実現するために画像に指定するCSSとして最も適切なものはどれか。

    • ア．max-width: 100%;
    • イ．min-width: 100%;
    • ウ．width: 100px;
    • エ．display: none;

    正解：ア．max-width: 100%;

    解説：max-width:100%で親要素を超えず、縮小可能なフルードイメージになる。

47. 問47．viewportを指定するmeta要素のname属性の値として正しいものはどれか。

    • ア．screen
    • イ．viewport
    • ウ．device
    • エ．display

    正解：イ．viewport

    解説：viewportのmeta要素はname="viewport"で指定する。

48. 問48．ページ読み込み時の初期表示倍率を等倍にするviewportの記述として正しいものはどれか。

    • ア．maximum-scale=1
    • イ．minimum-scale=1
    • ウ．initial-scale=1
    • エ．user-scalable=1

    正解：ウ．initial-scale=1

    解説：initial-scale=1で初期表示倍率を等倍にできる。

49. 問49．ビューポートの幅を端末の画面幅に合わせるためのviewport記述はどれか。

    • ア．height=device-height
    • イ．width=auto
    • ウ．scale=device
    • エ．width=device-width

    正解：エ．width=device-width

    解説：width=device-widthでビューポート幅を端末の画面幅に合わせる。

50. 問50．ユーザーによる拡大・縮小操作を禁止するviewportの記述はどれか。

    • ア．user-scalable=no
    • イ．zoom=no
    • ウ．scalable=false
    • エ．scale=fixed

    正解：ア．user-scalable=no

    解説：user-scalable=noでユーザーのズーム操作を無効化できる。

51. 問51．メディアクエリを記述するためのアットルールはどれか。

    • ア．@import
    • イ．@media
    • ウ．@screen
    • エ．@query

    正解：イ．@media

    解説：@mediaを使ってメディアクエリを記述する。

52. 問52．画面表示かつ幅が600px以下のときにスタイルを適用するメディアクエリとして正しいものはどれか。

    • ア．@media print and (max-width:600px)
    • イ．@media screen and (min-width:600px)
    • ウ．@media screen and (max-width:600px)
    • エ．@media all or (width:600px)

    正解：ウ．@media screen and (max-width:600px)

    解説：screen and (max-width:600px)で画面かつ幅600px以下に適用される。

53. 問53．印刷時に適用するスタイルを指定するメディアタイプはどれか。

    • ア．handheld
    • イ．screen
    • ウ．speech
    • エ．print

    正解：エ．print

    解説：printメディアタイプで印刷・印刷プレビュー時のスタイルを指定する。

54. 問54．縦長（高さが幅以上）の表示状態を表すメディア特性の値はどれか。

    • ア．orientation: portrait
    • イ．orientation: landscape
    • ウ．orientation: vertical
    • エ．orientation: column

    正解：ア．orientation: portrait

    解説：orientation:portraitが縦長表示を表す。

55. 問55．複数のメディア特性をすべて満たす場合に適用する論理演算子はどれか。

    • ア．, （カンマ）
    • イ．and
    • ウ．or
    • エ．not

    正解：イ．and

    解説：andは論理積で、結合した全条件を満たすときに適用される。

56. 問56．メディアクエリにおいてカンマ（,）が表す論理関係はどれか。

    • ア．論理積（AND）
    • イ．否定（NOT）
    • ウ．論理和（OR）
    • エ．排他的論理和（XOR）

    正解：ウ．論理和（OR）

    解説：カンマは論理和(OR)で、いずれかの条件を満たせば適用される。

57. 問57．メディアクエリ非対応の古いブラウザへの誤適用を防ぐために用いるキーワードはどれか。

    • ア．not
    • イ．and
    • ウ．all
    • エ．only

    正解：エ．only

    解説：onlyは古いブラウザの誤適用を防ぐためのキーワードである。

58. 問58．解像度を表すメディア特性として正しいものはどれか。

    • ア．resolution
    • イ．density
    • ウ．dpr
    • エ．sharpness

    正解：ア．resolution

    解説：resolutionがデバイスのピクセル密度を表すメディア特性である。

59. 問59．次の解像度単位のうち「1インチあたりのドット数」を表すものはどれか。

    • ア．dpcm
    • イ．dpi
    • ウ．dppx
    • エ．cpi

    正解：イ．dpi

    解説：dpiはdots per inchで1インチあたりのドット数を表す。

60. 問60．「1CSSピクセルあたりのドット数」を表し、1dppx＝96dpiに相当する解像度単位はどれか。

    • ア．dpi
    • イ．dpcm
    • ウ．dppx
    • エ．cm

    正解：ウ．dppx

    解説：dppxは1pxあたりのドット数で、1dppx＝96dpiに対応する。

61. 問61．img要素で複数の画像候補を解像度や幅とともに指定する属性はどれか。

    • ア．src
    • イ．sizes
    • ウ．media
    • エ．srcset

    正解：エ．srcset

    解説：srcsetが画像候補リストを解像度・幅とともに指定する属性である。

62. 問62．img要素で各表示条件における画像の表示サイズをブラウザに伝える属性はどれか。

    • ア．sizes
    • イ．src
    • ウ．alt
    • エ．width

    正解：ア．sizes

    解説：sizesは表示条件ごとの画像表示幅を示し、srcsetの選択を補助する。

63. 問63．srcsetでデバイスピクセル比に基づいて画像を切り替える記述子はどれか。

    • ア．w記述子
    • イ．x記述子
    • ウ．h記述子
    • エ．d記述子

    正解：イ．x記述子

    解説：x記述子(2x等)はデバイスピクセル比に応じて画像を切り替える。

64. 問64．iOSでホーム画面に追加した際のアイコンを指定するlinkのrel値はどれか。

    • ア．stylesheet
    • イ．shortcut icon
    • ウ．apple-touch-icon
    • エ．home-icon

    正解：ウ．apple-touch-icon

    解説：apple-touch-iconがホーム画面追加時のアイコンを指定するrel値である。

65. 問65．iOSが付ける光沢効果を適用させずにホーム画面アイコンを表示させるrel値はどれか。

    • ア．apple-touch-icon
    • イ．apple-icon-flat
    • ウ．icon-noeffect
    • エ．apple-touch-icon-precomposed

    正解：エ．apple-touch-icon-precomposed

    解説：apple-touch-icon-precomposedはOSによる光沢加工を無効化する。

66. 問66．iOSでホーム画面起動時にスタンドアロン表示を有効にするmetaのname値はどれか。

    • ア．apple-mobile-web-app-capable
    • イ．apple-standalone
    • ウ．apple-fullscreen
    • エ．web-app-mode

    正解：ア．apple-mobile-web-app-capable

    解説：apple-mobile-web-app-capableをyesにするとスタンドアロン表示になる。

67. 問67．電話番号へのリンクを作成する際に用いるURLスキームはどれか。

    • ア．phone:
    • イ．tel:
    • ウ．call:
    • エ．dial:

    正解：イ．tel:

    解説：tel:スキームで電話発信用のリンクを作成する。

68. 問68．script要素で、HTML解析完了後に記述順で実行させたい場合に付ける属性はどれか。

    • ア．async
    • イ．sync
    • ウ．defer
    • エ．blocking

    正解：ウ．defer

    解説：deferはHTML解析完了後に記述順でスクリプトを実行する。

69. 問69．script要素のasync属性に関する説明として正しいものはどれか。

    • ア．HTML解析完了後に必ず記述順で実行される
    • イ．インラインスクリプトでも実行順を制御できる
    • ウ．ダウンロード完了まで実行を必ず遅延し記述順を保つ
    • エ．非同期にダウンロードされ、完了次第すぐ実行され順序は保証されない

    正解：エ．非同期にダウンロードされ、完了次第すぐ実行され順序は保証されない

    解説：asyncは非同期DLし、完了次第実行、複数時の実行順は保証されない。

70. 問70．ブラウザのタブやブックマークに表示されるサイトアイコンの呼称はどれか。

    • ア．ファビコン
    • イ．サムネイル
    • ウ．スプライト
    • エ．ロゴマーク

    正解：ア．ファビコン

    解説：これらに表示される小さなアイコンをファビコンと呼ぶ。

71. 問71．複数の画像を1枚にまとめHTTPリクエストを減らす手法の名称はどれか。

    • ア．フルードイメージ
    • イ．CSSスプライト
    • ウ．レイジーロード
    • エ．画像マップ

    正解：イ．CSSスプライト

    解説：CSSスプライトは画像を1枚に統合しリクエスト数を削減する手法である。

72. 問72．ブラウザ間のデフォルトスタイル差をなくしつつ有用な既定値を残す手法はどれか。

    • ア．リセットCSS
    • イ．CSSスプライト
    • ウ．ノーマライズCSS
    • エ．インラインCSS

    正解：ウ．ノーマライズCSS

    解説：ノーマライズCSSは有用な既定値を残しつつブラウザ差を揃える。

73. 問73．ウィンドウ幅に応じてコンテンツ幅が%等で伸縮するレイアウトの呼称はどれか。

    • ア．固定レイアウト
    • イ．印刷レイアウト
    • ウ．グリッド固定レイアウト
    • エ．リキッドレイアウト

    正解：エ．リキッドレイアウト

    解説：リキッド(フルード)レイアウトは幅が相対値で伸縮するレイアウトである。

74. 問74．フルードグリッドでターゲット幅の%値を求める計算式として正しいものはどれか。

    • ア．対象幅 ÷ 親要素幅 × 100
    • イ．対象幅 × 親要素幅 ÷ 100
    • ウ．親要素幅 ÷ 対象幅 × 100
    • エ．対象幅 ÷ 100 × 親要素幅

    正解：ア．対象幅 ÷ 親要素幅 × 100

    解説：フルードグリッドは target ÷ context × 100(%)で求める。

75. 問75．viewportで縮小できる最小倍率を指定するプロパティはどれか。

    • ア．initial-scale
    • イ．minimum-scale
    • ウ．maximum-scale
    • エ．user-scalable

    正解：イ．minimum-scale

    解説：minimum-scaleはユーザーが縮小できる下限倍率を指定する。