HTML / CSS

指示書通りに実装してみよう!

ヘッダーの固定、clear: both;をして回り込みを防ぐなどの知識を得ることができます。

事前準備


指示書


https://tech-drill.s3.amazonaws.com/uploads/questions/images/e06a2db7fe6f23e2100da65ca0b85a75.png


雛形


sample.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
  <div class="wrapper">
    <header>
    </header>
    <div class="contents">
      <div class="left-content">
      </div>
      <div class="right-content">
      </div>
      <div class="bottom-content">
      </div>
    </div>
    <footer>
    </footer>
  </div>
</body>
</html>

sample.css
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 100%;
}
header{
  background-color: #333;
  height: 70px;
}
.contents{
  width: 960px;
  background-color: #eee;
  margin: 0 auto;
}
.left-content{
  background-color: red;
  width: 700px;
  height: 400px;
}
.right-content{
  background-color: yellow;
  width: 260px;
  height: 300px;
}
.bottom-content{
  background-color: green;
  height: 250px;
}
footer{
  height: 60px;
  background-color: #333;
}

問題: 1

雛形のHTMLとCSSを用いて上記の指示書通りの実装をしてください。


注意


①ブラウザの幅が960px未満のとき、ヘッダーとフッターが960px以下にならないようにする
②ヘッダーはスクロールしても固定されるようにする