3

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

<p>アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈(たいくつ)しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>

1 件の回答 1

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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。