【ウェブデザイン技能検定】2級実技試験　作業5bの解説・回答

本記事では、ウェブデザイン技能検定の2級実技試験の作業5bの解説・回答を行います。

問題については、令和5年度第2回の問題解説を行います。

実技試験については、毎回ほぼ同一問題（装飾の方法の違いのみ）のため、本回の演習で試験対策を行えます。

選択問題は5bを選ぶ理由については下記よりアクセスできます。

: 参考ウェブデザイン技能2級の選択は5bを選ぶ理由【２行のコードを丸暗記】

続きを見る

選択問題5bの過去に出題された問題は下記よりアクセスできます。

: 参考【ウェブデザイン技能検定】2級実技試験5bの過去問と回答一覧

続きを見る

選択問題5bの予想問題と演習は下記よりアクセスできます。

: 参考【ウェブデザイン技能検定】2級実技試験5bの予想問題演習

続きを見る

2級実技試験の概要解説は下記よりアクセスできます。

: 参考【ウェブデザイン技能検定】2級実技試験の概要と対策の解説

続きを見る

①作業5bの概要
②成果物
③指定素材
④回答・解説

①作業5bの概要

ウェブページ内の指定された要素をクリックすると、要素内の文字の背景色が#ffcc66に装飾します。

詳しい問題の文章や内容は、ウェブデザイン技能検定の過去問題の公表を参考ください。

②成果物

下記を成果物として作成していきます。（赤字のみを記入する）

 q5.js
// DOMが読み込まれた後に実行されるようにする
document.addEventListener("DOMContentLoaded", function() {
// ボタン要素を取得
const changeButton = document.getElementById("change");
// クリックイベントを設定
changeButton.addEventListener("click", function() {
// 問題の回答を下記に記載してください
let obj = document.getElementById('contents'); 
obj.style.backgroundColor ="#ffcc60" ;
});
});

③指定素材

「index.html、style.css、q5.js」の3ファイルが試験本番に提供されています。

3ファイルはこちらよりダウンロードもできます

 index.html
<!DOCTYPE html>
<html>
<head>
<title>背景色を変更</title>
<link rel="stylesheet" href="style.css">
<script src="q5.js"></script>
</head>
<body>
<button id="change">変更</button>
<div id="contents">ここに背景色が変わる文字</div>
</body>
</html>

 style.css
#contents { background-color: gray; }

 q5.js
// DOMが読み込まれた後に実行されるようにする
document.addEventListener("DOMContentLoaded", function() {
// ボタン要素を取得
const changeButton = document.getElementById("change");
// クリックイベントを設定
changeButton.addEventListener("click", function() {
// 問題の回答を下記に記載してください
 
});
});