選択した文章の背景色や文字色、装飾を変更する方法/selection/CSS【初心者向け】

文字を選択した際の装飾を変更するCSSを紹介します。
サイトによって異なりますが、文字を選択したときに青色などに変わることが多いと思います。

このサイトでは、薄い灰色の背景色と白色の文字で表示されるように設定されています。

この色はCSSで好きな色に変更できます。そして、色を変えるだけではなく影を付けたりぼかしたりすることも可能です。
Webサイトを見ながら気になったことを調べたりメモしたりするためにコピペすることがあると思いますが、そのような時に訪問者へちょっと変わった印象を与えることができるようになります。

「::selection」というCSSの疑似要素の使い方とアレンジ方法の紹介です。

CSSの記載内容

選択色を変更するCSSの記載内容は以下の通りです。

/*選択色-緑*/
p::selection {
    background: #008000;
}

選択色の表示方法を変更する

このCSSを編集すると選択色の表示方法を変更することができます。

「background: #008000;」が背景色を指定する項目で上の例では緑色のカラーコード「#008000」が入力されています。
これを他の色のカラーコードに変更することで背景色を変更します。

ここからは「見た目を変更した文章」と「編集したCSS」の紹介、そしてCSSのどこをどのように修正したかを説明します。

背景色をピンク色に変更する

変更したCSSの記載内容は以下のとおりです。

/*選択色-ピンク*/
p::selection {
    background: #ff00ff;
}

3行目の#以下の英数字を修正しており、以下のようにピンク色のカラーコードである「#ff00ff」を入力して背景色をピンク色に指定しています。

background: #ff00ff;

選択した文字に影を付ける

変更したCSSの記載内容は以下のとおりです。

/*選択色-影*/
p::selection {
    text-shadow: 2px 2px 2px #000000;
}

3行目を以下のように修正しています。この項目では、文字の周辺に影を発生させる「text-shadow」というプロパティを使っています。

text-shadow: 2px 1px 2px #ff0000;

この例では、4つの値（2px、1px、2px、#ff0000）が入力されていますが、これは影の位置と色を指定する値で左から「横方向の位置」、「縦方向の位置」、「ぼかし具合」、「影の色」を指定します。
最初の値を大きくすると影の位置がどんどん右側に移動します。

文字に影を付けて文字色を変更する

変更したCSSの記載内容は以下のとおりです。

/*選択色-赤色影＋黒文字*/
p::selection {
    text-shadow: 2px 1px 2px #ff0000;
    color: #000000;
}

3行目に赤色のカラーコードである「#ff0000」を入力し、さらに4行目に文字色を指定するプロパティ（color）を追加して黒色のカラーコードを入力しています。

text-shadow: 2px 1px 2px #ff0000;
color: #000000;

選択した文字の輪郭を強調する

変更したCSSの記載内容は以下のとおりです。

/*選択色-文字輪郭強調*/
p::selection {
    text-shadow: -1px -1px 0 #000000,1px -1px 0 #000000,-1px 1px 0 #000000,1px 1px 0 #000000;
    color: #ffffff;
}

3行目を以下のように修正しています。「text-shadow」の値を4種類指定しています。4行目の文字色は白色に指定しています。

text-shadow: -1px -1px 0 #000000,1px -1px 0 #000000,-1px 1px 0 #000000,1px 1px 0 #000000;

このように「text-shadow」の値は複数指定することができます。
この設定では、文字の四方に1pxずつずらした黒色の影を表示することで輪郭を表現しています。
なお「text-shadow」の値が複数指定された場合は一番左の値で指定された影が一番上に表示されます。

選択した文字を強めにぼかす

変更したCSSの記載内容は以下のとおりです。

/*選択色-ぼかし*/
p::selection {
    background: #008000;
    text-shadow: 0 0 3px #ffffff;
    color: transparent;
  }

3行目の「background」では緑色のカラーコードを入力、4行目の「text-shadow」ではぼかし具合を指定する左から3つ目の値に大きめの値（3px）を入力しています。
そして、5行目の「color」のプロパティでは、以下のように入力し文字色を透明にしています。

color: transparent;

文字に長い影をつけて立体的な表現にする

変更したCSSの記載内容は以下のとおりです。

/*選択色-長い影*/
p::selection {
    background: #ffffff;
    text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
    color: #000000;
}

3行目の「background」では白色のカラーコードを入力、5行目の「color」では黒色のカラーコードを入力しています。
そして、4行目の「text-shadow」のプロパティでは、以下のようにちょっとずつ位置をずらした影を多数発生させて、さらに色も交互に変更することで立体的な影を表現しています。

text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;

まとめ

いかがでしたでしょうか。
文章を選択したときの背景色や文字の装飾を変更する方法を紹介いたしました。

Webサイトを読みながらメモや検索のため文字列を選択する際に少し変わった表現ができます。
背景や文字の色やぼかし具合などは今回紹介したように修正するとアレンジできると思いますので、ぜひ参考にしていただければと思います。