• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル1 サンプル問題

1.4 レスポンシブウェブデザイン に関する問題

例題4.14 「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
CSSスプライトの特徴として正しくない説明を選択してください。
  • アイコンなどの複数の画像を1枚の画像に配置する
  • 使用する画像パーツをCSSで画像の座標とサイズを指定して表示させる
  • CSSスプライトの画像はキャッシュされることがない
  • 画像の読み込みが一度で完了するため、ページ表示の高速化につながる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

正解 C
アイコンなどの小さな画像は、HTTPで1ファイルごとにダウンロードされるため、数が多くなるとページの表示速度に影響を与えます。
そこで、小さな画像をまとめて1枚の画像に配置することで、まとめてダウンロードし、CSSの指定で表示する技法をCSSスプライトと呼びます。
1枚の画像に複数のアイコンが含まれるので、表示するためには工夫が必要です。
CSSのbackground-imageを使って画像を表示することになりますが、background-positionでまとめた画像のなかの位置を、widthとheightで切り出すサイズを指定します。

CSSスプライトのデメリットとしては、個別の画像を変更するたびにまとめた画像ファイルも変更が必要になる点と、CSSで表示位置とサイズを指定する手間が挙げられます。
現在では、複数の画像を与えると、自動的にまとめた画像とCSSのサンプルを作成してくれるツールもありますので有効活用すると良いでしょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

このページの先頭へ