cssで背景の幅を設定

cssで背景の幅を設定

GIGAZINE< http://gigazine.net/ >の各タイトル（黄色の背景）のように、文字の背景を一番右までになるように設定するにはcssをどういじればいいのでしょうか
コードを読んでみてるのですが、特にかわったことをしている部分を見つけられませんでした
普通にbackground-colorを書くと普通に文字の部分だけに背景色が入ってしまいます

No.4 ベストアンサー 回答者： abril 回答日時： 2010/05/31 18:57

とても単純な理屈です。

（黄色の）背景色を指定しているのがh2（見出しレベル2）要素だからです。
h2要素はブロック要素ですのでdisplayプロパティを変更したりfloatさせたりしない限り、内包するテキストのボリュームに関わらず（例え1文字しかなくても）規定の表示幅（この場合であれば親要素であるメイン領域の幅）いっぱいにレンダリングされます。

後は気になった点の補足です。

> cssで背景の幅を設定

背景色（背景画像）自体には幅は指定できません（背景はテキストや画像といった要素（内容）があってこそ存在するので、背景自身に幅とか高さという概念はありません）。background-colorやbackground-imageプロパティの描画領域は適用されるコンテナブロックの幅（と高さ）に従います。

> No.2
> liはライン要素なので、そのまま背景を指定しても文字だけに色が付きます。
> なので、liをブロック要素(display:block)にして背景を指定してあげれば全体に色が付くはず。

ライン要素って何でしょう…？もしかしてインライン要素のタイポでしょうか？だとしても、liはインライン要素ではないですね。
li要素の描画領域の幅は親要素であるulやolに準じます。そしてul・olはブロック要素です。ですのでul・olの初期状態ではliに背景色を指定した際に「文字だけ」に色がつくという状態にはならず、ulやolの幅と同じだけ背景が描画されます。よって、liをわざわざ"display: block"にする必要ありません。

この回答へのお礼

詳細な説明ありがとうございます
要素に気をつけてcssをチェックしたらできるようになりました
ありがとうございます

お礼日時：2010/05/31 23:25

No.3 回答者： rurino 回答日時： 2010/05/31 10:52

h2のclass="title"で背景色を敷いているのではないでしょうか。

実際の指定は外部スタイルシートに入っていると思われます。

この回答へのお礼

ありがとうございます！

お礼日時：2010/05/31 23:23

No.2 回答者： nekohigex 回答日時： 2010/05/31 01:17

試してませんが

li{
display: block;
background-color:#ff0000;
}

こんな感じですかね。
liはライン要素なので、そのまま背景を指定しても文字だけに色が付きます。
なので、liをブロック要素(display:block)にして背景を指定してあげれば全体に色が付くはず。

この回答へのお礼

inline と　block　に気をつけてcssをチェックしたらできるようになりました
ありがとうございます

お礼日時：2010/05/31 23:22

No.1 回答者： hujitomo 回答日時： 2010/05/31 00:59

ブロックレベル要素に background-color を普通に指定してやればＯＫ

例
<p style="background-color:yellow">サンプル</p>

『ブロックレベル要素』が理解できない場合は Google 先生に聞いてみて

この回答へのお礼

ブロック勉強したらわかるようになりました
ありがとうございます

お礼日時：2010/05/31 23:23