未経験・初心者向け「HTML・CSSのレイアウト鬼練５〜１０」

ここでは、ウェブカツ!!のHTML5・CSS3部入門を受講完了した方向けにHTML・CSSを使った「レイアウトの組み方」の特訓を行います。

開発環境はMacとGoogleChromeブラウザを使います。

Windowsの人もGoogleChromeブラウザを使いましょう。

また、この練習では今でも現場での使用率の多い「float」を使ったレイアウト方法を練習します。

HTML5から使える「flexbox」を使ったレイアウト方法の鬼練は、また別でやっていきます。

1 鬼練５：インライン要素（ブロック要素）の上下中央寄せ
- 1.1 要件
- 1.2 正解コード
2 鬼練６：ブロック要素の左右中央寄せ
- 2.1 要件
- 2.2 正解コード
  - 2.2.1 htmlコード
  - 2.2.2 style.css
3 鬼練７：複数ブロック要素の配置
- 3.1 要件
- 3.2 正解コード
4 鬼練８：複数ブロック要素を均等に並べる
- 4.1 要件
- 4.2 正解コード
  - 4.2.1 htmlコード
  - 4.2.2 style.css
5 鬼練９：複数ブロック要素を重ねる
- 5.1 要件
- 5.2 正解コード
  - 5.2.1 htmlコード
  - 5.2.2 style.css
6 鬼練１０：複数ブロック要素を重ねるパート２
- 6.1 要件
- 6.2 正解コード
  - 6.2.1 htmlコード
  - 6.2.2 style.css

鬼練５：インライン要素（ブロック要素）の上下中央寄せ

今回はインライン要素を上下中央に寄せてみましょう。

要件

下記の画面と同じになる様に

親要素にdivタグを使い、親要素を高さ500px、横500pxにする

親要素の背景色を黒にする

子要素にインライン要素のspanタグを使い、子要素を高さ100px、横100pxにする

子要素の背景色を赤にする

子要素を親要素の上下中央に寄せる

でレイアウトしてみてください。

正解コード

htmlコード

htmlはまずこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>鬼練５</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
  <span class="ko"></span>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

style.css

style.cssはこんな感じになりますね。

.oya{
  width: 500px;
  height: 500px;
  background: #000;
}
.ko{
  height: 100px;
  width: 100px;
  background: red;
  display: block;
  position: relative;
  top: 200px;
}

.oya{

width: 500px;

height: 500px;

background: #000;

}

.ko{

height: 100px;

width: 100px;

background: red;

display: block;

position: relative;

top: 200px;

}

step1：インライン要素をブロック要素へ

まず、インライン要素は「高さを持てない」んでしたね。

なので、「height:100px」というスタイルはそもそも効きません。

なので、

「display:block」

でブロック要素にしてやります。

もしくは、

「display:inline-block」

でもいいです。

inline-blockはインライン要素だけど「高さを指定できる」ものです。

なので、横幅は指定がなければ中身のコンテンツ幅になります。

（この例だと中身は何もないので、横幅指定しなければ０ということになり、いくら高さを指定したところで画面に表示されません。）

block要素になると「高さは指定でき、横幅は指定がなければ親要素いっぱい」になりますね。

まぁ、結局インライン要素のまま上下中央に揃えることはできないので、強制的にブロック要素にしちゃえってことです。

（結局、ブロック要素の上下中央揃え方法と同じってことです）

step2：positionで位置指定ができるようにする

そして、要素の「位置」を指定するには「position」を使います。

「margin-top」で位置をずらしても同じことはできますが、マージンはあくまで「余白」としての意味で使うものなので、今回の場合だと好ましくはないですね。

（上にスペースが出来るわけなので、余白っちゃ余白とも言えますが）

「position: relative」

はウェブカツ内で習ってるので詳しくは説明しません。

今回の例だと他に子要素があるわけじゃないので、

「position: absolute」

をつかっても同じレイアウトになりますね。

step3：topで位置を指定

あとは位置を指定するだけなので

「top: 200px」

