2020/09/03 (更新日: 2021/01/01)

【初心者向け】ウェブデザイン技能検定3級の実技試験の作業3の解説

こんにちは、カズです。

こんな人向けの記事

では、さっそく解説しますね。

実技試験作業3の問題

【作業3】
デスクトップ上の data3 フォルダの q3 フォルダ内にある style.css を編集し、左に寄って配置されているコンテンツが中央に表示されるように変更しなさい。ここでいう中央とは、横方向の中央であって、縦方向の中央に配置する必要はない。

図にするとこんな感じです。

参考までにhtmlは以下のとおり。
idセレクタのwrapが指定されています。

<div id="wrap">
<header><img src="images/id.jpg" alt="PECサイトID" class="logo"></header>

今回修正するのはcssファイルです。

cssファイルをテキストエディタで開き、#wrapのmargin(余白)プロパティの値にautoを追加するだけ。

修正前

#wrap {
	width: 800px ;
	border: 1px solid #666666 ;
	margin: 0px ;
	background-color: #FFFFFF; 
}

修正後

#wrap {
	width: 800px ;
	border: 1px solid #666666 ;
	margin: 0px auto;
	background-color: #FFFFFF; 
}

marginプロパティの値にautoを追加。

作業おわり。

修正後の画面がこちら。

かんたんですね。

今回の解説は以上です。

　
↑応援ポチっとありがとうございます！