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

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

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

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

例題4.15 「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
スマートフォンのスタンドアローンモードの説明として、正しいものをすべて選びなさい。
  • スマートフォンの電源を自動的にON/OFFさせる機能のこと
  • Webアプリケーションを単体のアプリのように起動させることが出来る機能のこと
  • あらかじめ指定したWebサイトの情報を自動的に定期収集する機能のこと
  • iOS端末のみの機能で、Android端末では利用できない
  • Android端末のみの機能で、iOS端末では利用できない

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

答えはこちら

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

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

答えはこちら

例題4.13 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
フルードグリッドの特徴として正しくないものを選択してください。
  • グリッド幅、グリッドの数をウインドウ幅に合せて変更する
  • メディアクエリーを使用してCSSを切り替える
  • グリッド幅を相対値で指定する
  • 画像の大きさをウインドウ幅に合せて変更する
  • かならずしもJavaScriptを必要としない

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

答えはこちら

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

例題4.11 「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
次のようなHTMLとCSSの組み合わせがある場合に、後述する設問に解答しなさい。
【HTML】 <body> <div id="wrap">sample</div> </body> 【CSS】 body, div { margin: 0; padding: 0; } ‪#‎wrap‬ { background-color: ‪#‎FF0000‬; width: 100vmin; height: 100vmin; } @media screen and (max-width: 1024px) and (orientation:landscape) { #wrap { width: 100vmax; height: 100vmin; } } @media screen and (max-width: 480px) and (orientation:portrait) { #wrap { width: 100vmin; height: 100vmax; } }
Webブラウザで表示した際の動作に関する記述で、間違っているものを次の選択肢から1つ選びなさい。
  • Webブラウザの表示領域の幅が400ピクセルのとき、表示領域が縦長でも横長でも背景色は全面赤色で表示される。
  • Webブラウザの表示領域が幅800ピクセル、高さ600ピクセルのとき、div要素は表示領域より幅が大きくなる。
  • Webブラウザの表示領域が幅800ピクセル、高さ1,200ピクセルのとき、下部に400ピクセルの余白ができる。
  • Webブラウザの表示領域が幅1,200ピクセル、高さ1,400ピクセルのとき、下部に200ピクセルの余白ができる。

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

答えはこちら

例題4.10 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
今後の仕様化が検討されているpicture要素についての記述で不適切なものを1つ選びなさい。なお本問題の仕様はHTML 5.1 2015年10月8日ワーキングドラフトに基づくものとする。
  • picture要素ではsource要素、img要素を組み合わせて、表示領域のサイズに応じて複数の画像を指定できる。
  • source要素ではmedia属性でメディアクエリ(Media Queries)を指定できる。
  • picture要素には指定が必須の属性は無い。
  • source要素の属性はグローバル属性を除くとsrcset属性、sizes属性、media属性、type属性の4つがある。
  • img要素でもsrcset属性やsize属性が利用できるが、srcset属性を指定した場合src属性は指定してはいけない。

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

答えはこちら

例題4.9 「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
HTML外部のjavascriptファイルを読み込む際に、非同期で読み込みをおこないWebページのレンダリングをブロックさせない属性を選択してください。
  • non-block
  • defer
  • async
  • sync
  • lazy

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

答えはこちら

例題4.8「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリで使用出来る解像度の単位として誤っているものを2つ選択してください。
  • dpo
  • dpi
  • dpm
  • dpcm
  • dppx

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

答えはこちら

例題4.7「1.4.1マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1マルチデバイス対応ページの作成」からの出題です。
デバイスの画面幅に合せて表示領域を指定する場合に設定するviewportのcontent属性を選択してください。
  • content="device-width"
  • content="width=device-portrait"
  • content="width=device-horizontal"
  • content="width"
  • content="width=device-width"

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

答えはこちら

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

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

答えはこちら

例題4.5「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリを利用して、表示領域の幅に応じて3段階に背景色を切り替える仕組みを作成する。仕様は幅768ピクセル未満は赤、幅768ピクセル縲鰀1024ピクセルは緑、それより大きい場合は青とする。
以下のCSSで、1、2それぞれに入れる指定で適切なものを選択しなさい。
body { background-color: red; } @media screen and (   1   ){ body { background-color: green; } } @media screen and (   2   ){ body { background-color: blue; } }
  • 1:min-width:768px、2:max-width:1024px
  • 1:max-width:768px、2:min-width:1024px
  • 1:min-width:768px、2:min-width:1025px
  • 1:max-width:1024px、2:max-width:767px

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

答えはこちら

例題4.4「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリの記述として、間違っているものを1つ選びなさい。
  • @media screen and (color) { ... }
  • @media screen or (color) { ... }
  • @media screen and (color), projection and (color) { ... }
  • @media not screen and (color) { ... }
  • @media only screen and (color) { ... }

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

答えはこちら

例題4.3 「1.4.3 スマートフォンサイト最適化」
レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
スマートフォンでホーム画面にWebページへのリンクを作成する場合に、アイコンとして使用される画像を指定するrel属性を二つ選びなさい。
  • apple-touch-icon
  • touch-icon
  • apple-touch-icon-precomposed
  • touch-icon-precomposed

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

答えはこちら

例題4.2「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの例題を解説します。
CSS3におけるMedia Queries(メディアクエリ)に関して以下のような記述がある場合、中に記述しているbody要素に関するスタイルシートが適用される条件として正しいものを1つ選びなさい。
@media screen and (max-width :640px) { body { background-color: blue; margin: 30px; } }
  • 端末における画面解像度の幅が、640px以上の時に適用される。
  • 端末における画面解像度の幅が、640px以下の時に適用される。
  • ビューポート(ブラウザの表示領域)の幅が、640px以上の時に適用される。
  • ビューポート(ブラウザの表示領域)の幅が、640px以下の時に適用される。
  • 環境に関わらず、いかなる条件下でも適用されない。

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

答えはこちら

例題4.1「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの例題を解説します。
Luke Wroblewski氏が提唱した「Mobile First(モバイルファースト)」の説明として正しいものを選びなさい。
  • HTML5をモバイルデバイスで高速に動作させるために考えられたアーキテクチャである。
  • モバイルデバイスの種類や画面サイズに合わせて、それぞれ専用のWebコンテンツを作るという考え方である。
  • モバイルデバイスでの表示を考えて、サイズなどをピクセル数ではなく%などの可変サイズで指定をするレイアウト手法の事である。
  • クライアントのデバイスがPCなのかモバイルデバイスか判別が付かない場合に、モバイルデバイス用のページを表示させるという考え方である。
  • マルチデバイス対応サイトにおいて、制約が多いモバイルサイトでの利用を優先的に設計・制作という考え方である。

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

答えはこちら

このページの先頭へ