CSSだけで、対象となるテキストのみの背景色を設定するには？

Question

さらに

ソース非AMP版編集

Question

テキストの後ろに緑の背景を動的に追加するにはどうしたらいいでしょうか。ただし、ページ全体の幅ではなく、テキストの部分だけです。

現在のコードでは、緑色の背景がページ全体に広がってしまいます。HTMLやJavascriptを変更することはできず、CSSファイルのみの変更となります。

.

<h1>The Last Will and Testament of Eric Jones</h1>

h1 { 
    text-align: center; 
    background-color: green; 
}

プログラミング

html css

14日 1月 2013 в 1:09

15 ビュー

ソース非AMP版編集

非常に簡単な方法は、<span>タグを追加して、その中に背景色を追加することです。そうすれば、思い通りの表示になります。

<h1>  
    <span>The Last Will and Testament of Eric Jones</span>
</h1>

そしてCSS

h1 { text-align: center; }
h1 span { background-color: green; }

インライン要素タグの中に<span>タグを入れることで、効果を装ったコンテンツの上にのみスパンすることができます。

8

0

解説 (0)

ソース非AMP版編集

text-alignment centerを削除して、テキストが入っている<h1>または<div>を中央に配置してみてください。

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

2

0

解説 (0)

BalusC · Accepted Answer · 2013-01-14T01:12:26+00:00

テキストは、<span>などのインライン要素の中に入れます。

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

そして、インライン要素に背景色を適用します。

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

インライン要素の大きさはそのコンテンツの大きさと同じなので、これで大丈夫でしょう。