
今回はHTMLでブロックを2つ作って、その図形を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』のブロックが2つ出来ているはずです。
①と言う文字しか表示されていないよ💦
これはね、ブロック要素の背景が透明だからなんだ🍎
ブロック要素に色をつけよう
div要素のブロックは、色が無く透明です。
そこで先程作った2つブロックに、色を付けていきます。
CSS
.box1{ background-color: burlywood; } .box2{ background-color: cadetblue; }
ブラウザ表示

ブロックは2つのはずなのに、①のブロックしか表示されていないです💦
これはね、ブロックが重なっているからなんだ🍎
ブロック要素の大きさを変えよう
今回はブロック要素を重なりを見たいと思っているので、『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。
それぞれの数値を指定することで、ブロックを中央に配置させたのです。
少しややこしいかも知れませんが、すぐに覚えますよ🍎
まとめ
この様にブロックの配置は、コーディングを行う際に度々必要となります。
何気ないレイアウトであっても、使用頻度の高いコードとなります。
この機会に覚えておきましょう。
応用編