【H29第5回】ウェブデザイン技能検定2級過去問

第15問: HTTPステータスコードのうち、「503 Service Unavailable」はリソースへのアクセスが拒否されたことを示している

答え: 2(誤り)。503は、サーバが一時的に過負荷やメンテナンス中で応答できない状態を示すコードです。「アクセス拒否」を示すのは403です。

2. 選択問題

第16問: VDT作業を行う上で留意すべき事項として、不適切なものはどれか

• ①ディスプレイとの視距離は概ね40cm以上を確保し、必要に応じて適切な眼鏡による矯正を行う
• ②ディスプレイの画面上端が、目の高さとほぼ同じか、上になる高さにすることが望ましい
• ③ディスプレイ画面上の適切な照度を保つこと(500ルクス以下)
• ④表示する文字の大きさは、文字高さが概ね3mm以上とすることが望ましい

答え: ②。実際のガイドラインでは、ディスプレイの上端は「目の高さと同じか、やや下になる高さ」が望ましいとされています(画面をやや見下ろす姿勢が推奨されます)。「上になる高さ」という記述は不適切です。①③④はいずれも適切な内容です。

第17問: W3Cが勧告している数式を表示するためのマークアップ言語はどれか

• ①LaTeX
• ②MathML
• ③tgmath.h
• ④Markdown

答え: ②。数式を表現するためのマークアップ言語で、W3C勧告となっているのはMathMLです。

第18問: SEOポイズニングの説明として適切なものはどれか

• ①コメント欄に無関係な広告を無差別に大量投稿する
• ②検索エンジン最適化を悪用して不正プログラムを埋め込んだ悪意あるサイトを検索結果の上位に表示し、誘導する
• ③第三者のブログに無関係なトラックバックを送信して自分のブログに誘導する
• ④不自然なリンクを大量に張って検索結果の表示順位を上げようとする状態

答え: ②。SEOの手法を悪用し、不正プログラムを仕込んだ悪意あるサイトを検索結果の上位に表示させて利用者を誘導する手口が「SEOポイズニング」です。

第19問: 次のPHPコードを実行させた場合に出力されるものはどれか

• ①Shin¥’ichi
• ②Shin'ichi
• ③Shin'ichi
• ④Shin’ichi

