Webクリエイター能力認定試験の全問題一覧
エキスパート：知識問題（Webサイトに関する知識）
- あるレスポンシブ対応のWebサイトをスマートフォンで閲覧したところ、PC表示と同じ幅でレイアウトが表示され、横スクロールが発生してしまった。この現象の原因として最も考えられるものはどれか。
- body要素のfont-sizeが20pxに設定されたページで、その子要素であるdiv要素にfont-size: 1.5emを指定し、さらにそのdivの子要素であるspan要素にもfont-size: 1.5emを指定した場合、span要素の文字サイズは何pxになるか。
- 実際のWeb制作現場で一般的に行われるワークフローにおいて、ワイヤーフレームを作成した直後に行う工程として最も適切なものはどれか。
- あるページのある要素にem単位でfont-sizeを指定したところ、親要素のfont-sizeを変更した際に連動して表示サイズが変化した。同じ要素にrem単位で指定した場合の挙動として正しいものはどれか。
- あるWebページに、内容の伝達には関与しない純粋な装飾目的の画像を挿入する。スクリーンリーダー利用者への配慮を考慮した場合、最も適切なマークアップはどれか。
- ビューポート幅が1000pxのブラウザで、ある要素にwidth: 40vwを指定した場合、その要素の実際の表示幅は何pxになるか。
- モバイルファーストの考え方に基づいてレスポンシブWebデザインのCSSを記述する場合、最も適切な手順はどれか。
- Webサイトのロゴマークを、スマートフォンから高解像度ディスプレイまで様々な画面で鮮明に表示させたい。この目的に最も適した画像形式とその理由の組み合わせはどれか。
- CSSにおける「メディアクエリ」の説明として最も適切なものはどれか。
- あるWebページで、ユーザーがボタンをクリックするたびにナビゲーションメニューの表示・非表示を切り替える動きを実装したい。この要求を満たす実装方法として最も適切なものはどれか。
- あるページで、親要素であるdivにposition: relativeを指定し、その直下の子要素であるspan要素にposition: absolute; top: 0; left: 0;を指定した。このspan要素の配置位置の基準となる要素はどれか。
- ある要素にwidth: 200px; padding: 10px; border: 5px solid #000; box-sizing: content-box;を指定した。この要素の実際の表示幅（border外側までの幅）は何pxになるか。
- Web制作の実務において、完成したデザインカンプをもとにコーディングを進める際、画像素材を準備する作業手順として最も適切なものはどれか。
- HTML5における「セマンティックなマークアップ」の説明として最も適切なものはどれか。
- 会員登録フォームのメールアドレス入力欄において、入力値がメールアドレスの形式かどうかをブラウザの標準機能で自動的にチェックさせたい。この場合、input要素のtype属性に指定すべき値として最も適切なものはどれか。
- 同一のp要素に対して、idセレクタとclassセレクタでそれぞれ異なるcolorの値が指定されている場合、実際にブラウザで適用される値の説明として正しいものはどれか。
- あるWebサイトで、背景色とテキストの色の明度差が小さく、視覚的に読みにくいという指摘を受けた。アクセシビリティの観点からこの問題を改善する対応として最も適切なものはどれか。
- font-size: 16pxが指定された要素にline-height: 1.5を指定した場合、この要素の1行の高さは何pxになるか。
- コーディングが完了したWebページを公開する前の最終確認として、マルチブラウザー対応を踏まえた場合に最も重要な作業はどれか。
- 画面幅に応じて、単なる拡大縮小ではなく、構図やトリミングの異なる複数の画像ファイルを出し分けたい場合に用いる、最も適切なHTML要素の組み合わせはどれか。
エキスパート：実技問題（HTML作成、CSS読込と作成、画像の表示、JavaScriptの読込、レスポンシブWebデザイン対応）
- あるWebページで、img要素にwidth属性とheight属性を指定せずに画像を配置したところ、画像の読み込み完了後にページ全体のレイアウトが大きくずれる現象が発生した。この問題を改善する対応として最も適切なものはどれか。
- レスポンシブWebデザインのCSSに、次の2つのメディアクエリをこの順序で記述した。「@media (min-width: 600px) { .box { color: blue; } }」「@media (min-width: 900px) { .box { color: red; } }」画面幅1200pxのブラウザで閲覧した場合、.box要素の文字色として正しいものはどれか。
- あるHTML文書のhead内で<script src="main.js"></script>のように通常の方法でJavaScriptファイルを読み込み、main.js内でdocument.getElementById("btn")によりDOM要素を取得する処理を記述したところ、要素の取得に失敗しnullが返るエラーが発生した。この原因として最も考えられるものはどれか。
- 幅900pxのflexコンテナ内に幅0pxのアイテムA、B、Cが並んでおり、それぞれにflex-growが1、2、3と指定されている。flex-shrinkとflex-basisの影響を考慮せず、コンテナの余白をすべてflex-growの比率で分配する場合、アイテムBの幅は何pxになるか。
- 幅800pxのdiv要素の内側にwidth: 25%を指定した子要素を配置し、さらにその子要素の内側にwidth: 50%を指定した孫要素を配置した（親のpadding・borderは0とする）。この孫要素の実際の幅は何pxになるか。
- HTML文書にCSSファイルとJavaScriptファイルを読み込ませる場合、一般的に推奨される記述位置の組み合わせとして最も適切なものはどれか。
- script要素にdefer属性を指定してJavaScriptファイルを読み込んだ場合の動作として正しいものはどれか。
- CSSのdisplay: noneとvisibility: hiddenの違いに関する説明として正しいものはどれか。
- CSSのposition: fixedとposition: stickyの違いに関する説明として最も適切なものはどれか。
- 商品写真など、ページの内容理解に必要な意味を持つ画像をimg要素で表示する場合、alt属性の記述として最も適切なものはどれか。
- HTML文書内でJavaScriptファイルを外部読込する際に指定するasync属性とdefer属性の違いに関する説明として正しいものはどれか。
- あるWebページのhead要素内にviewportメタタグの記述が無かったため、スマートフォンで閲覧すると文字が非常に小さく表示され、PC向けの幅でレイアウトが表示されてしまった。この問題を解決するために追加すべき記述として最も適切なものはどれか。
- 縦横比が異なる複数の商品画像を、img要素を使って同一サイズの正方形の枠内にトリミングし隙間なく表示したい。この場合にCSSで指定すべきプロパティとして最も適切なものはどれか。
- レスポンシブ対応のページで、画面幅によって構図の異なる画像を出し分けるためにpicture要素を使用する場合の正しい記述手順はどれか。
- 幅400pxのグリッドコンテナにgrid-template-columns: 1fr 2fr 1fr;を指定した（gapとpaddingは0とする）。このとき2番目のカラムの幅は何pxになるか。
- Webページに画像を配置する際、CSSのbackground-imageプロパティを使う場合とHTMLのimg要素を使う場合の使い分けに関する説明として正しいものはどれか。
- ページ下部に大量の商品画像を配置しているECサイトで、初回表示時のページ読み込み速度を改善したい。この目的でimg要素に付与する属性として最も適切なものはどれか。
- レスポンシブWebデザインでブレークポイントを設計する一般的な手順として最も適切なものはどれか。
- 幅500pxの親要素の内側に、width: calc(100% - 100px);を指定した子要素を配置した（親のpadding・borderは0とする）。この子要素の幅は何pxになるか。
- Webページで使用する画像形式としてのSVGの特徴に関する説明として正しいものはどれか。
スタンダード：実技問題（HTML5の変換、HTMLの作成、CSSの読込と作成、画像の表示）
- あるコーポレートサイトのヘッダー内に、サイト内の主要ページへのリンク一覧であるグローバルナビゲーションメニューをマークアップする。HTML5のセマンティックな要素として最も適切なものはどれか。
- 複数のdiv要素を横並びに配置する場合、floatプロパティを用いる方法とdisplay: flexを用いる方法の違いに関する説明として最も適切なものはどれか。
- 新規に作成したHTML文書に、別ファイルとして用意した外部CSSファイル「style.css」を読み込ませる場合の正しい記述方法はどれか。
- 会員登録フォームのメールアドレス入力欄を必須項目とし、未入力のまま送信ボタンが押された場合にブラウザの標準機能でエラーメッセージを表示させ送信を中止させたい。この場合にinput要素へ指定すべき属性として最も適切なものはどれか。
- CSSのセレクタ詳細度を、id選択子1個につき100点、class選択子1個につき10点、要素選択子1個につき1点として計算する場合、セレクタ「div#content p.text」の詳細度の合計点数はどれか。
- 多数の色のグラデーションを含む風景写真を、なるべくファイルサイズを抑えつつ画質の劣化を少なく表示したい場合に、最も適した画像形式はどれか。
- HTML文書内でimg要素のsrc属性に画像ファイルのパスを指定する際、「相対パス」と「絶対パス（サイトルートからのパス）」の違いに関する説明として最も適切なものはどれか。
- HTML4.01で作成された既存のWebページをHTML5へ変換する作業を行っている。文書の先頭にあった「<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">」という記述を、HTML5の文書型宣言に書き換える場合、正しい記述はどれか。
- 表形式のデータをHTMLでマークアップする際の要素の親子関係として正しいものはどれか。
- ある要素にwidth: 300px; padding: 20px; border: 10px solid #000; box-sizing: border-box;を指定した。この要素のコンテンツ領域（padding・borderを含まない実際のコンテンツ幅）は何pxになるか。
- あるWebページで、文章の内容上重要な意味を持たせる必要はないが、他の語句と視覚的に区別するために太字にしたい箇所と、文章の内容上重要であることを示したい箇所がある。HTML5におけるstrong要素とb要素の使い分けに関する説明として正しいものはどれか。
- あるコーポレートサイトのページ構造をマークアップする際、そのページ固有のメインコンテンツ（ヘッダー・フッター・サイドバーのナビゲーションを除く部分）を示したい。この場合に使用するHTML5の要素とその使用上の注意点として最も適切なものはどれか。
- HTML4.01 Strictで作成された既存のWebページに「<center><p>お知らせ</p></center>」という記述があった。このページをHTML5へ変換する際の対応として最も適切なものはどれか。
- 通常の文書の流れ（floatやflexを使用しない）の中で縦に並んだ2つのブロック要素があり、上の要素にmargin-bottom: 30px、下の要素にmargin-top: 20pxが指定されている。この2つの要素間に実際に生じる余白は何pxになるか。
- CSSのdisplayプロパティにおけるblock要素とinline要素の違いに関する説明として正しいものはどれか。
- 会員登録フォームで、テキストラベル「氏名」をクリックした際に対応するテキスト入力欄へ自動的にフォーカスが移動するようにしたい。この動作を実現するための正しいマークアップはどれか。
- 記事本文中に挿入する写真や図表について、その内容を説明するキャプション文を画像と意味的に関連付けてマークアップしたい場合、最も適切な要素の組み合わせはどれか。
- 新規にHTML5文書をゼロから作成する場合の記述順序として正しいものはどれか。
- 元の画像サイズが幅1200px、高さ800pxの画像をimg要素で表示する際、HTML側でwidth属性に300を指定し、CSSでheight: autoを指定した（他にサイズ指定は無い）。このとき実際に表示される画像の高さは何pxになるか。