Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8586

position:relative; を使ってTポイントカードを作ってみた!

$
0
0
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だなと思いました。 引き続き応用していきます 今回以上です ありがとうございました

Viewing all articles
Browse latest Browse all 8586

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>