HTML 5+CSS 3学習ノート(第5章)CSS 3高度応用
HTML 5+CSS 3学習ノート(第5章)CSS 3高度応用
今日は在宅隔離の3日目、がんばれ!加倉自身!
5.1ボックスモデル
ボックスモデルとも呼ばれます
がいぶきょりmargin
上下左margin:0 auto
内側マージンpadding
内側の余白は背景の範囲です
ボーダーborder
例
略記属性の概念
5.2レイアウトの共通属性
フローティング
フローティングボックスは、ボックスまたは別のフローティングボックスを含むフレームに外縁がぶつかるまで、左または右に移動できます.
フローティングボックスはドキュメントの通常ストリームにないため、ドキュメントの通常ストリームのブロックボックスはフローティングボックスが存在しないように表現されます.
位置
絶対位置決めposition:fixedとはブラウザに対する位置決めを指す
相対位置
5.3アニメーションと特効
変化(transform)
transform:translate平行移動scaleスケールskew傾斜rotate回転は、プロパティを簡潔に書くと同時に実行できます.例:
トランジション
transition
アニメーション(Animation)
例おなら鯛
今日は在宅隔離の3日目、がんばれ!加倉自身!
5.1ボックスモデル
ボックスモデルとも呼ばれます
がいぶきょりmargin
上下左margin:0 auto
内側マージンpadding
内側の余白は背景の範囲です
ボーダーborder
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
border: 2px solid red;
width: 200px;
}
</style>
</head>
<body>
<p> ， </p>
</body>
</html>
略記属性の概念
5.2レイアウトの共通属性
フローティング
フローティングボックスは、ボックスまたは別のフローティングボックスを含むフレームに外縁がぶつかるまで、左または右に移動できます.
フローティングボックスはドキュメントの通常ストリームにないため、ドキュメントの通常ストリームのブロックボックスはフローティングボックスが存在しないように表現されます.
位置
絶対位置決めposition:fixedとはブラウザに対する位置決めを指す
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
border: 2px solid red;
width: 200px;
height: 1000px;
}
.fix{
position: fixed;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<p> ， </p>
<p class="fix"> ， !!!</p>
<p> ， </p>
<p> ， </p>
<p> ， </p>
</body>
</html>
相対位置
5.3アニメーションと特効
変化(transform)
transform:translate平行移動scaleスケールskew傾斜rotate回転は、プロパティを簡潔に書くと同時に実行できます.例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
transform: scale(1.1,1.2) translate(50px,100px) rotate(90deg);
}
</style>
</head>
<body>
<img src="1.jpg" alt="">
</body>
</html>
トランジション
transition
アニメーション(Animation)
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>
<p><b> ：</b> Internet Explorer 。</p>
<div></div>
</body>
</html>
例おなら鯛
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.my-pi1{
width: 50px;
height: 50px;
background: #beffb7;
position:relative;
animation:mymove 5s infinite;
left: 100px;
top: 200px;
}
.my-pi2{
width: 40px;
height: 40px;
background: #beffb7;
position:relative;
animation:mymove 5s infinite;
animation-delay: 1s;
left: 100px;
top: 200px;
}
@keyframes mymove {
from{top:200px}
to{top:0 }
}
</style>
</head>
<body>
<div class="my-box">
<div class="my-pi1"></div>
<div class="my-pi2"></div>
<div class="my-pi3"></div>
<img src="fish.png" alt="">
</div>
</body>
</html>