読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

自宅学習のススメ - Progate

HTML & CSS

Progate

prog-8.com

f:id:web-0127:20161005161810p:plain

初級編

step 1

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <div>タグを追加し、「header」というクラスをつけてください -->
<div class="header"></div>
<!-- <div>タグを追加し、「main」というクラスをつけてください -->
<div class="main"></div>
<!-- <div>タグを追加し、「footer」というクラスをつけてください -->
<div class="footer"></div>
</body>
</html>


《style.css

@charset "UTF-8";

/*headerの 背景色を#DAFFE7 高さを65px にしてください*/
.header {
  background-color:#DAFFE7;
  height:65px;
}

/*mainの 背景色を#FFF0E4 高さを600px 幅を1300px にしてください*/
.main {
  background-color:#FFF0E4;
  height:600px;
  width:1300px;
}

/*footerの 背景色を#FCFFC0 高さを200px にしてください*/
.footer {
  background-color:#FCFFC0;
  height:200px;
}


step 2

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header"></div>
<div class="main">
<!-- <div>タグを追加し、「sidebar」というクラスをつけてください -->
<div class="sidebar"></div>
<!-- <div>タグを追加し、「contents」というクラスをつけてください -->
<div class="contents"></div>
</div>
<div class="footer"></div>
</body>
</html>


《style.css

@charset "UTF-8";

.header {
  height: 65px;
  background-color: #DAFFE7;
}

.main {
  width: 1300px;
  overflow: hidden;
}

.footer {
  height: 200px;
  background-color: #FCFFC0;
  /*footerのclearプロパティをleftにしてください*/
  clear:left;
}

/*sidebarの 背景色を#FFD8CF 高さを600px 幅を200px floatプロパティをleft にしてください*/
.sidebar {
  background-color:#FFD8CF;
  height:600px;
  width:200px;
  float:left;
}

/*contentsの 背景色を#E8E5FF 高さを600px 幅を900px floatプロパティをleft にしてください*/
.contents {
  background-color:#E8E5FF;
  height:600px;
  width:900px;
  float:left;
}