2級実技解説

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

本記事では、ウェブデザイン技能検定2級実技試験の選択問題5bの予想問題とその演習について公開します。

 

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

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

続きを見る

 

選択問題5bの解答方法は下記よりアクセスできます。

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

続きを見る

 

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

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

続きを見る

 

①演習の素材データ

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

今回の演習で使う、3ファイルはこちらよりダウンロードできます。

 

 index.html
<!DOCTYPE html>
<html>
<head>
<title>2級実技試験5bの予想問題演習</title>
<link rel="stylesheet" href="style.css">
<script src="q5.js"></script>
</head>
<body>
<button id="change">変更</button>
<div id="contents">ここのブロックや文字が変化します</div>
</body>
</html>

 q5.js
document.addEventListener("DOMContentLoaded", function() {
const changeButton = document.getElementById("change");
changeButton.addEventListener("click", function() {
// 問題の回答を下記に記載してください
 
 
});
});

 style.css
#contents {
background-color: gray;
width: auto;
font-size: 10px;
color: black;
padding: auto;
}

 

②演習の流れ

1.演習の素材データt5bをフォルダごと、Visual Studio Codeを起動し展開します。

 

2.各問題の問題の回答は、q5.js内の「//問題の回答を下記に記載してください」と記載している箇所の下部に記載していきます。

 

3.回答入力後は、ブラウザで表示し、「変更ボタン」をクリックして、実際に指定された要素が正常に変化しているか確認します。

 

③予想問題の演習

指定された要素の文字の大きさが20ptに

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.fontSize = '20pt';

 

指定された要素の文字を太字に

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.fontWeight = "bold";

 

指定された要素の文字に取り消し線を

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.textDecoration = "line-through";

 

指定された要素の文字を赤（ff0000）に

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.color = "#ff0000";

 

赤（ff0000）の2pxの破線のボーダーを設定

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.border = "2px dashed #ff0000";

 

指定されたブロックが非表示

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.display = "none";

 

ブロックの透明度（opacity）を0.2に

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.opacity = "0.2";

 

フォントを明朝体（serif）に

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.fontFamily = "serif";

 

文字を斜めに（oblique）に

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.fontStyle = "oblique";

 

文字の間隔を（30px）に

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.letterSpacing = "30px";

 

ブロックに水平方向5px、垂直方向6pxの位置に影を表示

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.boxShadow = "5px 6px";

 

文字に水平方向2px、垂直方向3pxの位置に影を表示

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.textShadow = "5px 6px";

 

 

④過去に試験で出題された問題の演習

指定された要素内の文字に実線の下線（令和6年度第3回、令和5年度第3回）

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.textDecoration = "underline";

 

指定されたブロックの横幅が 300px（令和6年度第2回）

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.width = '300px';

 

指定されたブロックが表示（令和6年度第1回）

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.display = "block";

 

指定された要素の内側の上下に 10px、左右に 30px の余白が出てくる（令和5年度第4回）

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.padding='10px 30px';

 

指定された要素の背景色が #ffcc66（令和5年度第2回）

 q5.js（解答）
let obj = document.getElementById('contents');
obj.style.backgroundColor = "#ffcc66";

 

-2級実技解説