大きなblockの要素二つを横に並べ、右の要素を小さなボタンになるようにブロックを作りたいのですがボタンがうまく反映できません

現在下記の練習サイトにて2つの要素を含む背景灰色のブロックを作り、その中で右側のものだけ、ボタン用に背景色を変え、記載文字も変更しようとしました。

その際に下記の問題が生じました。
・flexで要素横並びにした際に右側ブロックはポジションの値をマイナスにしないと該当位置に設置できない
・右側ブロックの中身の文字の位置、色が変更できない

こちらのパターンですとflexではなく別のものを使うべきなのでしょうか。また、右ブロック「問い合わせ」部分の色・位置はpのidやclassなどでは無視されてしまうのですが、ほかにどのようなやり方がございますでしょうか。
ご教示いただければ幸いです。

練習サイトは下記となります。（該当部はフッターの上に当たる部分）
https://note.com/krowl/n/n0b339b21bb50

html
1<!doctype html>
2
3<html lang="ja">
4
5<head>
6 <meta charset="utf-8">
7<title>sample page</title>
8<link rel="stylesheet" href="css/style.css">
9</head>
10
11<body>
12
13<!--header-->
14 <div style="position:absolute; top:15px; left:150px;">
15  <img src="images/logo.png" alt="logo" align="left">
16 </div>
17
18<div style="position:absolute; top:15px; right:400px;">
19TEL 00-0000-0000<br>
20(受付時間　平日　９：００～１７：００) 
21</div>
22
23<div class="ask">
24<p>お問い合わせ</p>
25</div>
26
27
28
29<!--main-->
30 <div class="example">
31  <img src="images/main_image01.jpg">
32  <p>キャッチコピー</p>
33
34</div>
35
36<div class="under-example" >
37<p>テキストテキストテキスト</p>
38</div>
39<br>
40
41<nav>
42<ul id="main_nav">
43<li><a href="#div01">1.テキストテキ<br>ストテキスト</a></li>
44<li><a href="#div02">2.テキストテキ<br>ストテキスト</a></li>
45<li><a href="#div03">3.テキストテキ<br>ストテキスト</a></li>
46</ul>
47</nav>
48
49 <div class="box">
50  <div class="box-img">  
51    <img src="https://placehold.jp/400x400.png">
52  </div>
53  <div class="text">  
54    <h4>1.テキストテキストテキスト</h4><br>
55    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
56  </div>
57</div>
58<div class="box">
59  <div class="box-img">
60    <img src="https://placehold.jp/400x400.png">
61  </div>
62  <div class="text">
63    <h4>2.テキストテキストテキスト</h4><br>
64      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
65  </div>
66</div>
67
68<div class="box">
69  <div class="box-img">
70    <img src="https://placehold.jp/400x400.png">
71  </div>
72  <div class="text">
73    <h4>3.テキストテキストテキスト</h4>
74    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
75  </div>
76</div>
77
78<br><br>
79
80 <div class="contact">
81 <div class="box2">  
82 <div class="contact-text">
83<p>TEL 00-0000-0000<br>						<span>(受付時間 平日 9:00～17:00)</span></p>			</div></div>	</div>
84<div class="box2">  
85<div class="contact-contact">
86<p　id="contact-box">お問い合わせ</p><br><br>
87</div>
88</div></div>
89</main>
90<footer>
91<p>&copy; samplesamplesamplesamplesample</p>
92</footer>
93</div>
94</div>
95</body>
96</html>

