Q&A
最低限、他者が問題を再現できるのに十分なコードを載せてください
はじめまして。
最近、HTMLとCSSに興味を持ったのですが下記のようにコードを書いたところ
buttonタグの幅からnavタグの幅がはみ出すような表示になります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta-charset="utf-8"> 5 <title>slidemenu</title> 6 <link rel="stylesheet" href="../css/slidemenu.css"></script> 7 <script src="../Javascript/slidemenu.js" defer></script> 8</head> 9<header> 10 <button class="menu-button" >メニュー</button> 11 <nav class> 12 <ul> 13 <li>about</li> 14 <li>recruit</li> 15 <li>contact</li> 16 <li>faq</li> 17 </ul> 18 </nav> 19</header>
css
1header { 2 background-color: #333333; 3 text-align: right; 4 padding: .5rem; 5} 6.menu-button{ 7 border: 1px solid #ffffff; 8 color: #ffffff; 9 font-size: 16px; 10 padding: .5rem 1rem; 11 background: transparent; 12 line-height: 1; 13} 14ul{ 15 white-space: nowrap; 16 box-sizing:border-box; 17 padding-inline-start: 0; 18} 19ul li{ 20 list-style-type: none; 21 margin: 2rem 0; 22} 23nav{ 24 background: #B0D6AD; 25 position: absolute; 26 text-align: center; 27 top: 3.125rem; 28 font-size: 1.5rem; 29 right: 0; 30 width: 0; 31 transition: .5s; 32} 33nav.menu-list{ 34 width: 100%; 35 } 36
最終的には右上のメニューボタンを押したときに出てくるメニュー部分が上部の
黒いバーと同じ幅になってほしいのですが、実現するためにはどのようなプロパティを
追加する必要がありますでしょうか。
教えていただけると助かります。
2点補足願います。
・「最終的には右上のメニューボタンを押したときに出てくるメニュー」とのことですが、押してもメニューが出ませんでしたので、押すとメニューが出るコードをご提示ください。また、メニューボタンは左上にありましたので、他にもなんらかのコードが不足している可能性があると思います。
・「上部の黒いバー」とは、ご提示のHTMLでいうと、どの要素ですか？
挙動を正確に再現させるためのJavaScriptのコードが不足しておりました。
不完全な状態で質問してしまい大変申し訳ありませんでした。
別の方からの回答からCSSプロパティとしてheaderにposition:relative;を追加したところ
私の想像していた動きが実現できました。
改めまして、不足したコードを提示してしまい申し訳ありませんでした。
また、このことについてご指摘してくださりありがとうございまいした。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slidemenu</title>
<link rel="stylesheet" href="../css/slidemenu.css">
<script src="../Javascript/slidemenu.js" defer></script>
</head>
<header>
<button class="menu-button" >メニュー</button>
<nav class>
<ul>
<li>about</li>
<li>recruit</li>
<li>contact</li>
<li>faq</li>
</ul>
</nav>
</header>
```
```css
header {
background-color: #333333;
text-align: right;
padding: .5rem;
position: relative;
}
.menu-button{
border: 1px solid #ffffff;
color: #ffffff;
font-size: 16px;
padding: .5rem 1rem;
background: transparent;
line-height: 1;
}
ul{
white-space: nowrap;
box-sizing:border-box;
padding-inline-start: 0;
}
ul li{
list-style-type: none;
margin: 2rem 0;
}
nav{
background: #B0D6AD;
position: absolute;
text-align: center;
top: 3.125rem;
font-size: 1.5rem;
right: 0;
width: 0;
transition: .5s;
}
nav.menu-list{
width: 100%;
}
```
```javascript
const btn=document.querySelector(".menu-button")
const nav=document.querySelector("nav")
btn.addEventListener("click",()=>{
nav.classList.toggle("menu-list");
});
```
回答2件
0
ベストアンサー
nav.menu-list の親が body 要素になっているためだと思われます。
header に position: relative; を追加して「この要素が親である」と明示するといかがでしょうか。
position: absolute; width: 100%; と親要素いっぱいに広がる指定がしてあるので header と同じ幅になると思います。
header { background-color: #333333; text-align: right; padding: .5rem; position: relative; /* 追加 */ }
投稿2021/07/27 06:10
総合スコア163
ご回答ありがとうございます。
ご指摘通りpositionを指定したところ自分が考えていた通りの表示を実現できました。
machine_machine様の回答に大変助けられました。
本当にありがとうございました。
0
多分ですが、ご提示されているHTMLにある誤りをブラウザが自動で修正した結果、そのような表示崩れを起こしているのではないかと思います。
以下のように修正してみてください。
<meta-charset="utf-8"> ↓ <meta charset="utf-8">
<link rel="stylesheet" href="../css/slidemenu.css"></script> ↓ <link rel="stylesheet" href="../css/slidemenu.css">
投稿2021/07/27 03:02
総合スコア28
ご回答ありがとうございます。
改めてコードを見直したところ確かに不要な記述が多く見つかりました。
ご指摘いただいた通り修正し、コードを加えたところ想定した動きが実現しました。
ありがとうございました。
あなたの回答
tips
プレビュー
