CSSの縦並び、横並びが混乱しやすいので基礎に立ち返って復習をしました。
まずはベースのHTMLを下記にて作成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>縦横並び練習</title>
</head>
<body>
<div class = "container">
<div class = "box bigbox">
<div class = "box midbox">
<div class = "box smallbox verticalrow1"></div>
<div class = "box smallbox verticalrow2"></div>
<div class = "box smallbox verticalrow3"></div>
</div>
<div class = "box midbox">
<div class = "box smallbox sideby1"></div>
<div class = "box smallbox sideby2"></div>
<div class = "box smallbox sideby3"></div>
</div>
</div>
</div>
</body>
</html>
いつも感覚で作ってしまうので、先にExcelで配置箇所を考えてからCSSを作成していきます。
指定しているclass名と色もなんとなくで決めておきました。
さて、このような箱となるようにCSSを書いていきます。
まずはそれぞれの箱の大きさと色指定。収まるでしょうというくらいのサイズで指定しました。
.container{
width: 600px;
height: 800px;
background-color:bisque;
}
.bigbox{
width: 500px;
height: 700px;
background-color: cyan;
}
.midbox
{
width: 200px;
height: 300px;
background-color: orange;
}
.smallbox
{
width: 50px;
height: 50px;
background-color: pink;
}
基礎を振り返りながらExcelシート通りになるように作っていきます。
縦並び・横並び指定を進める！
参考記事
- 親子関係について：◆HTML/CSS 備忘録① 親子関係
- レイアウトについて：【初心者向け】CSS レイアウトの基本（display と position 編）
| プロパティ | 役割 |
|---|---|
| display: flex; | 「今からこの箱の中身を整列させます」という宣言を親に行う |
| flex-direction | row（横並び）か column（縦並び）かを決めるための指定 |
| justify-content | メインの方向（横並びなら横、縦並びなら縦）の配置を指定 |
| align-items | サブの方向（横並びなら縦、縦並びなら横）の配置を指定 |
| gap | 要素同士の隙間を指定して見やすく |
こちらをベースとして、シンプルな方法で作っていきます。
今回はどこに何をしているかをきっちり把握したいのでコメントを多く残しています。
.container{
width: 600px;
height: 800px;
background-color:bisque;
display: flex; /* フレックスコンテナ */
justify-content: center; /* 左右中央 */
align-items: center; /* 上下中央 */
}
.bigbox{
width: 500px;
height: 700px;
background-color: cyan;
display: flex; /* 親要素としてフレックス指定*/
justify-content: space-around; /* midboxを均等に配置 */
flex-direction: column; /* midboxを縦並び指定 */
align-items: center; /* 縦方向の中央 */
}
.midbox
{
width: 200px;
height: 300px;
background-color: orange;
}
/* 左側のmidbox：中身を縦に並べる */
.midbox:first-child {
display: flex;
flex-direction: column; /* smallboxを縦並び指定 */
justify-content: center;
align-items: center;
gap: 20px;
}
/* 右側のmidbox：中身を横に並べる */
.midbox:last-child {
display: flex;
flex-direction: row; /* smallboxを横並び指定 */
justify-content: center;
align-items: center;
gap: 10px;
}
.smallbox
{
width: 50px;
height: 50px;
background-color: pink;
}
midboxは横長にしたかったのでサイズ指定の修正とsmallboxの3つの箱を色違いにしたいのでそちらを修正していきます。smallboxを色違いにするから隙間もなくしてよりExcelに近づけていきます。
修正内容
-
midboxのサイズを横長に指定 -
midboxからgapを削除してsmallboxの隙間を削除 -
smallboxも横長にして、verticalrow1~3とsideby1~3を用いて色を互い違いにする
.midbox
{
width: 400px;
height: 300px;
background-color: orange;
}
/* 左側のmidbox：中身を縦に並べる */
.midbox:first-child {
display: flex;
flex-direction: column; /* smallboxを縦並び指定 */
justify-content: center;
align-items: center;
}
/* 右側のmidbox：中身を横に並べる */
.midbox:last-child {
display: flex;
flex-direction: row; /* smallboxを横並び指定 */
justify-content: center;
align-items: center;
}
.smallbox
{
width: 120px;
height: 100px;
}
/* 縦並びの3つ */
.verticalrow1, .verticalrow3 { background-color: pink; }
.verticalrow2 { background-color: lightblue; }
/* 横並びの3つ */
.sideby1, .sideby3 { background-color: lightblue; }
.sideby2 { background-color: pink; }
Excelで作成した形になりました！
色とか大きさは多少違いますが、今回は並べ方を意識してやりたかったので自分的に合格です💮
まとめ
今までは、親子関係の意識が甘くて上からHTMLもCSSを書いては検証ツールであれこれして感覚でやっていました。そのため、下記を改善案として進めました。
- 先にイメージ図を作る
- HTMLでは
<div>タグで使う要素を先に作ってインデント整理で親子関係を把握 - CSSでは各要素に簡単なスタイルを指定して大枠を先に視覚で理解
- どこでどうなっているかを見た後にCSSで
HTMLとCSSはパっと表示がされるので触れやすいですが、勢いで進めると途中で混乱しやすかったので良い取り組みになりました。今後もこのスタイルでやっていきます！
オブジェクティブグループではXの投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。