css
1
2.ask {
3position:relative;
4
5}
6
7.ask p{
8position:relative;
9top: 0px;
10left:70%;
11margin:0;
12color: white;
13background: red;
14padding:20px 20px;
15displeay:block;
16width: 102px;
17height:24px;
18
19}
20
21
22
23.example{position: relative;}
24
25.example p{
26position: absolute;
27color: grey;
28font-weight: bold;
29font-size: 2em;
30font-family:Quicksand, sans-serif;
31top: 50%;
32left: 50%;
33transform:translate(-50%,-50%);
34margine:0;
35padding:0;
36}
37
38
39.example img{
40width: 100%;
41margin:0;
42padding:0;}
43
44.under-example {
45position: relative;
46mid-width: 600px;
47padding-left: calc((100% - 600px)/2);
48padding-right: calc((100% - 600px)/2);
49margin:0;
50padding:0;
51
52}
53
54.under-example p{
55position:absolute;
56top: 50%;
57left:50%;
58transform:translate(-50%,-50%);
59margin:0;
60padding:0;
61color: white;
62background: grey;
63font-size: 2em;
64font-family:Quicksand, sans-serif;
65display: block;
66width: 100%;
67height:auto;
68text-align: center;
69}
70.under-example:after {
71	content: "";
72	display: block;
73	width: 0px;
74	height: 0px;
75	bottom: -43px;
76	border-top: 20px solid grey;
77	border-right: 20px solid transparent;
78	border-left: 20px solid transparent;
79	left: 0;
80	right: 0;
81	margin: auto;
82	position: absolute;
83	vertical-align: middle;
84
85}
86
87nav {
88	height: 396px;
89	width: 100%;
90	margin: 0 auto;
91}
92
93#main_nav {
94	width: 67.5%;
95<!--menu display width-->
96	min-width: 687px;
97	height: 396px;
98	overflow: hidden;
99	margin: 0 auto;
100	padding: 88px 0;
101	list-style:none;
102}
103
104#main_nav li {
105	float: left;
106	height: 225px;
107	width: 225px;
108	border: 2px solid #000;
109	border-radius: 50%;
110	position: relative;
111
112}
113
114#main_nav li:after {
115	content: "";
116	display: block;
117	position: absolute;
118	bottom: 22px;
119	right: 0;
120	left: 0;
121	width: 21px;
122	height: 21px;
123	margin: auto;
124	border-right: 3px solid #000;
125	border-bottom: 3px solid #000;
126	transform: rotate(45deg);
127}
128
129#main_nav li:last-of-type {
130	float: none;
131	margin: 0 auto;
132}
133#main_nav li:nth-of-type(2) {
134	float: right;
135
136}
137#main_nav a {
138	color: #000;
139	font-size: 1.5rem;
140	position: absolute;
141	width: 100%;
142	text-align: center;
143	padding: 83px 0 100px;
144	text-decoration:none;
145}
146
147.box {
148  display: flex;
149  align-items: stretch;
150  height: 400px;
151}
152.box:nth-child(2n) {
153  flex-direction: row-reverse;
154}
155.text{
156  width: 50%;
157  background-color:#aaa;
158}
159
160.box-img{
161  width: 50%;
162  margine:0;
163  padding:0;
164}
165
166.box-img img{
167  background-repeat: no-repeat;
168  object-fit: cover;
169  width: 100%;
170  height: 400px;
171}
172
173.box2 {
174  display: flex;
175  align-items: center;
176  height: 50px;
177margin-bottom:100px; 
178position: relative;
179}
180.box2:nth-child(2n) {
181  flex-direction: row-reverse;
182  object-fit: cover;
183
184}
185.contact-text{
186position: relative;
187	top: 30px;
188	right: 0;
189	bottom: 30px;
190	left: 350px;
191display: block;
192padding: 40px 355px 25px 30px;
193background-color:#aaa;
194}
195
196
197.contact-contact{
198position: relative;
199	top: -120px;
200	right: 0px;
201	bottom: 0px;
202	left: -450px;
203display: block;
204padding: 20px 50px 0px;
205background-color:red;
206}
207
208p#contact-box{
209color: white;
210position: absolute;
211top:50%;
212left:50%;
213
214}
215
216
217span{
218font-size:0.9em;
219}
220
221footer {
222	height: 93px;
223	background-color: #aaa;
224}
225footer p {
226	margin-left: 119px;
227	font-size: 0.75rem;
228	line-height: 93px;
229}

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

回答2件

ベストアンサー

上記パーツの話をしていると認識しました。

