HTMLとCSSのコーディング。図形(要素)を重ねて位置調整してみよう。

HTMLとCSSのコーディング。図形(要素)を重ねて位置調整してみよう。

今回は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。

それぞれの数値を指定することで、ブロックを中央に配置させたのです。

少しややこしいかも知れませんが、すぐに覚えますよ🍎

まとめ

この様にブロックの配置は、コーディングを行う際に度々必要となります。

何気ないレイアウトであっても、使用頻度の高いコードとなります。

この機会に覚えておきましょう。

応用編

CSSカテゴリの最新記事