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

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

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

例題4.6「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
ターゲットに高解像度なスマートフォンを含むWebサイトを作成する場合に、使用する画像について気をつけるべき点は何か。誤っているものを一つ選びなさい。
  • 2倍程度のサイズの高解像度画像を用意し、imgタグのwidth,heightの値を元の画像サイズに設定する
  • 背景画像の場合はdevicePixelRatioの値によってbackground-imageを切り替える
  • 低解像度のスマートフォン向けには負荷を減らすため低解像度の画像を使用する
  • 写真などの複雑な画像で無ければSVGやCSS3による画像を使用する
  • ファイル名に、'@2x'を追加した(例:img@2x.png)高解像度画像を用意すればデバイスにあわせて自動的に選択される

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

正解 E
高解像度なディスプレイを持つスマートフォンではPCや低解像度スマートフォン向けに用意した画像がぼやけたような感じになってしまうことがあります。
高解像度デバイスでは低解像度デバイスの1ピクセルあたり、1.5から2ピクセル以上で表示します。
このとき画像の拡大処理が行なわれますが、結果としてぼやけたようになってしまうことがあります。
選択肢のうち、対策として間違っているのは、E.のファイル名に'@2x'をつける、というものです。
これはiPhoneなどiOS向けのネイティブアプリを作成する場合の手法で、Webページでは効果がありません。
その他の選択肢については以下の通りです。
A.通常より高解像度なサイズの画像を作成しておき、imgタグやスタイルでwidth,heightに元のサイズを指定することで鮮明に表示されます。
B.background-imageであれば、メディアクエリでmin-device-pixel-ratioを使用し、devicePixelRatioが1なら低解像度、1.5以上なら高解像度の画像を使用するように、スタイルを二つ定義します。
C.低解像度なスマートフォンで高解像度の画像を表示すると負荷が高くなります。B.のような工夫をしたり、JavaScriptやPHPなどを使ってimgタグのsrcを切り替えます。
D.ベクトル形式であるSVGやCSS3による画像は解像度に関係なく鮮明に表示されます。画像の内容によってはSVG,CSS3を選択すると良いでしょう。

出題範囲の詳細

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

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

このページの先頭へ