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

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

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

例題4.12 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
フルードイメージ(Fluid Image)を実現するためのHTMLおよびCSSの記述として正しい組み合わせを選択してください。
  • img { max-width:100%; }
    <img src="images/sample.jpg">
  • img { max-height:100%; }
    <img src="images/sample.jpg">
  • img { max-width:100%; max-height:100% }
    <img src="images/sample.jpg">
  • img { max-width:100%; }
    <img src="images/sample.jpg" width="300" height="200">

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

正解 A
フルードイメージ(Fluid Image)は画像サイズをウインドウ幅に応じて変化させる手法です。
通常、imgタグにより表示された画像がウインドウ幅を越える幅、高さである場合、スクロールしないと全てを見ることができません。
フルードイメージでは、ウインドウ幅に合せて自動的に画像の表示幅、高さが調節されます。
フルードイメージを使用することで、レスポンシブWebデザインなどで、ウインドウ幅に合せた画像のレイアウトがおこなえます。
フルードイメージを実現するためには、
・imgタグにwidth,height属性を指定しない。
・対象となるHTML要素にCSSのmax-widthプロパティを使用して、ウインドウ幅に対するサイズを指定する。
の2点が必要になります。
width,height属性を指定すると、画面幅はウインドウ幅に応じて変化しますが、高さが変わらないため、画像の縦横比が変化してしまいます。
max-widthプロパティのかわりに、max-heightプロパティは使用できません。
実際にいくつかのWebブラウザで試してみると、ウインドウ幅に応じて高さが変化しないことが確認できます。

出題範囲の詳細

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

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

このページの先頭へ