今、私は四角を２つを１セットな感じで表示させたいです。こんな感じで⬇️

それでまず書いてみたのが

HTML
1<body>
2  <div id="header">
3  <div class="container">
4    <h1 href="index.html">My First Website</h1>
5    <nav>
6  	 <ul>
7		<li><a href="cornerstones.html" id="box">CORNERSTONES</a></li>
8 		<li><a href="fav-celebs.html" id="box">FAV CELEBS</a></li>
9  		<li><a href="bucket-list.html" id="box">BUCKET LIST</a></li>
10  	 </ul>
11    </nav>
12  </div>
13  </div>
14  <div class="square" id="1-1"></div>
15  <div class="square" id"1-2"></div>
16</body>

css
1*{
2    margin: 0;
3    padding: 0;
4}
5
6h2{
7    text-align: center;
8}
9
10p{
11    margin-bottom: 16px;
12}
13
14body{
15    width: 100%;
16    font-family: palatino;
17}
18
19/*中身を中心に置きたいfloatだからできないみたい？？どうすれば直るの？*/
20nav{
21    overflow: hidden;
22    float: left;
23    margin-left: 10px;
24}
25nav li{
26    float: left;
27    list-style-type: none;
28    padding: 10px;
29}
30nav a{
31    text-decoration: none;
32    display: block;
33    padding: 5px 20px;
34    margin: 0 20px 5px 20px;
35    text-align: center;
36    font-style: bold;
37    color: white;
38    font-size: 16px;
39}
40nav a:hover{
41    background: white;
42    color: turquoise;
43}
44#header{
45    display: inline-block;
46    vertical-align: 20px;
47    width:100%;
48    height: 70px;
49    background:turquoise;
50    box-shadow: 0 0px 3px 2px rgba(0,0,0,0.1);
51    opacity: 0.5;
52    color: white;
53    overflow: hidden;
54    letter-spacing: 5px;
55    position: sticky;
56    top: 0;
57}
58#header h1{
59    float: left;
60    text-align: center;
61    border: 3px double white;
62    width: 400px;
63}
64
65.container{
66    width: 1300px;
67    margin: 20px auto;
68}
69.square #1-1{
70    width:250px;
71    height:250px;
72    background:turquoise;
73    opacity: 0.5;
74    position: absolute;
75    top: 250px;
76    left: 200px;
77}

まだ１つ目なのに四角形が表示されず困っています。
きっと変わらないのでしょうが、セレクタも色々並べ替えてみたりしましたが、何も変わりませんでした。
.square#1-1　や #1-1.squareなど、、、

助けていただけたら嬉しいです。

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

回答2件

ベストアンサー

HTMLについて

idは数字から始まるものは書けません
id"1-2"にイコールがついていません
id="box"と書かれている部分が3つありますが、IDセレクタは1つしか書けません

修正前

html
1  <div class="square" id="1-1"></div>
2  <div class="square" id"1-2"></div>

修正後

html
1  <div class="square" id="square1"></div>
2  <div class="square" id="square2"></div>

CSSについて

共通部分と別々に分かれる部分は分離したほうが良いと思います。

修正前

css
1.square #1-1{
2    width:250px;
3    height:250px;
4    background:turquoise;
5    opacity: 0.5;
6    position: absolute;
7    top: 250px;
8    left: 200px;
9}

修正後

css
1.square{
2    width: 250px;
3    height: 250px;
4    background: turquoise;
5    opacity: 0.5;
6    position: absolute;
7    border: 1px solid black;
8}
9
10#square1{
11    top: 250px;
12    left: 200px;
13}
14
15#square2{
16    top: 200px;
17    left: 150px;
18}