3

こちらの文章で文字の一部だけ黒く塗りつぶしておきたいのですが、何か方法はありますでしょうか。
jqueryをつかった方法はありましたが、できればcssだけでやりたいと思っています。

<p>アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>
supa
  • 5,381
  • 4
  • 17
  • 41
user37046
  • 287
  • 4
  • 13

1 Answers1

7

テキストの任意の箇所を選択するセレクタは、 CSS に用意されていません。そのため、装飾を適用したい箇所へ適当な要素へ入れておく必要があります。

文字色が黒の場合、単純に background プロパティと user-select プロパティを指定することで実現出来ます。

.marker {
user-select: none;
  background: #000;
}
<p>アリスは川辺でおねえさんの<span class="marker">よこ</span>にすわって、なんにもすることがないのでとても<span class="marker">退屈（たいくつ）</span>しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>

もうひとつの方法として、擬似要素を利用する方法もあります。

.marker {
  position: relative;
}

.marker::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
}
<p>アリスは川辺でおねえさんの<span class="marker">よこ</span>にすわって、なんにもすることがないのでとても<span class="marker">退屈（たいくつ）</span>しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>
supa
  • 5,381
  • 4
  • 17
  • 41