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

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

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

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

CSS

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

Q&A

1回答

10543閲覧

div要素の配置が重なってしまう。

SotaKosuki

総合スコア10

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/09/24 14:12

編集2022/01/12 10:55

前提・実現したいこと

WEBアプリのデザインを作成しています。
以下のtop-containerクラスの下にusage-containerクラスを配置したいです。
直下ではなく、2つが重なってしまうため、原因を教えてください。
pcサイズによってサイズを変更したいので、各クラスの位置を固定しない形で調整したいです。
top-container:キャッチコピー、リスト(aaa,bbb,ccc)
usage-container:赤塗り潰し部分(あああああああああああ......)
→リスト要素の一部が下の要素に重なってしまう。
イメージ説明

HTML

1 <div class="top-container"> 2 <h2 class="top-messageA"> 3 キャッチコピー 4 </h2> 5 <div class="top-main"> 6 <ul class="top-messageB"> 7 <li>aaa</li> 8 <br> 9 <li>bbb</li> 10 <br> 11 <li>ccc</li> 12 </ul> 13 <ul class="top-messageC"> 14 <li>aaa</li> 15 <br> 16 <li>bbb</li> 17 <br> 18 <li>ccc</li> 19 </ul> 20 </div> 21 </div> 22 <div class="usage-container"> 23 あああああああああああああ 24 <br> 25 あああああああああああああああ 26 <div class="usageA"> 27 28 </div> 29 </div>

CSS

1.top-container{ 2 margin-top : 50px; 3 position: relative; 4 background-color: #ddd; 5} 6.top-main{ 7 padding: 200px 0 100px; 8 text-align: center; 9 height: auto; 10} 11.top-messageA{ 12 position: center; 13 font-size: 70px; 14 font-weight: 500; 15} 16 17.top-messageB { 18 font-size: 30px; 19 margin-left: 20%; 20} 21.top-messageC { 22 font-size: 30px; 23 margin-right: 20%; 24} 25.top-messageB ul{ 26 background: rgba(255,255,255,0.8); 27} 28.top-messageC { 29 font-size: 30px; 30 margin-right: 20%; 31 float: right; 32} 33.usage-container{ 34 background-color: red; 35} 36

試したこと

divの囲み方からpositionまでかなり色々試しましたが、上手くいきませんでした。

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

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

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

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

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

dit.

2018/09/24 23:55 編集

ulとliの関係性が逆では?https://saruwakakun.com/html-css/basic/ul-ol-li  また、「最終的に表現したい形」を手書きでもペイントソフトでも良いので書いて提示できると、わかりやすいです。
SotaKosuki

2018/09/25 15:06

おっしゃる通り、単純なミスをしていたので取り急ぎ修正しました 。有難うございます
guest

回答1

0

position: center; とりあえずこれは仕様に無い。

【position - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/position

float: left; を消せば「重なってしまう」は解消されると思います。
レイアウトを考える際に position とか float を使わないで構成を考えて、適切な部分にのみ使用するのがよいと思います。

【段組みのCSS。】
https://lopan.jp/layout2/

【よこ並びのCSS。】
http://lopan.jp/layout/

投稿2018/09/24 14:20

kei344

総合スコア69366

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

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

SotaKosuki

2018/09/24 22:49

kei344さん 回答ありがとうございます! ご指摘の通り、floatを消したところ重ならないようになりました。 今回はあまり感懐がないと思い消していましたが、floatで左右に2つのリストを並べていた為にこのような作りになっていました。 floatを使わずに左右に並べる場合は、、いただいたリンクを見ながら試してみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問