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

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

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

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

CSS

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

Q&A

解決済

2回答

819閲覧

CSSで要素に色を付けたときに各要素の幅が揃っていない

botpe

総合スコア2

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/07/26 14:38

編集2021/07/26 14:41

はじめまして。
最近、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

最終的には右上のメニューボタンを押したときに出てくるメニュー部分が上部の
黒いバーと同じ幅になってほしいのですが、実現するためにはどのようなプロパティを
追加する必要がありますでしょうか。
教えていただけると助かります。

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

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

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

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

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

itagagaki

2021/07/26 23:26

最低限、他者が問題を再現できるのに十分なコードを載せてください
Lhankor_Mhy

2021/07/27 00:48

2点補足願います。 ・「最終的には右上のメニューボタンを押したときに出てくるメニュー」とのことですが、押してもメニューが出ませんでしたので、押すとメニューが出るコードをご提示ください。また、メニューボタンは左上にありましたので、他にもなんらかのコードが不足している可能性があると思います。 ・「上部の黒いバー」とは、ご提示のHTMLでいうと、どの要素ですか?
botpe

2021/07/27 13:39

挙動を正確に再現させるための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"); }); ```
guest

回答2

0

ベストアンサー

nav.menu-list の親が body 要素になっているためだと思われます。
headerposition: relative; を追加して「この要素が親である」と明示するといかがでしょうか。
position: absolute; width: 100%; と親要素いっぱいに広がる指定がしてあるので header と同じ幅になると思います。

header { background-color: #333333; text-align: right; padding: .5rem; position: relative; /* 追加 */ }

投稿2021/07/27 06:10

machine_machine

総合スコア162

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

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

botpe

2021/07/27 13:44

ご回答ありがとうございます。 ご指摘通りpositionを指定したところ自分が考えていた通りの表示を実現できました。 machine_machine様の回答に大変助けられました。 本当にありがとうございました。
guest

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

nappy

総合スコア28

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

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

botpe

2021/07/27 13:47

ご回答ありがとうございます。 改めてコードを見直したところ確かに不要な記述が多く見つかりました。 ご指摘いただいた通り修正し、コードを加えたところ想定した動きが実現しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問