Div span__object_があればいい

div, span, img があればいい

div (display: block)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eee</div>
</body>
</html>

span (display: inline)

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
<span>ddd</span>
<span>eee</span>
</body>
</html>

img (display: inline-block)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<img src="https://graph.facebook.com/4/picture?type=large">
</body>
</html>

width, height
(block and inline-block only)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="width: 200px; height: 200px;
background: red"></div>
</body>
</html>

margin, padding, border
(block and inline-block only)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
width: 200px;
height: 200px;
margin: 200px;
padding: 200px;
border: black solid 200px;
background: red;
"></div>
</body>
</html>

margin 相殺 1
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
height: 10px;
margin: 200px;
background: red;
"></div>
<div style="
height: 10px;
margin: 200px;
background: red;
"></div>
</body>
</html>

margin 相殺 2
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="background: red; height: 10px"></div>
<div style="
height: 10px;
margin: 200px;
background: red;
">
<div style="
height: 10px;
margin: 200px;
background: red;
">
</div>
</div>
</body>
</html>

margin 相殺 3
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
height: 10px;
margin: 200px;
padding: 1px;
background: red;
">
<div style="
height: 10px;
margin: 200px;
background: red;
">
</div>
</div>
</body>
</html>

margin 相殺 4
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
height: 10px;
margin: 200px;
background: red;
">
a
<div style="
height: 10px;
margin: 200px;
background: red;
">
</div>
</div>
</body>
</html>

float
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: red
"></div>
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: blue
"></div>
</body>
</html>

float
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="background: pink;">
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: red
"></div>
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: blue
"></div>
</div>
</body>
</html>

clear
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: red
"></div>
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: blue
"></div>
</div>
<div style="clear: left"></div>
</body>
</html>

clear
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: red
"></div>
<div style="
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: blue
"></div>
<div style="clear: left"></div>
</div>
</body>
</html>

position: relative
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
position: relative;
background: red;
margin: 20px;
padding: 20px;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
">
</div>
aaa
</body>
</html>

position: relative
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
position: relative;
background: red;
margin: 20px;
padding: 20px;
width: 100px;
height: 100px;
bottom: 100px;
right: 100px;
">
</div>
aaa
</body>
</html>

position: absolute
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="
position: absolute;
background: red;
margin: 20px;
padding: 20px;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
">
</div>
aaa
</body>
</html>

position: fixed
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 10000px; width: 10000px"></div>
<div style="
position: fixed;
background: red;
margin: 20px;
padding: 20px;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
">
</div>
</body>
</html>

stylesheet
<style>
* { background: red }
div { background: blue }
</style>

<link rel="stylesheet" href="style.css">

セレクタ
• div > div
• div + div
• div ~ div
• div div
• div.hoge
• div#hoge
• div[alt=hoge]

cascading
<style>
* { background: red }
div { background: blue }
#hoge { background: pink }
div#hoge { background: gray }
</style>

詳細度
div: (0, 0, 1)
div#hoge: (1, 0, 1)
div.hoge div#hoge: (1, 1, 2)

他よく使うプロパティ
• font-size
• overflow
• line-height
• background-image
• background-position
• outline

Div span__object_があればいい

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Div span__object_があればいい

Ähnlich wie Div span__object_があればいい (20)

Mehr von Shuhei Iitsuka

Mehr von Shuhei Iitsuka (20)

Div span__object_があればいい