２０日目　CSS position - WEB、始めました

f:id:chawannmusi:20160217160447p:plain

f:id:chawannmusi:20160218154541p:plain

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Positionの練習</title>
<link rel="stylesheet" href="style.css">
</head>

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

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

@charset "UTF-8";

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

body {
background: #999;
height: 3000px;
}

#container {
width: 800px;
height: 600px;
margin: 0 auto;
background: #FFF;
position: relative; /*子要素(.box)を動かしたい時は親要素(#container)にposition: relative;をいれて基準点とする
absoluteをいれるとbodyが基準点になってしまう*/
}

.box {
width: 100px;
height: 100px;
}

.one {
background: #096;
}
.two {
background: #369;
position: relative; /*本来の自分の位置が基準点になる*/
top: 0;
left: 700px;
}
.three {
background: #993;
position: absolute;
bottom: 0;
left: 0;
}
.four {
background: #903;
position: absolute;
bottom: 0;
right: 0;
}
.five {
background: #C60;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
.six {
background: #C90;
position: absolute;
top: 0;
left: 200px;
}
.seven {
background: #903;
position: absolute;
top: 100px;
left: 300px;
}
.eight {
background: #330;
position: absolute;
top: 0px;
left: 400px;
}
.nine {
background: #F69;
position: absolute;
top: 100px;
right: 200px;
}
.ten {
background: #9CF;
position: fixed; /*fixedはbodyが基準点になる*/
top: 0px;
right: 100px;
}

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

f:id:chawannmusi:20160218154813p:plain

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>四季の花</title>
<link rel="stylesheet" href="style02.css">
</head>

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

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

@charset "UTF-8";

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

img {
border: 0;
}
img, input {
vertical-align: bottom;
}

body {
background: #D0F7F7;
}

#container {
background: #FFF;
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
}

.img1 {
position: absolute;
left: 400px;
top: 200px;
}
.img2 {
position: absolute;
left: 200px;
top: 0;
}

.img3 {
position: absolute;
left: 200px;
top: 400px;
}
.img4 {
position: absolute;
left: 400px;
bottom: 0;
}
.img5 {
position: absolute;
right: 200px;
top: 0;
}
.img6 {
position: absolute;
right: 200px;
bottom: 0;
}
.img7 {
position: absolute;
right: 0;
top: 200px;
}

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

f:id:chawannmusi:20160218154953p:plain

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Camellia</title>
<link rel="stylesheet" href="style03.css">
</head>

<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.gif" alt="logo"></h1>
<ul id="nav">
<li id="info"><a href="#">infomation</a></li>
<li id="menu"><a href="#">menu</a></li>
<li id="access"><a href="#">access</a></li>
<li id="mail"><a href="#">mail</a></li>
</ul>

</div>
<div id="img">
<ul>
<li class="camp"><img src="img/campaign.gif" alt=""></li>
<li class="img1"><img src="img/photo01.jpg" alt=""></li>
<li class="img2"><img src="img/photo02.jpg" alt=""></li>
<li class="img3"><img src="img/photo03.jpg" alt=""></li>
<li class="img4"><img src="img/photo04.jpg" alt=""></li>
<li class="img5"><img src="img/photo05.jpg" alt=""></li>
<li class="img6"><img src="img/photo06.jpg" alt=""></li>
<li class="img7"><img src="img/photo07.jpg" alt=""></li>
<li class="img8"><img src="img/photo08.jpg" alt=""></li>
<li class="img9"><img src="img/photo09.jpg" alt=""></li>
<li class="img10"><img src="img/photo10.jpg" alt=""></li>
</ul>

</div>
</div>
</body>
</html>

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

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

@charset "UTF-8";

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

ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}

body {
background: #5B3E1C;
}

#container {
background: #FFF url(img/shadow.gif) repeat-x left bottom;
width: 800px;
height: 410px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow:hiddem;
}

#header {
width: 300px;
float: left;
position: relative;
}

h1 {
position: absolute;
top: 240px;
left: 30px;
}

#nav {
width:94px;
margin: 30px;

}

#nav li a{
display: block;
width: 94px;
line-height: 25px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
#nav li a {

}

#nav #info a { background: url(img/info.gif) no-repeat #FFF; }
#nav #info a:hover { background: url(img/info_h.gif) no-repeat #FFF; }

#nav #menu a { background: url(img/menu.gif) no-repeat #FFF; }
#nav #menu a:hover { background: url(img/menu_h.gif) no-repeat #FFF; }

#nav #access a { background: url(img/access.gif) no-repeat #FFF; }
#nav #access a:hover { background: url(img/access_h.gif) no-repeat #FFF; }

#nav #mail a { background: url(img/mail.gif) no-repeat #FFF; }
#nav #mail a:hover { background: url(img/mail_h.gif) no-repeat #FFF; }

#img {
width: 480px;
height: 400px;
float: right;
position: relative;
}
.camp {
position: absolute;
top: -23px;
right: -15px;
}

.img1 {
position: absolute;
top: 80px;
right: 0;
}
.img2 {
position: absolute;
top: 240px;
left: 80px;
}
.img3 {
position: absolute;
top: 0px;
left: 0;
}
.img4 {
position: absolute;
top: 160px;
left: 0;
}
.img5 {
position: absolute;
top: 0;
left: 160px;
}
.img6 {
position: absolute;
top: 160px;
left: 160px;
}
.img7 {
position: absolute;
top: 80px;
left: 240px;
}
.img8 {
position: absolute;
top: 240px;
right: 160px;
}
.img9 {
position: absolute;
top: 320px;
right: 80px;
}
.img10 {
position: absolute;
top: 240px;
right: 0;
}

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