で「親要素の左上」を基準として

上から200pxずらす

という意味になります。

なぜ、200pxか？というと子要素を親要素の上下中央揃えしたいわけなので、

親要素の高さが500pxで

子要素の高さが100pxで

親要素の中心は上から250pxで

子要素の中心は自分の要素の上から50px。

なので

子要素を上から250px分まずずらして、自分の要素の中心分（50px）上に戻す

なので、結局は

上から200px

ということになります。

ここらへんの計算は「慣れ」でしかありません。

ちなみに「vertical-align:middle」を使って上下中央に揃える方法もありますが、「display:table」と「display:table-cell」をそれぞれ親と子に指定しなければいけないので、結局は「インライン要素のまま上下中央揃えは無理」ってことです。

CSSで要素を上下や左右から中央寄せする7つの方法

インライン要素の左右中央揃えは簡単すぎ

ちなみに「インライン要素の左右中央揃え」は「親要素にtext-align:center」を指定するだけなので、ここでは紹介しません。

鬼練６：ブロック要素の左右中央寄せ

今回はブロック要素を左右中央に寄せてみましょう。

要件

下記の画面と同じになる様に

親要素にdivタグを使い、親要素を高さ500px、横500pxにする

親要素の背景色を黒にする

子要素にブロック要素のdivタグを使い、子要素を高さ100px、横100pxにする

子要素の背景色を赤にする

子要素を親要素の左右中央に寄せる

でレイアウトしてみてください。

正解コード

htmlコード

htmlはまずこんな感じになります。鬼練５のコードと全く変わりませんね。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>鬼練６</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
  <div class="ko"></div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

style.css

style.cssはこんな感じになりますね。

.oya{
  width: 500px;
  height: 500px;
  background: #000;
}
.ko{
  height: 100px;
  width: 100px;
  background: red;
  margin-left: auto;
  margin-right: auto;
}

.oya{

width: 500px;

height: 500px;

background: #000;

}

.ko{

height: 100px;

width: 100px;

background: red;

margin-left: auto;

margin-right: auto;

}

今までの鬼練でもやりましたね。

ブロック要素を親要素の左右中央に寄せるためには

「対象要素の左右のマージンをautoにする」

でした。

鬼練５の上下中央揃えと一緒に使えば、「上下左右中央揃え」ができますね。

やってみましょう。

「先生や誰かに言われなくても、自分で試す。」これが成長する人の必須条件です。

現役エンジニアは月最低でも160時間はコードを書いています。

それだけ書いている（練習している）から上手くなるし、理解できる訳なんですね。

現役エンジニアだって新卒１年目や未経験から転職してきて現場１年目は「分からないことだらけ」でとても苦労しますが、「とにかくコードを書く」ことで理解をしていっているんです。野球選手が「野球が上手くなる本」読んだだけで上手くなるわけがありませんね。

「バットを振りまくる」から上手くなっていくわけです。

それが、

上達の原理原則

です。世の中出れば、学校のテストとは違って「学べば点数取れる」ものではありません。

最初はそこまでできなくとも、「そこを目指さなきゃいけない」ってことです。

そのためには「自分でどんどん書いて試す」以外で成長できるわけがありません。

鬼練７：複数ブロック要素の配置

今回は複数のブロック要素を親要素を起点にして配置してみましょう。

要件

下記の画面と同じになる様に

親要素にdivタグを使い、親要素を高さ500px、横500pxにする

親要素の背景色を黒にする

子要素にブロック要素のdivタグを使い、子要素を高さ100px、横100pxにする

子要素の背景色を赤にする

各子要素に「子要素１」「子要素２」「子要素３」「子要素４」の文字を入れる

子要素１は、親要素の左上座標を起点にして「上から50px」「左から50px」の位置に配置する

子要素２は、親要素の左上座標を起点にして「下から50px」「左から50px」の位置に配置する

子要素３は、親要素の左上座標を起点にして「上から50px」「右から50px」の位置に配置する

子要素４は、親要素の左上座標を起点にして「下から50px」「右から50px」の位置に配置する

