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

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

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

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

※本解説はVisual Studio Codeを使用して解説しますが、試験本番はTeraPad、サクラエディタ、Sublime Textの3種類のエディタしか使用できません。

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

①作業1の概要

作業1の概要は下記の通りです。

下記「ディレクトリ構成図」画像等のソースファイルおよびディレクトリ構成を適切に設定します。

ディレクトリ構成図

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

②成果物

ブラウザで成果物を表示すると下記のイメージになります。

※作業1で記入した部分は赤字です。

 index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブデザイン技能競技大会</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap" class="cf">
<header>
<div class="cf">
<div id="logo">
<img src="img/logo.png" alt="ウェブデザイン技能競技大会">
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">競技概要</a></li>
<li><a href="#">参加申込</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</nav>
</div>
<div id="main_visual">
<strong>ウェブデザインの未来へ</strong>
</div>
</header>
<main>
<h1>ウェブデザイン技能競技大会</h1>
<p>ウェブデザイン技能競技大会は毎年開催されているウェブデザインの競う競技大会です。</p>
<p>大会は、一般の部、若年者の部の2部門で実施さます。</p>
<p>今年は東京にて本選大会が開催されます。</p>
</main>
<aside>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">競技概要</a></li>
<li><a href="#">参加申込</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</aside>
</div>
<footer>
<div class="container cf">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">競技概要</a></li>
<li><a href="#">参加申込</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<div id="copyrights">
<small>&copy; 2024 </small>
</div>
</div>
</footer>
</body>
</html>

 sample.css
@charset "UTF-8";
html {
min-height: 100%;
position: relative;
}
body {
background-color: #e5dde9;
background-image: url(../img/bg.png);
color: #333333;
font-family: "メイリオ", 'MS PGothic', Osaka, sans-serif;
font-size: 16px;
margin: 0 0 150px 0;
min-height: 100%;
padding: 0;
}
header, footer, main, aside {
display: block;
}
a {
color: #333333;
text-decoration: none;
}
a:hover {
color: #999999;
}
#wrap {
background-color: #ffffff;
background-image: url(../img/bd.png);
line-height: 200%;
margin: 20px auto 50px;
min-height: 100%;
padding-bottom: 40px;
width: 920px;
}
header {
background-color: #ffffff;
margin-bottom: 40px;
padding: 20px 0 0;
}
#logo {
float: left;
margin: 0 0 20px 20px;
}
nav {
float: right;
font-size: 0.9em;
margin: 5px 20px 20px 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
font-weight: bold;
margin-right: 15px;
}
nav li:last-of-type {
margin-right: 0;
}
#main_visual {
background: url(../img/main_image.jpg) no-repeat center center;
display: table;
height: 200px;
overflow: hidden;
text-align: center;
}
#main_visual strong {
color: #ffffff;
display: table-cell;
font-size: 1.8em;
vertical-align: middle;
width: 920px;
}
main {
background-color: rgba(255, 255, 255, 0.8);
float: left;
margin: 0 30px 0 20px;
padding: 20px;
width: 560px;
}
h1 {
border-top: solid 3px #333333;
border-bottom: solid 3px #333333;
font-size: 1.2em;
margin-top: 0;
padding: 10px 0;
}
p {
text-align: justify;
text-indent: 1em;
}
aside {
background-color: rgba(255, 255, 255, 0.8);
float: right;
font-size: 0.8em;
margin: 0 20px 0 0;
padding: 20px;
width: 210px;
}
aside ul {
list-style: none;
margin: 0;
padding: 0;
}
aside li {
background: url(../img/ar.png) no-repeat left center;
border-bottom: dashed 1px #333333;
line-height: 2.5em;
padding-left: 25px;
}
footer {
background-color: #333333;
bottom: 0;
clear: both;
color: #ffffff;
font-size: 0.9em;
height: 20px;
min-width: 920px;
padding: 40px 0;
position: absolute;
width: 100%;
}
footer a {
color: #999999;
}
footer a:hover {
color: #ffffff;
}
footer ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
footer li {
display: inline-block;
margin-right: 16px;
}
footer li:last-of-type {
margin-right: 0;
}
#copyrights {
float: left;
}
.container {
margin: auto;
width: 920px;
}
.cf:after {
content: "";
display: block;
clear: both;
}