余分な</div>があるようでした。
HTMLのコード整形ツールでソースコードのインデントを整えてみたところ、以下のように不要な閉じタグを見つけました。

HTML
1<div class="contact">
2  <div class="box2">
3    <div class="contact-text">
4      <p>TEL 00-0000-0000<br> <span>(受付時間 平日 9:00～17:00)</span></p>
5    </div>
6  </div>
7</div><!-- ←この閉じタグは不要 -->
8<div class="box2">
9  <div class="contact-contact">
10    <p　id="contact-box">お問い合わせ</p><br><br> </div>
11</div>
12</div>

インデントが整っていないと、閉じタグがないといった初歩的なバグは発見に何時間もかかってしまうことがあるので、整えていった方が楽できます。

あと、<p　id="contact-box">お問い合わせ</p>には全角スペースがあったため、ソースコード全体を全角スペースで検索して不適切に使われていないか探した方がいいと思います。

コメント追記

こちらのパターンですとflexではなく別のものを使うべきなのでしょうか。

display: flex;を使うのに適した箇所です！
逆にpositionを使うようなシチュエーションではないと考えます。

また、右ブロック「問い合わせ」部分の色・位置はpのidやclassなどでは無視されてしまうのですが、ほかにどのようなやり方がございますでしょうか。

無視されてしまうのは全角スペースが紛れ込んでいたからだと思います。
また、現在背景色と文字色が別の要素に指定されていますが、これらは1つの要素にまとめたほうがいいと考えます。(適当に、どこかのサイトを参考にしてみてください。だいたいは、背景色、文字色、paddingは1つのタグにまとまっていると思います。)

display: flex; 記述例について追記しました。

HTML
1<section class="bg-gray">
2  <div class="flex">
3    <div>
4      <p>
5        <span>TEL 00-0000-0000</span><br>
6        <span class="text-sm">(受付時間 平日 9:00～17:00)</span>
7      </p>
8    </div>
9    <div>
10      <a class="btn" href="">問い合わせボタン</a>
11    </div>
12  </div>
13</section>

CSS
1.bg-gray {
2  padding: 20px 0;
3  background: #ddd;
4}
5
6/* [1] 左右に配置する方法。.flexの子要素を1つ追加すると横3つ分割になる。 */
7.flex {
8  display: flex;
9  
10  /* flex以外 */
11  margin: 0 auto;
12  width: 600px;
13  background: #aaa;
14}
15.flex > * {
16  /* display: flex;の子要素のうち、flex-grow: 1;が指定された要素は余った横幅を分け合う */
17  flex: 1 1 0%;
18  
19  /* flex以外 */
20  padding: 20px;
21}
22
23/* [2] flexで子要素を上下左右の中央配置する方法。理解したら↑とまとめてください */
24.flex > * {
25  display: flex;
26  align-items: center; /* 子要素を上下中央揃え */
27  justify-content: center; /* 子要素を左右中央揃え */
28}
29
30/* ボタンは以下のようにpadding、background、colorをまとめて記述 */
31.btn {
32  padding: 10px 20px;
33  background: red;
34  color: white;
35  display: inline-block;
36}

投稿2020/03/18 00:39

編集2020/03/18 22:38

new1ro

総合スコア4528

naki888

2020/03/18 18:36

大変参考になります。上記部分を修正して編集しなおしてみます。

naki888

2020/03/18 19:01

ご指摘ありがとうございました。無事反映されました。ただ、微調整はpositionを使ってしまいました。後学のために、もしpositionを使わないとしたらどのような形にすればよろしいかご指導いただけませんでしょうか。何卒よろしくお願いいたします。

new1ro

2020/03/18 22:47 編集

回答にソースコードの例を追記しました。参考になれば幸いです！ 2つの用途でのdisplay: flex;を挙げています。片方のみ使う場合もあるので別個のものと捉えてください。 [1] 横並びの子要素の横幅を均等にする [2] 子要素を、上下左右の中央配置理解できたら、[1]と[2]を混ぜて書いてOKです。

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