質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1699閲覧

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

tomtom1

総合スコア168

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/18 04:42

###実現したい事
サークルを三つ重ねて並べたいのですが、最後の一つが中々うまく重なりません。
イメージ説明
グリーンのサークルを同様に横並びにし、少し重ねたいです。

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}

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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;指定したら出来ました!ありがとうございます。
new1ro

2020/07/18 07:56

解決できたようで、よかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問