今回はHTMLでブロックを２つ作って、その図形をCSSで重ねる方法を初心者向けに解説していきます。
コーディングを行う際には使用頻度の高いスキルとなりますので、この機会に覚えておきましょう。
Div要素でブロックを作ろう
HTMLでDiv要素を使ってブロックを作ります。
Div要素について自信の無い方は以下の記事を参考にしてみて下さい。
🍎HTMLを学ぶ。div要素とclass属性でサイト構成とブロックを学ぶ。🍎
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>図形を重ねる</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box1">
<div class="box2">①</div>
</div>
</body>
</html>
ブラウザ表示
これでdiv要素で作られた『box1』と『box2』のブロックが２つ出来ているはずです。
①と言う文字しか表示されていないよ💦
これはね、ブロック要素の背景が透明だからなんだ🍎
ブロック要素に色をつけよう
div要素のブロックは、色が無く透明です。
そこで先程作った２つブロックに、色を付けていきます。
CSS
.box1{
background-color: burlywood;
}
.box2{
background-color: cadetblue;
}
ブラウザ表示
ブロックは２つのはずなのに、①のブロックしか表示されていないです💦
これはね、ブロックが重なっているからなんだ🍎
ブロック要素の大きさを変えよう
今回はブロック要素を重なりを見たいと思っているので、『box1』のブロックは少し大きめに指定しておきます。
CSS
.box1{
background-color: burlywood;
width: 300px;
height: 200px;
}
.box2{
background-color: cadetblue;
width: 100px;
height: 100px;
}
ブラウザ表示
わぁ😳
ブロックの重なりがよく見える様になった👀
そうだね🍎
こうやって見てみるとブロックの重なりはよく見えるね✨
ブロックの位置調整をしてみよう
ブロックを重ねたブロックの位置調整には『positionプロパティ』を使用します。
そして重ねたいブロックの親要素に『relative』を指定します。
更に重ねたいブロックには子要素に『absolute』を指定します。
CSS
.box1{
position: relative;
background-color: burlywood;
width: 300px;
height: 200px;
}
.box2{
position: absolute;
background-color: cadetblue;
width: 100px;
height: 100px;
}
次に『top』と『left』プロパティを使っての位置調整をします。
『top』ではrelativeしたブロックの上からの位置を指定します。
『left』ではrelativeしたブロックの左からの位置を指定します。
では早速、②のブロックを左上に配置してみましょう。
この時、『top』は『0』の位置に、そして『left』も『0』の位置と指定します。
CSS
.box1{
position: relative;
background-color: burlywood;
width: 300px;
height: 200px;
}
.box2{
position: absolute;
background-color: cadetblue;
width: 100px;
height: 100px;
top: 0;
left: 0;
}
ブラウザ表示
これは
・『box1』のtopの始点位置が0
・『box2』のleftの始点位置が0
だと言うことを証明しているよ🍎
それではもう少し位置調整を試してみましょう。
『top』を50pxの位置。そして『left』を100pxの位置と指定してみましょう。
CSS
.box1{
position: relative;
background-color: burlywood;
width: 300px;
height: 200px;
}
.box2{
position: absolute;
background-color: cadetblue;
width: 100px;
height: 100px;
top: 50px;
left: 100px;
}
ブラウザ表示
『box1』のブロックの真ん中に『box2』のブロックが入った😳
どの様な現象が起きたか分かりますか？
これは横幅300pxのブロックに対して横幅100pxのブロックを中央にしたい場合は300px−100pxの半分の数値である100px。
そして縦幅も同様に縦幅200pxのブロックに対して縦幅100pxのブロックを中心にしたい場合は200px−100pxの半分の数値である50px。
それぞれの数値を指定することで、ブロックを中央に配置させたのです。
少しややこしいかも知れませんが、すぐに覚えますよ🍎
まとめ
この様にブロックの配置は、コーディングを行う際に度々必要となります。
何気ないレイアウトであっても、使用頻度の高いコードとなります。
この機会に覚えておきましょう。
応用編
