CSS ”Making Layout”
positionプロパティ
htmlコードを作成すると、上から下に作成した順番でページに描かれました。
but、CSSのpositionプロパティをHTMLコードに関係なく、どの位置でも要素を設置します。
positionプロパティ4つ
- position: static;
- position: relative;
- position: absolute;
- position: fixed;
🍞relative
relative英語翻訳そのまま相対位置です。
top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。
divからposition: relativeのtop, leftそれぞれ15pxをあげると以下みたいにposition: staticの位置より上から15px左かから15px離れます。
.relative{
position: relative;
background: skyblue;
left: 15px;
top: 15px;
width: 150px;
}
🍞absolute
absoluteは絶対位置です。
親要素や祖先要素のうち、relative、absolute、またはfixedが宣言された場所を基準に位置します。
<body>
<div class="relative">div1
<div class="absolute">display:absolute</div>
</div>
</body>
body {
padding: 0;
margin: 0;
background-color: pink;
}
.relative {
position: relative;
border: 5px solid coral;
left: 15px;
top: 15px;
width: 150px;
height: 150px;
}
.absolute {
position: absolute;
top: 20px;
left: 20px;
background: skyblue;
}
🍞fixed
fixedは英語翻訳そのまま固定されたという意味です。
absoluteはrelativeを持つ親が必要でしたが、fixedは必要ありません。
見える画面を基準に位置を固定してくれます。
displayプロパティ
🥐block
ほとんどのhtmlタグはblock要素です。
<header>
,<footer>
,<p>
,<li>
,<table>
,<div>
,<h1>
などがblock要素となります。
block要素の特徴では、
🔸ブロックのように上から下まで積もるように置かれます。
🔸block levelテキストを書くといつも改行されます。
🔸幅と高さを指定できます。
🔸要素の配置を指定できないです。
<body>
<div style="background-color: yellowgreen; margin: 2px 0;">
display:block
</div>
<div style="background-color: yellowgreen; margin: 2px 0;">
display:block
</div>
</body>
➰実行画面
🥐inline
inline要素は改行されなく、新しい行で始まらないです。
必要な幅だけ取ります。
<span>
,<a>
,<img>
がinline要素となります。
inline要素の特徴では、
🔸一列で表示されます。
🔸テキストの幅だけ取ります。(幅、高さ設定不可/imgは例外)
🔸改行がされないです。
<body>
<span style="background-color: yellowgreen;">
display:inline
</span>
<span style="background-color: yellowgreen;">
display:inline
</span>
</body>
p {
display: inline-block;
}
➰実行画面
🥐inline-block
displayがinline-blockに設定されている要素はblockとinlineを混ぜた要素になります。
blockみたいに幅を決めれるし、改行されなく、inlineみたいに同じラインに設置されることができます。
inline-block要素の特徴では、
🔸inlineとblockを特徴を全部持ってます。
🔸一列に並んで(inline) + 幅と高さの設定が可能です(block)。
<body>
<p style="background-color:yellow;">hello</p>
<p style="background-color:yellow;">hello</p>
<p style="background-color:yellow;">hello</p>
</body>
➰実行画面
floatプロパティ
floatは主に画像周辺のテキストを包むために作られたプロパティです。
ページ全体のレイアウトを取る時にも本当に重要なツールになります。
<body>
<div class="box_wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
.box_wrap {
float: left;
}
.box_wrap div {
display: inline-block;
color: #fff;
}
.box_wrap .div1 {
background-color: navy;
}
.box_wrap .div2 {
background-color: skyblue;
}
.box_wrap .div3 {
background-color: cornflowerblue;
}
🥖float: left
🥖float: left
Discussion