答え: ④。htmlspecialchars()は、フラグを指定しないデフォルトの状態では、シングルクォート(')を変換しません(ダブルクォートは変換されます)。そのため、シングルクォートはそのまま出力され、Shin'ichiとなります。

第20問: HTML5において使用できない要素はどれか

• ①data要素
• ②date要素
• ③time要素
• ④mark要素

答え: ②。HTML5に「date要素」という名前の要素は存在しません。日付を表すにはtime要素を使います。①③④はいずれもHTML5に実在する要素です。

第21問: ターゲットユーザになったつもりでサイトを操作し、問題点を指摘するユーザビリティの評価手法は何か

• ①ユーザビリティテスト
• ②クラウドソーシング
• ③ヒューリスティック評価
• ④認知的ウォークスルー

答え: ④。評価者がユーザの視点で実際のタスクを模擬的に実行しながら問題点を発見するのが「認知的ウォークスルー」です。

第22問: CSSのボックスモデルにおいて、背景画像よりも上に表示されないものはどれか

• ①ボーダー
• ②背景色
• ③要素内容
• ④ボーダーと要素内容

答え: ②。ボックスモデルの重なり順は、下から「背景色→背景画像→ボーダー→要素内容」です。背景色だけが背景画像より下(背面)に描画され、ボーダーと要素内容は背景画像より上(手前)に表示されます。

第23問: ウェブデザインにおけるパララックスの手法として適切なものはどれか

• ①スクロールに合わせてページ内の要素にエフェクトなどを加える
• ②スクロールの速度を任意に変える
• ③画面を固定してスクロールさせない
• ④画面を横にスクロールさせる

答え: ①。パララックス(視差効果)は、スクロールに応じてページ内の要素に動きや変化のエフェクトを加える演出手法の総称です。

第24問: font-familyプロパティの記述法として適切なものはどれか

• ①p {font-family: “MS ゴシック”,”sans-serif”; }
• ②p {font-family: “MS ゴシック”,sans-serif; }
• ③p {font-family: MS ゴシック,sans-serif; }
• ④p {font-family: MS ゴシック,”sans-serif”; }

答え: ②。空白を含むフォント名(「MS ゴシック」)はクォートで囲み、sans-serifのような総称フォントファミリーのキーワードはクォートなしで書くのが正しい書式です。①はキーワードにもクォートを付けてしまっており、③はスペースを含む名前にクォートがなく複数の値と誤解釈されるおそれがあり、④は逆の組合せで誤りです。

第25問: ul要素からid=”child”のli要素を削除したい。[A]に記述するコードとして不適切なものはどれか

• ①child.parentNode.removeChild(child)
• ②child.remove()
• ③parent.remove(child)
• ④parent.removeChild(child)

答え: ③。Element.remove()は引数を取らず、呼び出した要素自身を削除するメソッドです。parent.remove(child)のように削除したい子要素を引数として渡す使い方はできません。①②④はいずれも正しく動作するコードです。

第26問: UNIXサーバでファイルのパーミッションを3桁の数字で設定する場合、百の位に該当するユーザはどれか

• ①所有者(オーナー)
• ②グループ
• ③匿名ユーザ
• ④一般ユーザ

答え: ①。パーミッションの3桁は「所有者・グループ・その他」の順で、百・十・一の位に対応します。

第27問: ユーザがとる一連の行動や思考、感情の起伏などを図式化したものを何というか

• ①サイトマップ
• ②カスタマージャーニーマップ
• ③ワイヤーフレーム
• ④ヒートマップ

答え: ②。「カスタマージャーニーマップ」です。

第28問: CSS2.1の仕様書「Appendix D. Default style sheet for HTML 4」からの抜粋。[A]にあてはまるものはどれか

• ①flow
• ②block
• ③list-box
• ④list-item

答え: ④。li要素のデフォルトのdisplay値はlist-itemです。この値によって、箇条書きのマーカー(点や番号)が表示されます。

第29問: HTML4.01とHTML5において用途が異なる属性はどれか

• ①link要素のrel属性
• ②table要素のborder属性
• ③td要素のcolspan属性
• ④textarea要素のrows属性

答え: ②。HTML4.01ではborder属性は線の太さをピクセル値で指定する視覚的な意味を持ちましたが、HTML5では「表があること」を示す簡易的な扱いに意味が変更されています。①③④はHTML4.01とHTML5で用途に大きな変化はありません。

第30問: ウェブコンテンツJIS(JIS X 8341-3)の達成基準1.3.3の[A]にあてはまる語句はどれか

• ①UI/UX
• ②スタイル
• ③感覚的な特徴
• ④ユーザインタフェース

答え: ③。達成基準1.3.3は「感覚的な特徴」で、形・大きさ・視覚的位置・方向・音といった感覚的な特徴だけに説明を依存させないことを求めています。

第31問: HTML5において、h1〜h6要素は[A]の見出しをあらわす要素である

• ①文書
• ②章
• ③セクション
• ④アウトライン

答え: ③。HTML5のアウトラインの考え方では、見出し要素は文書内の各セクションに対する見出しと位置づけられています。

第32問: 文字色と背景色の組み合わせのうち、コントラスト比が最も大きいものはどれか

• ①文字色: hsl(0, 50%, 50%) 背景色: hsl(180, 50%, 50%)
• ②文字色: hsl(0, 50%, 50%) 背景色: hsl(360, 50%, 50%)
• ③文字色: hsl(0, 0%, 50%) 背景色: hsl(0, 100%, 50%)
• ④文字色: hsl(0, 50%, 0%) 背景色: hsl(0, 50%, 100%)

答え: ④。コントラスト比を大きく左右するのは主に明度(Lightness)の差です。④は明度0%(黒に近い)と明度100%(白に近い)の組合せで、明度差が最大になっています。①は色相が違うだけ、②は色相0度と360度がほぼ同じ色(赤)を指すため差がほとんどなく、③は彩度が違うだけで、いずれも明度差が小さいためコントラスト比は低くなります。

第33問: ウェブコンテンツJIS(JIS X 8341-3)の用語集の説明文が指す用語はどれか

• ①AI
• ②IoT
• ③支援技術
• ④スクリーンリーダ

答え: ③。この説明文は、JIS X 8341-3用語集における「支援技術」の定義です。

第34問: SVGファイルをimg要素で指定しても表示されない場合の対策として、最も適切なものはどれか

• ①レスポンスヘッダにおけるContent-Typeの値をimage/svg+xmlにする
• ②SVGファイルの拡張子を.svgzにする
• ③HTMLの文書型をXHTMLにする
• ④SVGファイルのXML宣言を削除する

答え: ①。img要素でSVGを正しく表示するには、サーバがそのファイルを正しいMIMEタイプ(image/svg+xml)として返す必要があります。サーバの設定次第でこのMIMEタイプが認識されず表示に失敗することがあり、正しく設定することで解決します。

第35問: ヒーローヘッダの手法として適切なものはどれか

• ①ファーストビューで画面一杯に画像や動画を配置する
• ②ヘッダ情報を1つのページにしか表示しない
• ③ヘッダ情報のみに特別な色を使用する
• ④画面一杯に三原色のみを用いた画像を配置する

答え: ①。ファーストビューいっぱいにインパクトのある画像や動画を配置する手法が「ヒーローヘッダ(ヒーローイメージ)」です。

第36問: 次のmedia属性とまったく同じ機能となるmedia属性はどれか

• ①media=”and(min-width:1000px)”
• ②media=”all and (min-width:1000px)”
• ③media=”screen and (min-width:1000px)”
• ④media=”only screen and (min-width:1000px)”

答え: ②。メディアクエリでメディアタイプを省略すると、既定値のall(すべてのメディア)が暗黙的に適用されます。そのため、media="(min-width:1000px)"はmedia="all and (min-width:1000px)"と完全に同じ意味になります。③④はscreenに限定するため、印刷時などの挙動が変わり同じ機能にはなりません。

第37問: お問い合わせフォームを設計する際に配慮すべき点として適切なものはどれか

• ①複数ページにわたるフォームでは現在位置を明示する
• ②入力エラーがあった場合は「入力エラー」とだけ表示する
• ③パソコンとスマートフォンで同じレイアウトを用いる
• ④入力確認画面から編集画面に戻る場合は入力値を保持しない

答え: ①。複数ステップのフォームでは、現在どの段階にいるかを示すことでユーザの安心感につながります。②は具体性に欠け不親切、③はデバイスに応じた最適化を放棄しており、④は入力し直しの手間を強いる不親切な設計です。

第38問: 「>」を表示する際の文字実体参照はどれか

• ①>
• ②<
• ③"
• ④ 

答え: ①。「>」を表す文字実体参照は>です。

第39問: 画像補間の方法として適さないものはどれか

• ①ニアレストリニア法
• ②バイキュービック法
• ③バイリニア法
• ④ニアレストネイバー法

答え: ①。実在する画像補間方法は「ニアレストネイバー法」「バイリニア法」「バイキュービック法」の3つで、「ニアレストリニア法」という名称の手法は存在しません。

第40問: JavaScriptで配列arrに要素を追加する例として正しいものはどれか

• ①arr[]=10;
• ②arr.shift(10);
• ③arr.push(10);
• ④arr+=10;

答え: ③。配列の末尾に要素を追加するメソッドはpush()です。①はPHPのような構文でJavaScriptには存在せず、②のshift()は先頭要素を取り出して削除するメソッド、④は配列に対する+=は文字列結合として扱われ、いずれも要素の追加にはなりません。

まとめ

• CSSの詳細度が同じ場合は、後に書かれたルールが優先される(a:hoverとa:link/a:visitedの順序に注意)
• メディアクエリでメディアタイプを省略すると、既定で「all」が適用される
• コントラスト比は主に明度の差で決まる。色相や彩度だけの違いでは大きな差は生まれない
• JavaScriptのElement.remove()は引数を取らない。「削除したい要素自身」に対して呼び出す