61380


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

[code]

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


CC BY-SA 4.0
2019-12-12T09:56:03.950
61378
2019-12-12T10:41:14.510
2019-12-12T10:01:14.480
32986
37046
question
css
文章の一部を黒く塗りつぶしたい


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

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

[code]

    .marker {
    user-select: none;
      background: #000;
    }
[/code]

[code]

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

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

[code]

    .marker {
      position: relative;
    }
    
    .marker::before {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #000;
      content: "";
    }
[/code]

[code]

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


CC BY-SA 4.0
2019-12-12T10:41:14.510
61380
2019-12-12T10:41:14.510
32986
61378
answer