初歩的な質問です。<div>のwidthを可変に

初歩的な質問です。

<div>のwidthを可変にしたいのです。

***　html ***
<div style="background-color: #000000;">＝＝＝＝＝＝＝＝＝＝＝＝＝</div>

***　結果 ***
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

と画面に合わせて広くなりますが。

***　目標 ***
■■■■■■■■■■■■■

(＝＝＝＝＝＝＝＝＝＝＝＝＝)

文字数に合わせて背景が黒くなるようにするにはどのようにしていしたらよいのでしょうか？


今回の例ではわかりやすいように黒背景ですが
要は　<div>の範囲を文字数に合わせて可変にしたいということです。

解答お願いします。

No.3 回答者： tkmojo 回答日時： 2013/09/04 11:24

1の方の回答は誤りで、divのようなブロックレベル要素はwidthを指定しない場合は端から端までの範囲になります。

質問者様が試されたように、display:inline;を指定すれば一応は文字に合わせて変動するようにはなります。
padding等で文字に対しての背景色の範囲を設定しようと思えばdisplay:inline;ではできませんので
display:inline-block;を入れるといいです。

ブロックレベル要素に対するinline-blockの指定はIE6で無効になるバグがあります。
スターハックで下記のように指定すれば有効にできます。（ハックは最後の2行）

【例】
div{
　background-color:#000;
　padding:10px;
　display:inline-block;
　* display:inline;
　* zoom:1;
}

ブロックレベル要素・インライン要素にはどんなものがあるか、
それぞれどんな挙動をするかなどはcssレイアウトの基本中の基本ですので
しっかり勉強して把握する事をお勧めします。

No.2 回答者： ORUKA1951 回答日時： 2013/09/01 09:59

行内要素(inline Element)とブロック要素(block Element)の区別が出来ていないようです。

仕様書は一度通して読んで置かれると良いでしょう。
　⇒7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　ブロック要素は、前後に改行を挟むブロックとして整形されます。

＞<div>のwidthを可変にしたいのです。
　と言う時点で矛盾してしまいます。

　これはスタイルシートのdisplayプロパティで変更できます。
　⇒9.2.4 The 'display' property( http://www.w3.org/TR/CSS2/visuren.html#display-p … )
　邦訳のあるCSS2と、現行のCSS2.1ではdisplayの値が異なりますので、原文へのリンクです。
　文字数によって可変できるのは、inlineとinline-blockぐらいでしょう。

　また、原則としてdisplayの値を変更--特にinline⇔blockは、避けることが望ましいです。またdivは、本来は『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』もので、デザインのために使用する物ではありません。

　あなたの場合、
<div class="section">
　<p>詳しい説明は<strong>HTML 4.01仕様書(邦訳)</strong>をご覧ください。</p>
</div>

div.section p strong{background-color:black;color:white;padding:2px 4px;}

などですむのではないですか？？

　DIVは、他に文書構造を示す適切な要素がないときの最後の手段としてclassやidを併用して文書構造を示す。
　と考えてください。そうすると、HTMLもスタイルシートも簡単になります。

　

No.1 回答者： Safe_Mode 回答日時： 2013/09/01 07:24

<div>のようなブロック要素はwidthを指定しなければ文字数に合わせて可変となるはずですけど。

この回答へのお礼

解答ありがとうございます。

Chromeの「要素を検証」をしたら


***　要素を検証　 ***
element.style {
background-color: #000000;
}
Matched CSS Rules
user agent stylesheetdiv {
display: block;
}

となっていたので、「display: inline;」をくっつけて

***　html ***
<div style="background-color: #000000; display: inline;">＝＝＝＝＝＝＝＝＝＝＝＝＝</div>

としたら

***　目標 ***
■■■■■■■■■■■■■

のよう可変になりうまくいきました。


cssresetしても　同じでしたので　おそらく　デフォルトであたっているようです。

お礼日時：2013/09/01 07:50