でレイアウトしてみてください。

正解コード

htmlコード

htmlはまずこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>鬼練７</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
  <div class="ko ko1">子要素１</div>
  <div class="ko ko2">子要素２</div>
  <div class="ko ko3">子要素３</div>
  <div class="ko ko4">子要素４</div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

style.css

style.cssはこんな感じになりますね。

.oya{
  width: 500px;
  height: 500px;
  background: #000;
  position: relative;
}
.ko{
  height: 100px;
  width: 100px;
  background: red;
  position: absolute;
}
.ko1{
  top: 50px;
  left: 50px;
}
.ko2{
  bottom: 50px;
  left: 50px;
}
.ko3{
  top: 50px;
  right: 50px;
}
.ko4{
  bottom: 50px;
  right: 50px;
}

.oya{

width: 500px;

height: 500px;

background: #000;

position: relative;

}

.ko{

height: 100px;

width: 100px;

background: red;

position: absolute;

}

.ko1{

top: 50px;

left: 50px;

}

.ko2{

bottom: 50px;

left: 50px;

}

.ko3{

top: 50px;

right: 50px;

}

.ko4{

bottom: 50px;

right: 50px;

}

step1：子要素を自由に配置するために親要素にposition:relativeを追加

親は鬼練５、６とほぼ変わりないです。

１箇所違うのが、5行目の

position:relative

ですね。

これをつけないと次にやる「子要素を親要素の左上を起点として配置する」ということができなくなります。

子要素はposition:absoluteを使っていきますが、これは

「position:relative」または「position:absolute」になっている親要素を起点とする

というものなので、親要素につけてるわけです。

つけなければ「さらに親の要素でついているもの」が起点になります。

今回はさらに親要素もないので、bodyタグの要素が起点となりますね。

どうなるか試してみましょう。

親要素をposition:absoluteではダメなのか？というと今回は特にどちらでもレイアウトは変わらないですが、親要素にさらに親要素があった場合にレイアウトが崩れます。

ここらへんも試してみてください。

実際に使う場面では、大抵何かの要素にはいくつもの親要素があるので、

崩れないようにrelativeを使うようにしましょう。

step2：子要素をposition:absoluteで座標移動させて配置する

「.ko」では、子要素共通のスタイルをまとめてあげています。

共通のものはこうやってまとめた方がコード量も少なく、あとあとで修正がしやすい（保守性が高い）コードになります。

（ここらへんの「保守性高いコードの書き方」はHTML・CSS部中級や上級でさらに詳しくやります）

そして、

それぞれ.ko1 .ko2 .ko3 .ko4で「座標」を指定していますね。

.ko2なんかでは、bottomから指定していますが、topから指定したとしても間違いではありません。

ただいちいち計算するのも面倒なので、bottom使っちゃった方が楽ですね。

marginは使ってはいけない

ちなみにpositionプロパティを使わずにmarginでやる方法もありますが、あまりオススメしません。

やり方としては

子要素１には「margin-top:50px」「margin-left:50px」として

子要素２には「margin-top:200px」「margin-left:50px」

という感じになりますが、

あとあとで

子要素１と２の間に要素を入れる

なんて話になった場合に一気に崩れます。

子要素１と子要素２のマージンをそれぞれまた微調整する必要があるわけですね。

「修正する＝バグを生む可能性がある」

ということです。さらに修正箇所が増えれば時間もかかり、時間がかかればお金がかかる。ということです。

現場では「出来るだけ修正箇所を少なくする」のが鉄則です。

なので、オススメしません。

（間に要素がまずもって入らないと分かっているような時には使うのもいいでしょう）

鬼練８：複数ブロック要素を均等に並べる

今回は複数のブロック要素を親要素を起点にして均等に横並びに配置してみましょう。

要件

下記の画面と同じになる様に

親要素にdivタグを使い、親要素を高さ200px、横500pxにする

親要素の背景色を黒にする

子要素にブロック要素のdivタグを使い、子要素を高さ100px、横100pxにする

