「width=auto」「width=100%」の違い(html,css)

画像width-auto-difference109

こんにちは tanaka です。

今回は、
「width=auto」「width=100%」の話です。

とっても分かりくいですよね。

結論から言うと「width=auto」「width=100%」は、

 1:「auto」は、自動で何かやってくれる。(display:block除く)
 2:「100%」は、親要素のcontent幅を参照する。

と言う感じです。

そして

「auto」「100%」の違いは、
「display:○○」側から見ると理解しやすくなります。

詳しくは、以下の通りです。

<width=auto>

inline文字の幅になる
inline-block文字の幅になる
block全てのボックスモデルを入れる

<width=100%>

inline不可
inline-block親要素のcontentの幅になる
block親要素のcontentの幅になる

それでは、
詳しく説明していきます。

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

「auto」と「100%」は、役目が違う

「width=auto」と「width=100%」では、
そもそも役目が違います。

なので

分けて説明します。

そして

以後「box-sizing: content-box」で話を進めます。

「width=auto」とは

「width=auto」とは?

「auto」と聞くと「自動」で何かしてくれそうですよね?

実際その通りで

widthが「自動で文字の幅」になります。(display:block除く)

実際にその様子を見てみましょう。

<display:inline>

「あああああああ」を「display:inline」にした時の例です。

「width=auto」「display:inline」では、

widthが「文字の幅」になります。

画像width-auto-difference100

文章が長くなった場合は、折り返されます。

画像width-auto-difference101

(注意)説明は全て「box-sizing: content-box」

<display:inline-block>

「あああああああ」を「display:inline-block」にした時の例です。

「width=auto」「display:inline-block」では、

widthが「文字の幅」になります。

画像width-auto-difference102

折り返しは「display:inline」と少し異なります。

画像width-auto-difference103

(注意)説明は全て「box-sizing: content-box」

<display:block>

要素を「display:block」にした時の例です。

「width=auto」「display:block」では、
かなり特殊な状態になります。

「content」「padding」「border」「margin」
全てを親要素のcontentへ入れます。

その際「box-sizing」の設定は一切無視されます。

画像width-auto-difference104

「width=100%」とは

それでは「width=100%」はどうでしょうか?

パーセントなので何かを参照したの割合です。

何を参照したのでしょうか?

それは

親要素のcontentです。

つまり

「width=100%」=「親要素のcontent幅」

と言うことになります。

<display:inline>

「あああああああ」を「display:inline」にした時の例です。

「display:inline」は、
widthの設定ができません。

widthを設定しても「width=auto」になります。

画像width-auto-difference105

(注意)説明は全て「box-sizing: content-box」

<display:inline-block>

「あああああああ」を「display:inline-block」にした時の例です。

「width=100%」「display:inline-block」では、

widthは「親要素のcontentの幅」になります。

画像width-auto-difference106

(注意)説明は全て「box-sizing: content-box」

<display:block>

要素を「display:block」にした時の例です。

「width=100%」「display:block」では、

widthは「親要素のcontentの幅」になります。

画像width-auto-difference107

(注意)説明は全て「box-sizing: content-box」

<まとめ>

「width=auto」と「width=100%」は、
役目が違う。

<width=auto>

inline文字の幅になる
inline-block文字の幅になる
block全てのボックスモデルを入れる

<width=100%>

inline不可
inline-block親要素のcontentの幅になる
block親要素のcontentの幅になる

以上、
「width=auto」「width=100%」の違い(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました