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

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

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

   正解：○（正しい）

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

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

   正解：○（正しい）

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

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

   正解：○（正しい）

   解説：幅を%やvwなどの相対値で指定するため、ウィンドウ幅の変化に応じてコンテンツが伸び縮みする。pxで固定する固定レイアウトと違い、どの画面幅でも横スクロールが出にくい反面、極端に広い画面では1行が長くなりすぎるため、max-widthの併用が定石になる。

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にすると等倍で表示される。width=device-widthと組み合わせて指定するのが基本形で、これがないとスマートフォンがPC向けの広い仮想幅で描画し、全体が縮小表示されてしまう。

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の解析と並行して行われ、実行は解析が終わってから記述順に行われる。DOMが完成した後に動くので要素の取得に失敗せず、複数のスクリプトの依存関係も保たれる。head内に書いても描画をブロックしない点が利点。

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

    正解：○（正しい）

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

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

    正解：○（正しい）

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

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

    正解：○（正しい）

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

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

    正解：○（正しい）

    解説：メディアタイプallはすべての出力先を対象とし、指定を省略した場合の既定値でもある。ほかにscreen（画面）、print（印刷）、speech（読み上げ）があり、かつて存在したhandheldやttyなどは廃止された。

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記述子は画像の実際の横幅をピクセル数で示すもので、ファイルサイズではない。ブラウザはこの値とsizes属性が示す表示幅、さらにデバイスピクセル比を突き合わせて最適な画像を選ぶ。

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）で、区切られた条件のいずれかを満たせば適用される。すべての条件を満たすことを求める論理積（AND）はandキーワードで表す。

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として解釈される。

    正解：×（誤り）

    解説：誤り。メディアクエリの長さ値には単位が必須で、min-width: 600 のように単位を省くと条件全体が無効になる（0のみ例外）。CSSの宣言部では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．スマートフォン等で表示領域をデバイスの画面幅に合わせるために指定するmeta要素のname属性の値はどれか。

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

    正解：イ．viewport

    解説：<meta name="viewport" content="width=device-width, initial-scale=1"> のように、name属性にviewportを指定する。これがないとスマートフォンはPC向けの広い仮想幅（980px程度）で描画してページ全体を縮小表示してしまい、メディアクエリも意図どおりに働かない。

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

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

    正解：ウ．initial-scale=1

    解説：initial-scale=1で初期表示倍率が等倍になる。minimum-scale・maximum-scaleは利用者が縮小・拡大できる下限と上限、user-scalableはズーム操作の可否を指定するもので、いずれも初期倍率そのものを決めるものではない。

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

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

    正解：エ．width=device-width

    解説：width=device-widthでビューポートの幅を端末の画面幅に合わせる。これを指定しないとPC向けの広い仮想幅で描画され、メディアクエリのmin-width/max-widthも実機の幅と食い違ってしまう。initial-scale=1とセットで書くのが基本。

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がメディアクエリを記述するためのアットルール。@importは外部スタイルシートの読み込み、@screenや@queryというアットルールは存在しない。@media (min-width: 768px) { ... } のように条件と適用規則を書く。

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メディアタイプは印刷時と印刷プレビュー時に適用される。ナビゲーションや広告を非表示にする、背景色を落とす、リンクのURLを::afterで併記するといった調整に使う。screenは画面表示、speechは音声読み上げが対象。

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

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

    正解：ア．orientation: portrait

    解説：orientationは表示領域の向きを表すメディア特性で、高さが幅以上ならportrait（縦長）、幅が高さより大きければlandscape（横長）。verticalやcolumnという値は定義されていない。端末の物理的な向きではなくビューポートの縦横比で判定される点に注意。

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

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

    正解：イ．and

    解説：andは論理積で、結んだすべての条件を満たすときだけ適用される。(min-width:768px) and (max-width:1024px) のように範囲を絞る使い方が典型。カンマは論理和、notは否定を表す。

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

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

    正解：ウ．論理和（OR）

    解説：カンマは論理和（OR）で、区切られた条件のいずれかを満たせば適用される。print, screen のように異なるメディアへ同じスタイルを当てたい場合に使う。すべてを満たす必要があるANDはandキーワードで表す。

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

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

    正解：エ．only

    解説：onlyはメディアクエリに対応していない古いブラウザにスタイルを誤って適用させないためのキーワード。古いブラウザはonlyを未知のメディアタイプとみなして規則全体を無視するので、意図しない適用を防げる。現在のブラウザは対応済みのため実質的には無害な記述となる。

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

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

    正解：ア．resolution

    解説：resolutionは出力デバイスのピクセル密度を表すメディア特性で、dpi・dpcm・dppxといった単位を伴って指定する。高精細ディスプレイ向けに画像やアイコンを切り替える用途に使う。density・dpr・sharpnessというメディア特性は存在しない。

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

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

    正解：イ．dpi

    解説：dpiはdots per inchの略で、1インチあたりのドット数を表す。dpcmは1センチメートルあたり、dppxは1CSSピクセルあたりのドット数を表す単位で、cpiという解像度単位はない。

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

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

    正解：ウ．dppx

    解説：dppxはdots per pxで、1CSSピクセルあたりの物理ドット数を表す。CSSでは1インチ＝96pxと定義されているため1dppx＝96dpiに対応し、いわゆる2倍解像度ディスプレイは2dppx（＝192dpi）となる。デバイスピクセル比と直接対応するため扱いやすい。

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

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

    正解：エ．srcset

    解説：srcsetは画像候補を「ファイル名＋記述子」の形で列挙する属性。w記述子なら各画像の実際の横幅、x記述子ならデバイスピクセル比を示し、ブラウザが環境に応じて最適な1枚を選ぶ。sizesは表示幅の情報を補う属性、srcは単一の画像を指定する従来の属性。

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

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

    正解：ア．sizes

    解説：sizesはメディア条件ごとに「その画像が何px幅で表示されるか」をブラウザへ伝える属性。srcsetをw記述子で書く場合、ブラウザはこの表示幅とデバイスピクセル比を掛け合わせて必要な解像度を求め、候補の中から適切な画像を選ぶ。src・alt・widthはこの選択には関与しない。

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

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

    正解：イ．x記述子

    解説：x記述子は 2x のようにデバイスピクセル比を示し、高精細ディスプレイでは2x、通常のディスプレイでは1xの画像が選ばれる。表示幅が固定の画像に向く。表示幅が可変ならw記述子とsizesを組み合わせるほうが適切。

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:スキームを使い <a href="tel:0312345678">と書くと、スマートフォンでタップしたときに電話発信の操作につながる。同様にメールはmailto:、SMSはsms:スキームを使う。phone:やcall:といったスキームは定義されていない。

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

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

    正解：ウ．defer

    解説：deferはHTMLの解析と並行して取得し、解析完了後に記述順で実行する。DOMが完成してから動くうえ順序も保たれるため、依存関係のある複数のスクリプトに向く。asyncは取得完了次第すぐ実行されるので順序が保証されない。

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

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

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

    解説：asyncはHTMLの解析と並行してスクリプトを取得し、取得が終わった時点で解析を中断して即座に実行する。したがって複数指定した場合の実行順は取得の速さ次第で保証されず、他のスクリプトに依存しないアクセス解析タグなどに向く。順序を保ちたい場合はdeferを使う。

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

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

    正解：ア．ファビコン

    解説：ファビコン（favicon＝favorite icon）は、ブラウザのタブやブックマーク、履歴一覧などに表示されるサイトの小さなアイコン。<link rel="icon" href="..."> で指定し、複数サイズを用意しておくと表示先に応じて使い分けられる。

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

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

    正解：イ．CSSスプライト

    解説：CSSスプライトは、アイコンなど小さな画像を1枚の画像にまとめ、background-positionで表示位置をずらして必要な部分だけを見せる手法。画像ごとにHTTPリクエストが発生するのを避けて表示を速くする狙いがある。HTTP/2の多重化やSVGアイコンの普及で必要性は下がっている。

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

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

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

    解説：ノーマライズCSSは、ブラウザ間で異なる既定スタイルを揃えつつ、見出しの大きさなど有用な既定値は残す方針を取る。すべての既定値を一律にゼロにするリセットCSSと違い、必要なスタイルを一から書き直す手間が少ない点が特徴。

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

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

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

    解説：リキッド（フルード）レイアウトは幅を%などの相対値で指定するため、ウィンドウ幅に応じてコンテンツが伸縮する。pxで固定する固定レイアウトと異なり、狭い画面でも横スクロールが出にくいが、広すぎる画面では行長が伸びすぎるためmax-widthの併用が定石。

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

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

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

    解説：フルードグリッドでは「目標とする幅 ÷ 親要素（コンテキスト）の幅 × 100」で%値を求める。たとえば960px幅の中で300pxの列を作るなら 300÷960×100＝31.25% となる。親を基準に割合を出すという考え方が要点。

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

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

    正解：イ．minimum-scale

    解説：minimum-scaleは利用者が縮小できる下限の倍率を指定する。initial-scaleは読み込み時の初期倍率、maximum-scaleは拡大の上限、user-scalableはズーム操作そのものの可否を指定するもので、それぞれ役割が異なる。