サークルを三つ重ねて並べたい

###実現したい事
サークルを三つ重ねて並べたいのですが、最後の一つが中々うまく重なりません。

グリーンのサークルを同様に横並びにし、少し重ねたいです。

html
1<div id="parent1">
2    <h2>Mission</h2>
3      <div class="c1">
4        <h3>あああああああ</h3>
5        <p>ああああああああああああああああああああああ</p>
6      </div>
7      <div class="c2">
8        <h3>あああああああ</h3>
9        <p>ああああああああああああああああああああああ</p>
10      </div>
11      <div class="c3">
12        <h3>あああああああ</h3>
13        <p>ああああああああああああああああああああああ</p>
14      </div>
15    </div>

css
1#parent1{
2    padding-top:60px;
3    text-align:center;
4    color:white;
5}
6.c1{
7  float:left;
8  background:blue;
9  text-align: center;
10  width: 500px;
11  height:500px;
12  padding:80px 40px;
13  border-radius:50%;
14  z-index:1;
15}
16.c2{
17  float:center;
18  background:red;
19  text-align: center;
20  width: 500px;
21  height:500px;
22  padding:80px 40px;
23  border-radius:50%;
24  z-index:2;
25}
26.c3{
27  float:right;
28  background:green;
29  text-align: center;
30  width: 500px;
31  height:500px;
32  padding:80px 40px;
33  border-radius:50%;
34  z-index:3;
35}

お分かりの方、ぜひよろしくお願いします。

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

回答1件

ベストアンサー

こちらでいかがでしょうか?

CSS
1#parent1{
2    padding-top:60px;
3    text-align:center;
4    color:white;
5}
6
7/* 同じ記述が3回出てくるのでまとめました。 */
8.c1,
9.c2,
10.c3 {
11  float:left; /* [1] */
12  text-align: center;
13  width: 500px;
14  height:500px;
15  padding:80px 40px;
16  border-radius:50%;
17  
18  /* [3] 追加。正円にするため必要。 */
19  box-sizing: border-box;
20}
21
22.c1{
23  background:blue;
24  
25  /* [4] */
26  position: relative;
27  z-index: 3; /* 値が1番大きいので最前面 */
28}
29.c2{
30  margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
31  background:red;
32  
33  /* [4] */
34  position: relative;
35  z-index: 2;
36}
37.c3{
38  margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
39  background:green;
40  
41  /* [4] */
42  position: relative;
43  z-index: 1; /* 値が1番小さいので最背面 */
44}
45
46/* [2] */
47.clearfix::after {
48  content: "";
49  display: block;
50  clear: both;
51}

以下、解説です。

[1] floatに「center」という値はない
floatで横並びのレイアウトを実装する場合、「float: left;」をすべての要素 (青、赤、緑の円) に指定

[2] .clearfixを使う
floatを使用する場合、clear: both;を使ってfloatの回り込みを解除する必要があります。
「.clearfix」という、広く知られているテクニックがあるので、使ってみてください。

CSS側には記述を追加したのですが、HTML側の操作が必要なので実施する場合は以下のように書き換えてください。
変更前: <div id="parent1">
変更後: <div id="parent1" class="clearfix">

参考URL:
https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc

** [3] box-sizing: border-box;を使用し、正円にする **
青、赤、緑の円が、楕円になっています。
正円にするためbox-sizing: border-box;を指定してください。

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

** [4] z-indexの仕様について **
z-indexは、position: relative;やposition: absolute;と一緒に指定しなければ意味を成しません。
また、z-indexの値が大きければ前面、小さければ背面に表示されます。

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/z-index

投稿2020/07/18 05:15

編集2020/07/18 05:27

new1ro

総合スコア4528

tomtom1

2020/07/18 07:18 編集

大変細かくご丁寧にお教えいただきありがとうございます。大変理解が深まりました！無事サークルが横並びで重なったのですが、サークル配列が左寄りになってしまいました。全体をdivで囲い、text-align:center; margin:0 auto; のcssを与えてみたのですが、中央寄りサークル配列にすることができませんでした。方法はありますでしょうか？追記 parentに、width指定。margin:0 auto;指定したら出来ました！ありがとうございます。