WEB、始めました

半年間WEB制作の学校に通います。その記録。

１６日目　floatの復習

f:id:chawannmusi:20160214183646p:plain

 

html--------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div id="header">
header
</div><!--header-->
<div id="wrapper">
<div id="wrapper-left">
<div id="main">
main
</div><!--main-->
<div id="sub">
sub
</div><!--sub-->
</div><!--left-->
<div id="third">
third
</div><!--third-->
</div><!--wrapper-->
<div id="footer">
footer
</div><!--footer-->
</div><!--container-->
</body>
</html>

 

---------------------------------------------------------------------------------------------

 

 

 

stylesheet------------------------------------------------------------------------------

 

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

body {
background: #999;
}

#container {
width: 940px;
height: auto;
padding:10px;
margin: 0 auto;
background: #FFF;
}

#header {
width: 940px;
height: 200px;
margin: 0 auto 10px;
background: #6C6;
}

 

#wrapper-left #main {
width: 400px;
height: 300px;
background: #C9F;
float: right;

}

#wrapper-left #sub {
width: 300px;
height: 300px;
background: #69C;
float: left;
}

#wrapper-left {
width: 710px;
overflow: hidden;
float: left; /*wrapperをfloat右 wrapper-leftをfloat左に*/
}


#third {
width: 220px;
height: 300px;
background: #369;
float: right;
}

#footer {
height: 100px;
background: #F93;
}

#wrapper {
width: 940px;
overflow: hidden;
margin-bottom: 10px;
}

 

------------------------------------------------------------------------------------------------

 

 

 

f:id:chawannmusi:20160214183947p:plain

 

 

html-------------------------------------------------------------------------------------

 

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style2.css">
</head>

<body>
<div id="container">
<div id="header">
header
</div><!--header-->
<div id="wrapper">
<div id="wrapper-left">
<div id="main">main</div><!--main-->
<div id="sub">sub</div><!--sub-->
</div><!--wrapper-left-->
<div id="wrapper-right">
<div id="third">third</div><!--third-->
<div id="four">four</div><!--four-->
</div><!--wrapper-right-->
</div><!--wrapper-->

<div id="footer">
footer
</div><!--footer-->
</div><!--container-->
</body>
</html>

 

-------------------------------------------------------------------------------------------

 

 

 

stylesheet----------------------------------------------------------------------------------

 

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

body {
background: #999;
}

#container {
width: 940px;
height: auto;
padding:10px;
margin: 0 auto;
background: #FFF;
}

#header {
width: 940px;
height: 200px;
margin: 0 auto 10px;
background: #6C6;
}

 

#wrapper-left #main {
width: 400px;
height: 300px;
background: #C9F;
float: left;

}

#wrapper-left #sub {
width: 300px;
height: 300px;
background: #69C;
float: right;
}

#wrapper-left {
width: 710px;
overflow: hidden;
float: left; /*wrapperをfloat右 wrapper-leftをfloat左に*/
}


#third {
width: 220px;
height: 150px;
background: #369;
margin-bottom: 10px;
}

#four {
width: 220px;
height: 140px;
background: #C33;
}

#wrapper-right {
width: 220px;
overflow: hidden;
float: right; /*wrapperをfloat右 wrapper-leftをfloat左に*/
}

#footer {
height: 100px;
background: #F93;
}

#wrapper {
width: 940px;
overflow: hidden;
margin-bottom: 10px;
}

 

---------------------------------------------------------------------------------------------

 

 

 

 

f:id:chawannmusi:20160214184503p:plain

html---------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style3.css">
</head>

<body>
<div id="container">
<div id="header">
header
</div><!--header-->
<div id="wrapper">
<div id="main">main</div><!--main-->
<div id="sub">sub</div><!--sub-->
<div id="third">third</div><!--third-->
<div id="four">four</div><!--four-->
<div id="five">five</div><!--five-->
<div id="six">six</div><!--six-->
</div><!--wrapper-->

<div id="footer">
footer
</div><!--footer-->
</div><!--container-->
</body>
</html>

 

---------------------------------------------------------------------------------------------

 

 

stylesheet----------------------------------------------------------------------------------

 

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

body {
background: #999;
}

#container {
width: 950px;
height: auto;
padding:5px;
margin: 0 auto;
background: #FFF;
}

#header {
width: 940px;
height: 200px;
margin: 5px;
background: #6C6;
}

 

#main {
width: 400px;
height: 300px;
background: #C9F;
}

#sub {
width: 300px;
height: 300px;
background: #69C;
}


#third {
width: 220px;
height: 150px;
background: #369;
}

#four {
width: 220px;
height: 140px;
background: #C33;
}

#five {
width: 465px;
height: 150px;
float: left;
background: #C66;
}

#six {
width: 465px;
height: 150px;
background: #909;
}

#footer {
height: 100px;
background: #F93;
margin: 5px;
}
#wrapper div {
float: left;
margin: 5px;
}

#wrapper {
overflow: hidden;
margin-bottom: 5px;
}

 

---------------------------------------------------------------------------------------------

 

 

f:id:chawannmusi:20160214184710p:plain

 

 

html---------------------------------------------------------------------------------------

 

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style4.css">
</head>

<body>
<div id="container">
<div id="one">one</div><!--main-->
<div id="two">two</div><!--sub-->
<div id="three">three</div><!--third-->
<div id="four">four</div><!--four-->

</div><!--container-->
</body>
</html>

 

---------------------------------------------------------------------------------------------

 

 

stylesheet----------------------------------------------------------------------------------

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

body {
background: #999;
}

#container {
width: 320px;
padding: 10px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}

#container div {
float: left;
margin:10px;
}


#one {
width: 140px;
height: 300px;
background: #C9F;
}

#two {
width: 140px;
height: 140px;
background: #69C;
}


#three {
width: 140px;
height: 140px;
background: #369;

}

#four {
width: 300px;
height: 140px;
background: #C33;
}

 

 

---------------------------------------------------------------------------------------------

 

 

f:id:chawannmusi:20160214184901p:plain

 

html---------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style5.css">
</head>

<body>
<div id="container">
<div id="one">one</div><!--main-->
<div id="two">two</div><!--sub-->
<div id="three">three</div><!--third-->

</div><!--container-->
</body>
</html>

 

---------------------------------------------------------------------------------------------

 

 

 

stylesheet----------------------------------------------------------------------------------

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

body {
background: #999;
}

#container {
width: 320px;
padding: 10px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}

#container div { /*※もしくは#one, #two, #three { にしてあげれば下は#threeのままでいける*/
margin:10px;
float: left;  /*全てのboxにfloat:leftをかける*/
}


#one {
width: 140px;
height: 140px;
background: #369;
}

#container div#two { /*#twoだけだとスタイルシートは細かい方の#container divが優先されてしまう※*/
width: 140px;
height: 300px;
background: #C9F;
float: right;　　/*上書きでfloat:rightをかける・全てleftにしてしまうとtwoの高さが邪魔でoneの下に余計な隙間ができてしまう*/
}


#three {
width: 140px;
height: 140px;
background: #69C;
}

 

 

 

---------------------------------------------------------------------------------------------