CSSで行ではなくテキストの後ろにだけ背景色を敷きたい!

Pocket
LINEで送る

見出し周りでたまに見かけるんですが、行(幅100%)ではなく、テキストの後ろにだけ背景色を敷きたい場合、どうしたらいいのか? HTMLは? CSSは? 調査してみました!
とちょっとふざけてスタートしましたが、改行が入った場合も崩れない方法を模索します。

その1:デフォルト(pタグにbackground-color指定)

普通の普通にpタグにbackground-colorを指定してみます。

<p class="text-background-test01">1行だけのテキスト</p>
<p class="text-background-test01">複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?</p>
.text-background-test01 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
  background:#FFD9D7;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?

Comment

デフォルトではpタグはblock要素なので、背景色も幅100%になりました。

その2:その1のpタグにdisplay:inline-block;の指定を追加

block要素じゃなくすればいいのでは? 試してみます。

<p class="text-background-test02">1行だけのテキスト</p>
<p class="text-background-test02">複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?</p>
.text-background-test02 {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
  background:#FFD9D7;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?

Comment

1行だけならテキストの下のみに背景色が敷かれましたが、複数行の場合は幅100%になっています。

その3:pタグにfilterでdrop-shadow

filterでdrop-shadowかけてみたいのでかけてみます。

<p class="text-background-test03">1行だけのテキスト</p>
<p class="text-background-test03">複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?</p>
.text-background-test03 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  filter: drop-shadow(10px 10px 5px #FFD9D7);
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?

Comment

これは……ぼかしですね。

その4:その3のdrop-shadowのボケをトル

ボケの設定を0にしてみましょう。

<p class="text-background-test04">1行だけのテキスト</p>
<p class="text-background-test04">複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?</p>
.text-background-test04 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  filter: drop-shadow(2px 2px 0px #FFD9D7);
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?

Comment

これは……タイポグラフィですね。

その5:入れ子でspanにbackground-color指定

ここまでpタグのみで試していましたが、ここからspanタグを入れ子にしてCSSで調整していきます。
まずは入れ子にしたspanタグにbackground-colorを指定します。

<p class="text-background-test05"><span>1行だけのテキスト</span></p>
<p class="text-background-test05"><span>複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?</span></p>
.text-background-test05 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
}
.text-background-test05 span {
  background: #FFD9D7;
  padding: 5px;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?

Comment

お! 理想に近付いてきました!
しかし、改行時の右端がpadding効きませんね。

その6:入れ子でspanにlinear-gradientをかける

強調したい箇所にマーカーを引いたような背景色を敷きたいときに便利なlinear-gradientを試してみましょう。全体を覆うようにすればいいのでは?

<p class="text-background-test06"><span>1行だけのテキスト</span></p>
<p class="text-background-test06"><span>複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?</span></p>
.text-background-test06 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
}
.text-background-test06 span {
  background: linear-gradient(transparent 0%, #FFD9D7 0%);
  padding: 5px;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?

Comment

こちらもその5と同様、改行時の右端がpaddingが効いていません。

その7:入れ子で単語ごとにspan区切りで疑似要素で背景色を敷く

レスポンシブ時、どのブラウザ幅でもきれいな位置で改行したい場合に使う、入れ子にしたspanタグをdisplay:inline-block;かける手。
それに擬似要素のposition:absolute;で背景色を敷いてみます。

<p class="text-background-test07"><span>1行だけの</span><span>テキスト</span></p>
<p class="text-background-test07"><span>複数行の</span><span>テキストの</span><span>場合は</span><span>どうかな?</span><span>改行しても</span><span>ちゃんと</span><span>なっていて</span><span>ほしいな?</span><span>どうかな?</span></p>
.text-background-test07 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
}
.text-background-test07 > span {
  position: relative;
  display: inline-block;
}
.text-background-test07 > span::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -5px;
  top: -5px;
  right: -5px;
  background-color: #FFD9D7;
  z-index: -1;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?

Comment

ブラウザ幅を伸び縮みさせてみてください。
スマホの方は横向きにすると改行部分が変更されるのが確認できると思います。
spanタグ区切りで改行されるので、単語の途中で改行されることがなくなります。そのためその5、その6のように改行時の右端がpaddingが効いてなくなる現象を回避することができます。

個人的にソースがシンプルじゃなくなるのが気になりますが、理想に一番近いのはこれかな 🤔

Pocket
LINEで送る

back to top