- ベストアンサー
文章が終わったら背景も自動的に切れるようにするには
CSSにおいて、例えばh4を記述する際に、background-colorに青などの色を付けて、文字色は白にする、ということをするときに、そのままだとコンテンツエリア横いっぱいに背景が伸びてしまいます。 これを文章が終わったところで終わらせるにはどのように記述すればいいでしょうか？ padding: 5px 8px; などと記述して、文章スレスレで背景も終わらないような記述は当然おこなうので、厳密に言うと、この場合だと文章が終わってから8pxしたら背景が終わるようにしたい、ということです。 宜しくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLが下記のようにきちんと書かれていたら、 タブは＿に置換してあります。 <body> ＿<h1>サンプル</h1> ＿<div class="section"> ＿＿<h2>章見出し</h2><h2>もうひとつ</h2> ＿＿<p>段落</p> ＿＿<div> ＿＿＿<h2>見出し(直下でない)</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>項目見出し</h3> ＿＿＿<p>記事</p> ＿＿＿<div class="section"> ＿＿＿＿<h3>節見出し</h3> ＿＿＿＿<p>段落</p> ＿＿＿</div> ＿＿</div> ＿</p> </body> 見出しをそうしたいなら、スタイルシートで div.section>h1, div.section>h2, div.section>h3 /* 必要なだけ、section直下の見出しと言う意味 */ { display:inline-block; line-height:1.6em; padding:0.5ex 0.5em; background-color:blue; color:white; } で良いです。sectionの最初に登場する見出しだけでしたら div.section>h1:first-child, div.section>h2:first-child, div.section>h3:first-child{} とします。 それぞれのプロパティやセレクタの意味について、わからなければ聞いてください。
その他の回答 (2)
- webwebwebweb
- ベストアンサー率0% (0/1)
first-lineを使ってインライン要素を擬似的に定義してみてはいかがですか？ http://www.htmq.com/selector/first-line.shtml もしもブロック要素の特性を持たせたいならばdisplay:blockも同時に指定してみてはいかがでしょうか。
お礼
ありがとうございました
- naokita
- ベストアンサー率57% (1008/1745)
h4{width:○○em;}で設定するとか・・・ 複数のランダム環境を指定する場合だと、 h4をインライン要素にしたり、 <h4><span>文章</span></h4> h4{} h4 span{padding: 5px 8px; background-color:blue; color:white;}
お礼
ありがとうございました
お礼
display: inline-block; で解決しました！ 大変ありがとうございました！