html css grid flex justify-content

実現したいこと

画像のような構成のウェブをflexやgridを用いてイメージしたい。

前提

作ってあるhtml要素以外、新規のブロック追加・変更・削除はしないこと
cssはプロパティの変更・追加は問題ないが、セレクタ自体の変更・削除・追加は行わないこと
セレクタは必要に応じて、id、classは追加しても問題ありません。

発生している問題・エラーメッセージ

下記のように現在コードを入力していますが、全くなりません。

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>flexbox応用</title>
6    <link rel="stylesheet" type="text/css" href="base.css">
7</head>
8<body>
9    <header>
10        <h1>ヘッダー</h1>
11    </header><!-- header -->
12
13    <main>
14        <nav class="top-content">
15            <a href="#">TOP</a> &gt;
16            <a href="#">パンくず１</a> &gt;
17            <a href="#">パンくず２</a>
18        </nav><!-- bottom-content -->
19
20        <div class="left-content">
21            <p>left-content</p>
22            <ul>
23                <li>カラムメニュー１</li>
24                <li>カラムメニュー２</li>
25                <li>カラムメニュー３</li>
26                <li>カラムメニュー４</li>
27                <li>カラムメニュー５</li>
28                <li>カラムメニュー６</li>
29                <li>カラムメニュー７</li>
30            </ul>
31        </div><!-- left-content -->
32
33        <div class="right-content">
34            <p>right-content</p>
35            <div class="box-container">
36                <div class="content-block">
37                    <p>box1</p>
38                </div><!-- content-block -->
39                <div class="content-block">
40                    <p>box2</p>
41                </div><!-- content-block -->
42                <div class="content-block">
43                    <p>box3</p>
44                </div><!-- content-block -->
45                <div class="content-block">
46                    <p>box4</p>
47                </div><!-- content-block -->
48                <div class="content-block">
49                    <p>box5</p>
50                </div><!-- content-block -->
51                <div class="content-block">
52                    <p>box6</p>
53                </div><!-- content-block -->
54                <div class="content-block">
55                    <p>box7</p>
56                </div><!-- content-block -->
57                <div class="content-block">
58                    <p>box8</p>
59                </div><!-- content-block -->
60                <div class="content-block">
61                    <p>box9</p>
62                </div><!-- content-block -->
63            </div><!-- box-container -->
64        </div><!-- right-content -->
65
66        <div class="bottom-content">
67            <p>bottom-content</p>
68        </div><!-- bottom-content -->
69    </main><!-- main -->
70
71    <footer>
72        <p>フッター</p>
73        <div class="footer-container">
74            <div class="footer-left">
75                <p>左テキスト</p>
76            </div><!-- footer-left -->
77
78            <div class="footer-right">
79                <p>右テキスト</p>
80                <p>右テキスト</p>
81                <p>右テキスト</p>
82            </div><!-- footer-right -->
83        </div><!-- footer-container -->
84    </footer><!-- footer -->
85</body>
86</html>
87

css
1header {
2	height: 120px;
3	background-color: #efe;
4	border-bottom: 1px solid #ccc;
5}
6
7main {
8}
9
10.top-content {
11}
12.top-content a {
13	font-size: 11px;
14}
15
16.left-content {
17	background-color: #eef;
18	border: 1px solid #ccc;
19	display:grid;
20	grid-template-rows: 10px,10px,10px,10px,10px,10px,10px;
21	grid-template-columns:10px;
22	grid-gap:1px;
23}
24.left-content ul {
25}
26
27.right-content {
28	background-color: #fee;
29	border: 1px solid #ccc;
30}
31.box-container {
32}
33.content-block {
34	background-color: #eee;
35	border: 1px solid #ccc;
36}
37.box-red {
38	background-color: #f99;
39}
40
41.bottom-content {
42	width: 100%;
43	height: 120px;
44	background-color: #eff;
45	border: 1px solid #ccc;
46}
47
48footer {
49	height: 180px;
50	background-color: #eee;
51	border-top: 1px solid #ccc;
52}
53.footer-container {
54}
55.footer-left {
56	width: 15%;
57	background-color: #fef;
58	border: 1px solid #ccc;
59	padding: 10px;
60}
61.footer-right {
62	width: 35%;
63	background-color: #ffe;
64	border: 1px solid #ccc;
65	padding: 10px;
66}
67.text-rihgt {
68	text-align: right;
69}

試したこと

gridおよびflexを学び直して、親要素を意識してコードを入力したりした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のような感じでしょうか。

css
1header {
2  height: 120px;
3  background-color: #efe;
4  border-bottom: 1px solid #ccc;
5}
6
7main {
8  display: grid;
9  grid-template-columns: 240px 1fr;
10  grid-template-areas:
11    "top    top"
12    "left   right"
13    "bottom bottom";
14  gap: 20px;
15  margin: 20px;
16}
17
18.top-content {
19  grid-area: top;
20  margin-bottom: -20px;
21}
22.top-content a {
23  font-size: 11px;
24}
25
26.left-content {
27  grid-area: left;
28  background-color: #eef;
29  border: 1px solid #ccc;
30}
31.left-content ul {
32  list-style: none;
33}
34
35.right-content {
36  grid-area: right;
37  background-color: #fee;
38  border: 1px solid #ccc;
39}
40.box-container {
41  display: grid;
42  grid-template-columns: 1fr 1fr 1fr;
43  grid-template-rows: 100px 200px 100px;
44  gap: 10px;
45  margin: 10px;
46}
47.content-block {
48  background-color: #eee;
49  border: 1px solid #ccc;
50}
51.box-red {
52  background-color: #f99;
53}
54
55.bottom-content {
56  grid-area: bottom;
57  width: 100%;
58  height: 120px;
59  background-color: #eff;
60  border: 1px solid #ccc;
61}
62
63footer {
64  background-color: #eee;
65  border-top: 1px solid #ccc;
66  margin-top: 20px;
67  padding-bottom: 30px;
68}
69.footer-container {
70  display: flex;
71  justify-content: space-between;
72  margin: 20px;
73}
74.footer-left {
75  width: 15%;
76  background-color: #fef;
77  border: 1px solid #ccc;
78  padding: 10px;
79}
80.footer-right {
81  width: 35%;
82  background-color: #ffe;
83  border: 1px solid #ccc;
84  padding: 10px;
85}
86.text-rihgt {
87  text-align: right;
88}