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

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

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

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

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

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

①作業3の概要

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

下記画像の通り、左に寄って配置されているコンテンツを横方向の中央に表示されるように、style.css を編集します。

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

②成果物

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

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

 style.css
@charset "UTF-8";
html {
min-height: 100%;
position: relative;
}
body {
background-color: #9d9b9a;
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;
line-height: 200%;
margin: 20px auto;
min-height: 100%;
padding-bottom: 40px;
width: 920px;
}
header {
margin-bottom: 30px;
}
#logo {
padding: 20px;
}
nav {
font-size: 0.8em;
margin: 0 0 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
border-right: solid 1px #666666;
float: left;
font-size: 0.9em;
font-weight: bold;
text-align: center;
width: 152px;
}
nav li:last-of-type {
border: 0;
width: 155px;
}
nav a {
display: block;
}
#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 {
float: left;
margin: 0 30px 0 20px;
min-height: 300px;
padding: 20px;
width: 560px;
}
h1 {
border-bottom: double 3px #333333;
font-size: 1.2em;
margin-top: 0;
padding: 5px 0;
}
p {
text-align: justify;
text-indent: 1em;
}
aside {
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: dotted 1px #000000;
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;
}