ウェブ学のすすめ

Study of Web Design & Programing

確認テスト（2）

その他

記述実践

以下の指示通りに表示するよう記述しなさい。

DTD・セレクタ名・背景色は、自由選択

ナビゲーションは、擬似クラスを設定すること

各ブロック同士の空きは、「0」

可変しないものとする

引用：確認テスト（2） - 求職者支援訓練（基金訓練）Webデザインの勉強｜講師日和

解答(記述実践)

確認テスト（2）記述実践 - jsdo.it - share JavaScript, HTML5 and CSS

↓ブラウザで確認する
確認テスト（2）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print">
<title>確認テスト（2）</title>
</head>
<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header"></div>
<!-- ▲#header -->
<!-- ▼#nav -->
<div id="nav">
<ul>
<li id="nav1"><a href="#"></a></li>
<li id="nav2"><a href="#"></a></li>
<li id="nav3"><a href="#"></a></li>
<li id="nav4"><a href="#"></a></li>
<li id="nav5"><a href="#"></a></li>
</ul>
</div>
<!-- ▲#nav -->
<!-- ▼#wrapper -->
<div id="wrapper">
<!-- ▼#content -->
<div id="content"></div>
<!-- ▲#content -->
<!-- ▼#sidebar -->
<div id="sidebar"></div>
<!-- ▲#sidebar -->
</div>
<!-- ▲#wrapper -->
<!-- ▼#footer -->
<div id="footer"></div>
<!-- ▲#footer -->
</div>
<!-- ▲#container -->
</body>
</html>

CSS

@charset "UTF-8";

/* reset */
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #ccc;
}

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
}
#header {
    width: auto;
    height: 120px;
    background-color: #a3bed5;
}

/* nav */
#nav {
    width: 800px;
    height: 60px;
}
#nav ul{
    list-style-type: none;
}
#nav li{
    float: left;
    width: 160px;
    height: 60px;
}
#nav li a {
    display: block;
    width: 160px;
    height: 60px;
}
#nav1 a:link{
    background-color: #fffacd;
}
#nav2 a:link{
    background-color: #f0e68c;
}
#nav3 a:link{
    background-color: #deb887;
}
#nav4 a:link{
    background-color: #f4a460;
}
#nav5 a:link{
    background-color: #bdb76b;
}
#nav li a:hover {
    background-color: #99cc00;
}

#wrapper {
    width: 800px;
    height: auto;
    overflow :hidden;
}
#content {
    float: right;
    width: 600px;
    height: 400px;
    background-color: #dcd78a;
}

#sidebar {
    float: left;
    width: 200px;
    height: 400px;
    background-color: #9cc56e;
}

#footer {
    clear: both;
    height: 60px;
    background-color: #e0b9d2;
}

応用

各ブロック同士の空きは、「10px」

幅「800px」を前提に、他の数値の変化は適宜おこなうこと

解答(応用)

確認テスト（2）応用 - jsdo.it - share JavaScript, HTML5 and CSS

↓ブラウザで確認する
確認テスト（2）応用

HTML

上記と同様

CSS

@charset "UTF-8";

/* reset */
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #ccc;
}

#container {
    width: 800px;
    height: 640px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 10px 0;
}
#header {
    width: auto;
    height: 120px;
    background-color: #a3bed5;
}

/* nav */
#nav {
    width: 800px;
    height: 60px;
    margin: 10px 0 10px;
}
#nav ul{
    list-style-type: none;
}
#nav li{
    float: left;
    width: 160px;
    height: 60px;
}
#nav li a {
    display: block;
    width: 160px;
    height: 60px;
}
#nav1 a:link{
    background-color: #fffacd;
}
#nav2 a:link{
    background-color: #f0e68c;
}
#nav3 a:link{
    background-color: #deb887;
}
#nav4 a:link{
    background-color: #f4a460;
}
#nav5 a:link{
    background-color: #bdb76b;
}
#nav li a:hover {
    background-color: #99cc00;
}

#wrapper {
    width: 800px;
    height: auto;
    overflow :hidden;
}
#content {
    float: right;
    width: 595px;
    height: 360px;
    background-color: #dcd78a;
    margin-bottom: 10px;
}

#sidebar {
    float: left;
    width: 195px;
    height: 360px;
    background-color: #9cc56e;
}

#footer {
    clear: both;
    height: 60px;
    background-color: #e0b9d2;
}