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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

2147閲覧

ブロックレベル要素で
親要素と子要素の幅を同一にしたい。(親要素と同じサイズのwidth指定を、子要素ですると、レイアウトが崩れる理由がわかりません。

Ryuu6490

総合スコア9

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/01/01 10:51

前提・実現したいこと

レイアウトで
親要素と子要素の幅を同一にしたい。

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

レイアウトで
親要素と子要素の幅を同一にしたい。 親要素「chatmain」と同じサイズのwidth指定を、子要素「main-header」「messages」「form」ですると、 レイアウトが崩れる理由がわかりません。 基本的な考え方について教えてください。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" href="reset.css"> 8 <link rel="stylesheet" href="style.css"> 9 <title>chat-app</title> 10 </head> 11 <body> 12 <div class="wrapper"> 13 <div class="chat-side"> 14 <div class="side-header"> 15 </div> 16 <div class="groups"> 17 </div> 18 </div> 19 <div class="chat-main"> 20 <div class="main-header"> 21 </div> 22 <div class="messages"> 23 </div> 24 <div class="form"> 25 </div> 26 </div> 27 </div> 28 </body> 29</html>

css

1.wrapper { 2 display: flex; 3 height:100vh; 4 /* height:auto; */ 5 /* height:100%; */ 6} 7 8 9.chat-side { 10 background-color: #333333; 11 width: 300px; 12} 13 14.side-header { 15 background-color: #595959; 16 height:100px; 17} 18 19.groups { 20 background-color: #333333; 21 height: calc(100vh - 100px); 22} 23 24 25.chat-main { 26 background-color: #1a1d21; 27 width: calc(100% - 300px); 28} 29 30.main-header { 31 background-color: #3f3f3f; 32 height:100px; 33 width: calc(100% - 300px); 34} 35 36.messages { 37 background-color: #1a1d21; 38 height:calc(100% - 100px - 90px); 39 width: calc(100% - 300px); 40} 41 42.form { 43 background-color: #595959; 44 height:90px; 45 width: calc(100% - 300px); 46} 47

試したこと

子要素「main-header」「messages」「form」のwidthをそれぞれコメントアウト



幅が統一された!



しかし今回、親要素に対して子要素のwidthサイズ無効にすると、
同一になる理由は不明です。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

レイアウトで親要素と子要素の幅を同一にしたい。
親要素「chatmain」と同じサイズのwidth指定を、子要素「main-header」「messages」「form」ですると、レイアウトが崩れる理由がわかりません。

width: calc(100% - 300px) は親要素の横幅から 300px 引いたときの横幅となります。そのため、これを指定された要素は親要素よりも 300px だけ横幅が小さくなります。親要素と一致する横幅は、子要素の width プロパティの値を 100% にするか (動作確認用リンク)、初期値 auto のままにしておくことで得られます (動作確認用リンク)。

CSS

1body { 2 margin: 0; 3} 4 5.wrapper { 6 display: flex; 7 height: 100vh; 8} 9 10 11.chat-side { 12 background-color: #333333; 13 width: 300px; 14} 15 16.side-header { 17 background-color: #595959; 18 height: 100px; 19} 20 21.groups { 22 background-color: #333333; 23 height: calc(100vh - 100px); 24} 25 26 27.chat-main { 28 background-color: #1a1d21; 29 width: calc(100% - 300px); 30} 31 32.main-header { 33 background-color: #3f3f3f; 34 height: 100px; 35 width: 100%; 36} 37 38.messages { 39 background-color: #1a1d21; 40 height: calc(100% - 100px - 90px); 41 width: 100%; 42} 43 44.form { 45 background-color: #595959; 46 height: 90px; 47 width: 100%; 48}

CSS

1body { 2 margin: 0; 3} 4 5.wrapper { 6 display: flex; 7 height: 100vh; 8} 9 10 11.chat-side { 12 background-color: #333333; 13 width: 300px; 14} 15 16.side-header { 17 background-color: #595959; 18 height: 100px; 19} 20 21.groups { 22 background-color: #333333; 23 height: calc(100vh - 100px); 24} 25 26 27.chat-main { 28 background-color: #1a1d21; 29 width: calc(100% - 300px); 30} 31 32.main-header { 33 background-color: #3f3f3f; 34 height: 100px; 35} 36 37.messages { 38 background-color: #1a1d21; 39 height: calc(100% - 100px - 90px); 40} 41 42.form { 43 background-color: #595959; 44 height: 90px; 45}

しかし今回、親要素に対して子要素のwidthサイズ無効にすると、同一になる理由は不明です。

非置換ブロックレベル要素において width プロパティが初期値である auto に設定されている場合には auto は包含ブロックの幅となるためです。

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

投稿2020/01/02 01:21

s8_chu

総合スコア14731

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

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

Ryuu6490

2020/01/02 02:27

「width指定の100%というのはあくまで、その親要素に対する比率、 width指定を親要素と同じにしたからといって、サイズが同一になるわけではない。」 このように整理してみました。 分かりやすい回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問