子要素の背景色を赤にする

各子要素に「子要素１」「子要素２」「子要素３」「子要素４」の文字を入れる

各子要素を親要素の上下中央に配置する

子要素１から順に左から横に並べる

子要素同士は10px空ける

でレイアウトしてみてください。

正解コード

htmlコード

htmlはまずこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>鬼練８</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
  <div class="ko">子要素１</div>
  <div class="ko">子要素２</div>
  <div class="ko">子要素３</div>
  <div class="ko">子要素４</div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

style.css

style.cssはこんな感じになりますね。

.oya{
  width: 500px;
  height: 200px;
  background: #000;
  overflow: hidden;
}
.ko{
  height: 100px;
  width: 100px;
  background: red;
  float: left;
  margin-right: 10px;
  position: relative;
  top: 50px;
}

.oya{

width: 500px;

height: 200px;

background: #000;

overflow: hidden;

}

.ko{

height: 100px;

width: 100px;

background: red;

float: left;

margin-right: 10px;

position: relative;

top: 50px;

}

もう何度も出てきてるので分かってるハズですが、

ブロック要素を横並びにするには、

「float」

を使うんでしたね。フロートを使った場合は、親要素にもきちんと「overflow: hidden」をつけましょうね。

子要素には「margin-left:10px」で間隔を空けて並べます。

そして、子要素に

「position: relative」

「top: 50px」

をつけることで、親要素の上下中央に各子要素を配置させてますね。

鬼練９：複数ブロック要素を重ねる

今回は複数のブロック要素を親要素を起点にして「重ねて」配置してみましょう。

要件

下記の画面と同じになる様に

親要素にdivタグを使い、親要素を高さ500px、横500pxにする

親要素の背景色を「#f6f5f4」にする

子要素にブロック要素のdivタグを使い、子要素を高さ100px、横100pxにする

各子要素に「子要素１」「子要素２」「子要素３」「子要素４」の文字を入れる

子要素１は、親要素の左上座標を起点にして「上から50px」「左から50px」の位置に配置し、背景色は「#ff9abc」にする

子要素２は、親要素の左上座標を起点にして「上から100px」「左から100px」の位置に配置し、背景色は「#f9b9ff」にする

子要素３は、親要素の左上座標を起点にして「上から150px」「左から150px」の位置に配置し、背景色は「#cbb8ff」にする

子要素４は、親要素の左上座標を起点にして「上から200px」「左から200px」の位置に配置し、背景色は「#acb5ff」にする

各要素の重なり順は下から「子要素１」「子要素２」「子要素３」「子要素４」の順に重ねる

でレイアウトしてみてください。

正解コード

htmlコード

htmlはまずこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>鬼練９</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
  <div class="ko ko1">子要素１</div>
  <div class="ko ko2">子要素２</div>
  <div class="ko ko3">子要素３</div>
  <div class="ko ko4">子要素４</div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

style.css

style.cssはこんな感じになりますね。

.oya{
  width: 500px;
  height: 500px;
  background: #f6f5f4;
  position: relative;
}
.ko{
  height: 100px;
  width: 100px;
  position: absolute;
}
.ko1{
  top:50px;
  left: 50px;
  background: #ff9abc;
}
.ko2{
  top:100px;
  left: 100px;
  background: #f9b9ff;
}
.ko3{
  top:150px;
  left: 150px;
  background: #cbb8ff;
}
.ko4{
  top:200px;
  left: 200px;
  background: #acb5ff;
}

.oya{

width: 500px;

height: 500px;

background: #f6f5f4;

position: relative;

}

.ko{

height: 100px;

width: 100px;

position: absolute;

}

.ko1{

top:50px;

left: 50px;

background: #ff9abc;

}

.ko2{

top:100px;

left: 100px;

background: #f9b9ff;

}

.ko3{

top:150px;

left: 150px;

background: #cbb8ff;

}

.ko4{

top:200px;

left: 200px;

background: #acb5ff;

}

.koで子要素で使う共通のスタイルをまとめてますね。

