例題4.23 「1.4.3 スマートフォンサイト最適化」

レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
HTMLで次のように画像を指定している場合、「C.jpg」が表示されるのはどのような条件のときか。該当する選択肢をすべて選びなさい。

<picture>
 <source media="(max-width: 500px)" srcset="A.jpg, B.jpg 2x">
  <img src="C.jpg" srcset="D.jpg 2x" alt="">
</picture>

• ビューポートの幅が500px以下でピクセル密度が1倍の環境
• ビューポートの幅が500px以下でピクセル密度が2倍の環境
• ビューポートの幅が500pxより大きくピクセル密度が1倍の環境
• ビューポートの幅が500pxより大きくピクセル密度が2倍の環境
• picture要素とsrcset属性に未対応の古いブラウザで閲覧した場合

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年1月8日

答えはこちら

例題4.22 「1.4.2 メディアクエリ」

レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
次の属性のうち、値にメディアクエリを記入できないものをすべて選びなさい。

• style属性
• link要素のmedia属性
• style要素のmedia属性
• img要素のsizes属性
• source要素のsizes属性

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年12月4日

答えはこちら

例題4.21 「1.4.1 マルチデバイス対応ページの作成」

レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
img要素のsizes属性などでも使用可能なCSSの単位「vw」に関する説明として正しいものを1つ選びなさい。

• ビューポートの幅を1とする単位である
• ビューポートの幅の1%を1とする単位である
• ビューポートの幅と高さのうち短い方を1とする単位である
• ビューポートの幅と高さのうち長い方を1とする単位である
• ビューポートの幅と高さのうち長い方の1%を1とする単位である

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年11月6日

答えはこちら

例題4.20 「1.4.3 スマートフォンサイト最適化」

レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
次のmeta要素のうち、アクセシビリティやユーザビリティ上の問題が発生することがあるため、通常は指定すべきではないとされているものはどれか。該当する選択肢をすべて選びなさい。

• <meta name="viewport" content="initial-scale=1.0">
• <meta name="viewport" content="maximum-scale=1.0">
• <meta name="viewport" content="user-scalable=no">
• <meta name="viewport" content="user-scalable=yes">
• <meta name="viewport" content="width=device-width">

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年6月4日

答えはこちら

例題4.19 「1.4.2 メディアクエリ」

レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
次のメディアクエリの構文のうち文法的に正しいものをすべて選びなさい。

• @media { ... }
• @media all { ... }
• @media (min-width: 500px) { ... }
• @media all and (min-width: 500px) { ... }
• @media (min-width: 500px) and (max-width: 800px) { ... }

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年5月21日

答えはこちら

例題4.18 「1.4.1 マルチデバイス対応ページの作成」

レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
img要素とsource要素に指定可能なsrcset属性の「ピクセル密度記述子（pixel density descriptor）」に関する説明として間違っているものをすべて選びなさい。

• 数値の直後に小文字の「x」をつけて指定する
• 数値の直後に大文字小文字は関係なく「x」または「X」をつけて指定する
• 指定可能な数値は「正の整数」のみである
• 指定可能な数値は「0より大きな浮動小数点数」である
• この記述子を省略した場合のデフォルト値は定義されていない

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年5月8日

答えはこちら

例題4.17 「1.4.2 メディアクエリ」

レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリのメディアタイプとメディア特性の指定方法として間違っているのは次のうちどれか。

• @media print and (max-width:600px) { . . . }
• @media screen and (min-color:1) { . . . }
• @media all and (orientation:vertical) { . . . }
• @media screen and (min-resolution:600dpcm) { . . . }
• @media tv and (aspect-ratio:4/3) { . . . }

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年8月21日

答えはこちら

例題4.16 「1.4.3 スマートフォンサイト最適化」

レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
スマートフォンのブラウザではスマートフォンの機能を活かすための拡張、例えば数字列を自動的に電話番号として検出しリンクに変換する機能があるが、下記はその機能を無効にする指定である。空欄に入るのは何か。

        
<meta name="________" content=“telephone=no” />
        
        

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年7月17日

答えはこちら

例題4.15 「1.4.3 スマートフォンサイト最適化」

レベル1の出題範囲「1.4.3 スマートフォンサイト最適化」からの出題です。
ブラウザのブックマークやタブに表示するアイコンの設定として正しいものを２つ選びなさい。

• <link rel="icon" href="/favicon.png">
• <link rel="android-touch-icon" href="/favicon.png">
• <link rel="apple-touch-icon" href="/favicon.png">
• <link rel="apple-touch-icon-precomposed" href="/favicon.png">
• <link rel="shortcut icon" href="/favicon.png">

※この例題は実際の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 メディアクエリ」からの出題です。
メディアクエリの記述として、間違っているものを１つ選びなさい。

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