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

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

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

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

Q&A

解決済

3回答

744閲覧

width: 100% と、width: auto の違い

Sa2Knight

総合スコア11

CSS

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

0グッド

1クリップ

投稿2018/11/18 02:52

編集2018/11/18 03:41

題の通りです。

CSSにおいて、width: 100% と、 width: auto の違いは、親要素のpadding/borderを含むかどうかと聞いた(参考)ので、早速試してみたのですが、どちらを指定しても、paddingを含まない最大幅になってしまいます。

html

1<div class="outer"> 2 <div class="inner1"> 3 inner1 4 </div> 5 <div class="inner2"> 6 inner2 7 </div> 8</div>

css

1div.outer { 2 background-color: gray; 3 padding: 0 10px 0 10px; 4} 5div.inner1 { 6 width: 100%; 7 background-color: green; 8} 9div.inner2 { 10 width: auto; 11 background-color: blue; 12}

結果(jsfiddle)

私のwidthに対する理解が間違っているのでしょうか。あるいはコードの書き方やjsfiddleの問題でしょうか?
非常に初歩的な問題かと思いますが、ご回答よろしくおねがいします。

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

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

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

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

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

m.ts10806

2018/11/18 03:29

どこでですか?出展もとがあれば明記してください >と聞いた
Sa2Knight

2018/11/18 03:42

ご指摘ありがとうございます!確かに出典を併記することは必須でしたね。
think49

2018/11/18 04:07

個人サイトは間違いが含まれる場合があるので、参考にするのは信頼性の高いサイトに限定した方が良いとおみます。初心者向けですと、MDNがお勧めです。
guest

回答3

0

width プロパティ

width: auto は計算方式がややこしいので一概にはいえませんが、CSS 2.2 規定では width プロパティは content-box の幅を指定します。

ただし、CSS3 で box-sizing プロパティが出来たので、width プロパティが border-box の幅指定になる場合もあります。

CSS ボックスモデル

ボックスモデルを読めば、4種のボックスの違いが分かります。

ボックス名称説明補足
content-boxwidth プロパティ、height プロパティで指定された領域を囲うボックスbox-sizing: content-box (初期値)の場合に限る
padding-boxpadding プロパティで指定された領域を囲うボックス
border-boxborder プロパティで指定された領域を囲うボックスbox-sizing: border-box が指定された場合は、width プロパティ、height プロパティで指定された領域を囲うボックスとなる
margin-boxmargin プロパティで指定された領域を囲うボックス

width: 100%

width を%単位で指定した場合、親要素の width 値に対する割合になります。

HTML

1<style> 2div.outer { 3 border: solid 1px red; 4 padding: 1em; 5 background-color: #fee; 6} 7div.inner1 { 8 width: 100%; 9 margin: 1em; 10 padding: 1em; 11 border: solid 1px green; 12 background-color: #efe; 13} 14div.inner2 { 15 width: auto; 16 margin: 1em; 17 padding: 1em; 18 border: solid 1px blue; 19 background-color: #eef; 20} 21</style> 22</head> 23<body> 24<div class="outer"> 25 parent 26 <div class="inner1">width: 100%</div> 27 <div class="inner2">width: auto</div> 28</div>

width 値は margin, padding, border の幅を含みませんので、width: 100& 指定した要素はその分、突き抜けてしまいます。
width: auto で期待通りならそれでよし。
期待通りでなければ、border-box を使用するか、calc() で演算する必要があります。

Re: Sa2Knight さん

投稿2018/11/18 04:05

編集2018/11/18 06:50
think49

総合スコア18156

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

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

Sa2Knight

2018/11/18 08:56

詳細なご解説いただきありがとうございます! 今まで見よう見まねでしかCSSを書いていなかったので、ボックスモデルについてしっかりと理解を深めて、このような頓珍漢な質問をなるべくしないように精進したいと思います!
guest

0

親要素のpadding/borderを含むかどうかと聞いたので

box-sizingと混ざっていませんか?

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

【CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary】
http://phiary.me/css3-box-sizing/

投稿2018/11/18 03:30

kei344

総合スコア69364

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

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

Sa2Knight

2018/11/18 08:54

ありがとうございます! CSS3では `box-sizing` が便利とは聞いていましたが、どんなものなのかはまだ調べていないので、引き続き調査してみたいと思います。
guest

0

ベストアンサー

width: 100% と、 width: auto の違いは、親要素のpadding/borderを含むかどうかと聞いた

これは「前提」とテストコードが間違っていて、「親要素」ではなく、該当の「要素そのもののpadding/borderを含むかどうか」です。
※提示コードで言えば「子要素」そのものの事です。

提示のHTMLと以下のCSSで確認して下さい。

CSS

1div.outer { 2 width: 300px; 3} 4 5div.inner1 { 6 width: 100%; 7 padding: 0 10px 0 10px; 8 background-color: green; 9} 10 11div.inner2 { 12 width: auto; 13 padding: 0 10px 0 10px; 14 background-color: blue; 15}

違いが出るはずです。「参考先」も親要素のpadding/borderとは言っていないと思います。
この違いを理解した上で「box-sizing」を上手く利用してください。

投稿2018/11/18 06:08

yoshinavi

総合スコア3521

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

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

Sa2Knight

2018/11/18 08:53

ご丁寧なご回答ありがとうございました! どうやら参考先の記事を見た際に誤認したことをそのまま覚えてしまっていたようです。 要素そのもののpadding/borderを考慮するかどうかですね。修正版のコードで試したところ、違いが出ることが確認できました。ありがとうございました!
yoshinavi

2018/11/18 20:18

参考先の記事も、パッと見では「boxA」「boxB」の図示が、親子関係に見えなくもないので、誤認も仕方が無いかも知れませんね。 「think49」さんも言われていますが、個人記事の場合「解釈間違い」で「検証」が曖昧であったり「推測」だったりで「誤り」の場合がたまにあるのは事実なので、MDN(https://developer.mozilla.org/ja/docs/Web)と他サイトでの複数確認をされると良いかと思います。 解決されて何よりです。 (^^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問