今回は「重ねて配置する」ので、「要素を浮かせて座標を指定」する必要があります。

なので、

「position: absolute」

を子要素に使いますね。

そして、topとleftプロパティで座標指定するだけです。

「重なり順」は今回は特にスタイルを指定しなくてもいい重なり順ですね。

鬼練１０：複数ブロック要素を重ねるパート２

前回と同じですが、今回は「重なり順を逆」にしてみましょう。

要件

下記の画面と同じになる様に

親要素にdivタグを使い、親要素を高さ500px、横500pxにする

親要素の背景色を「#f6f5f4」にする

子要素にブロック要素のdivタグを使い、子要素を高さ100px、横100pxにする

各子要素に「子要素１」「子要素２」「子要素３」「子要素４」の文字を入れる

子要素１は、親要素の左上座標を起点にして「上から50px」「左から50px」の位置に配置し、背景色は「#ff9abc」にする

子要素２は、親要素の左上座標を起点にして「上から100px」「左から100px」の位置に配置し、背景色は「#f9b9ff」にする

子要素３は、親要素の左上座標を起点にして「上から150px」「左から150px」の位置に配置し、背景色は「#cbb8ff」にする

子要素４は、親要素の左上座標を起点にして「上から200px」「左から200px」の位置に配置し、背景色は「#acb5ff」にする

各要素の重なり順は下から「子要素４」「子要素３」「子要素２」「子要素１」の順に重ねる

でレイアウトしてみてください。

正解コード

htmlコード

htmlはまずこんな感じになります。前回と全く同じですね。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>鬼練１０</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
  <div class="ko ko1">子要素１</div>
  <div class="ko ko2">子要素２</div>
  <div class="ko ko3">子要素３</div>
  <div class="ko ko4">子要素４</div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

style.css

style.cssはこんな感じになりますね。

.oya{
  width: 500px;
  height: 500px;
  background: #f6f5f4;
  position: relative;
}
.ko{
  height: 100px;
  width: 100px;
  position: absolute;
}
.ko1{
  top:50px;
  left: 50px;
  background: #ff9abc;
  z-index: 4;
}
.ko2{
  top:100px;
  left: 100px;
  background: #f9b9ff;
  z-index: 3;
}
.ko3{
  top:150px;
  left: 150px;
  background: #cbb8ff;
  z-index: 2;
}
.ko4{
  top:200px;
  left: 200px;
  background: #acb5ff;
  z-index: 1;
}

.oya{

width: 500px;

height: 500px;

background: #f6f5f4;

position: relative;

}

.ko{

height: 100px;

width: 100px;

position: absolute;

}

.ko1{

top:50px;

left: 50px;

background: #ff9abc;

z-index: 4;

}

.ko2{

top:100px;

left: 100px;

background: #f9b9ff;

z-index: 3;

}

.ko3{

top:150px;

left: 150px;

background: #cbb8ff;

z-index: 2;

}

.ko4{

top:200px;

left: 200px;

background: #acb5ff;

z-index: 1;

}

ほぼ同じなんですが、各子要素に

「z-index」

がついてますね。

これは「要素の重なり順」を指定できるものです。

値が小さいものが「下」になり、値が大きいものほど「上」にある。

ってことになります。

値には「マイナスの値」も指定できますが、やめときましょう。

（実際の現場でそれをやるとごちゃごちゃになってしまって「カオス状態」になっていくので。）

今回の重なり順のためにそれぞれz-indexで順序を指定しただけですね。

値は大きければなんでもいいんでしょ？って初心者の人は

「z-index:999」

とかってつけるんですが、

マジでやめましょうね。

その要素の上に他の人が配置したい時にどうするの？

「z-index:9999」

ってつけるの？

そしたら、さらにその要素の上に配置したい時は？

「z-index:99999」

とかにする気？

もう、カオスの始まりですからね。それ。

絶対に現場じゃやめてください。

（と言っても低レベルな小さなHP制作会社は普通にやってますけどね。大手の単金のいい現場でそれやったら笑い者です。）

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。