position:relative; を使ってTポイントカードを作ってみました。
目標：position:relative;の基礎を理解するため
テキストエディターはVSCode.
～codeを書き始める前の準備～
・構成を考える！ 何をどんな風に、どうやって作るのか？
最初にある程度決めておくと後が楽になります。
例 Tポイントカードを調べる
<div>は何個必要なのか？
class属性名はどうしようか？
・紙とペンで実際に枠を書いてみる（添付画像 準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略
<div class="card">
<div class="card1">
<div class="card4 card2"></div>
<div class="card4 card3"></div>
</div>
</div>
.card {
width: 700px;
height: 500px;
border: 1px solid black;
background-color: aqua;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.card1 {
width: 450px;
height: 300px;
background-color: blue;
border: 1px solid black;
}
.card4 {
width: 100px;
height: 100px;
background-color: yellow;
}
.card2 {
width: 100%;
}
.card3 {
height: 100%;
}
一旦ブラウザで確認 ↓
次に position:relative; と position: absolute; を書きます
.card1 {
width: 450px;
height: 300px;
background-color: blue;
border: 1px solid black;
position: relative; ※
}
.card3 {
height: 100%;
position: absolute; ※
top: 0; ※
left: 38%; ※
}
position:relative; は『親要素』に書きます
position: absolute; は『子要素』に書きます
そして、position: absolute; と一緒に位置を指定してあげるのが、top bottom right left !!!
ちなみに position: absolute; と top bottom right left はセットで覚えておくと良いです。
Tポイントカード完成しました！！
background-color: aqua; を消してみました！
まとめ
今回は イマイチよくわかってなかったposition:relative;を理解するため
Tポイントカードを作ってみました！！
理解する上で、
position:relative; は『親要素』
position: absolute; は『子要素』 をきちんと把握することが大切だなと改めて実感いたしました！
拒否反応が起こりやすいタグですが、ひとつひとつ丁寧に書き進めれば怖くないcodeだなと思いました。
引き続き応用していきます
今回以上です
ありがとうございました
↧