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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

225閲覧

navに親要素でも無いmainのborderが被さってしまう原因を教えてください。

jadey5

総合スコア14

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/02/03 02:50

編集2019/02/03 03:13

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

navに親要素でも無いmainのborderが被さってしまう

HTML5

1コード 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="description" content=""> 7 <title>もふもふ</title> 8 <link rel="stylesheet" href="index.css"> 9 </head> 10 <body> 11 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <img src="image/google.png" class="logo"> 15 </div> 16 </div> 17 </header> 18 <div id="nav"> 19 <ul id="nav1"> 20 <li><a href="#">ホーム</a></li> 21 <li><a href="#">会社概要</a></li> 22 <li><a href="#">お問い合わせ</a></li> 23 </ul> 24 <a href="#" id="login">ログイン</a> 25 </div> 26 27 <main> 28 </main> 29 <footer></footer> 30 </body> 31</html>

CSS3

1@charset "utf-8"; 2 3header { 4 width: 100%; 5 height: 65px; 6 background-color: rgba(2,2,3,0.6); 7} 8.logo { 9 width: 60px; 10 margin-left:20px 11} 12#nav1 { 13 list-style: none; 14 text-align: center; 15 margin: 0px; 16 padding-top: 8px; 17} 18#nav1 li { 19 background-color: rgba(2,2,3,0.8); 20 width: 140px; 21 float: left; 22 padding: 5px; 23 margin-right: 30px; 24} 25#nav1 li a { 26 text-decoration: none; 27 color: white; 28 font-weight: bold; 29} 30body { 31 background-image: url(image/roma.jpg); 32 height: 800px; 33 background-size: cover; 34 margin-top: 0px; 35} 36#login { 37 background-color: black; 38 float: right; 39 text-decoration: none; 40 padding: 5px; 41 width: 100px; 42 text-align: center; 43 font-weight: bold; 44 color: white; 45 margin-right: 30px; 46} 47main { 48 height:100px; 49 border: 1px solid white; 50} 51

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

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

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

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

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

kei344

2019/02/03 02:52

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また質問フォームのタイトル横にある初心者マークを押すことで「初心者である」ということはわかりますので、本文に「初心者」と書かなくても大丈夫です。
teruri

2019/02/03 03:09

あ・・・ 編集してもらったのですがおしいww コードブロックの最初に```が1個多いため、開始と終了があべこべになってます。
jadey5

2019/02/03 03:14

編集完了しました。丁寧なご指摘ありがとうございました!
guest

回答2

0

やはりそうですね。

css

1main { 2 clear:both; 3}

clear: both;
でfloat解除が必要です。

あとborderの色は赤とかにすると見やすいかもです。

投稿2019/02/03 03:16

teruri

総合スコア220

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

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

0

ベストアンサー

keiさんのおっしゃるとおり、コードブロックが見えにくいのでコピペしにくくて、的確な答えが言えないのですが
たぶん、#navの要素の配下の要素がfloatになってるため、#navの高さが0になってしまってるんじゃないかなーと思います。

main

clear=both;
をつけてあげればいけそうかなーとか思ったり。

投稿2019/02/03 02:55

teruri

総合スコア220

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

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

kei344

2019/02/03 03:17

回答は編集できますよ。
jadey5

2019/02/03 03:30

clear: both;にすることで解決しました! 回答ありがとうございました。
teruri

2019/02/03 03:48

floatはややこしいことが多いので、ただ横並べにしたいだけなら display: flex; を最近は多用してます。
teruri

2019/02/03 03:49

key さん そうなんですね!! ありがとうございます。次から使ってみます。
kei344

2019/02/03 04:59

すみませんが、人のハンドルネームを省略したり間違えたりしないでください。お願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問