WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

9月14日作業データ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブ基礎2</title>
<style>
html,body{
margin: 0;
padding: 0;
}
img{
vertical-align: bottom;
max-width: 100%;/* フルードイメージ */
}
body{
background-color: #DDD;
}
.container{
width: 1000px;
padding: 10px;
box-sizing: border-box;/* paddingとborderを幅の中に */
margin: 0 auto;
background-color: #FFF;
}
header{
background-color: #df4f7a;
margin-bottom: 10px;
}
.g-nav{
height: 50px;
background-color: #eedf08;
margin-bottom: 10px;
}
.wrapper{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.main{
width: 700px;
height: 400px;
background-color: #4f99df;
}
.sub{
width: 270px;
height: 400px;
background-color:#e69a21
}
footer{
height: 100px;
background-color: #777;
}

/* body幅が999px以下の時 */
@media (max-width:999px){
.container{
width: 100%;
}
.wrapper{
display: block;
}
.main{
width: 100%;
margin-bottom: 10px;
}
.sub{
width: 100%;
height: 200px;
}
}

/* body幅が640px以下の時 */
@media (max-width:640px){
/*
.mainの高さを800pxに
.subの高さを300pxに
footerの高さを200pxに */

.main{
height: 800px;
}
.sub{
height: 300px;
}
footer{
height: 200px;
}

}

</style>
</head>
<body>
<div class="container">
<header>
<img src="img/main.jpg" alt="">
</header>
<nav class="g-nav"></nav>
<div class="wrapper">
<div class="main"></div>
<div class="sub"></div>
</div><!-- /.wrapper -->
<footer></footer>
</div>
</body>
</html>