2017-08-07

tobijibu

文字選択時の背景色を調整してイラストを作る

   

ブラウザ上でマウスドラッグやCtrl + A等で、 文字を選択した時の色は、CSSで変更することができます。

重なった要素を選択した時、色も重なって表示されていることに気づきました。 当たり前のことだったので、今まで認識していなかったのです。 ふと、これを工夫すれば簡単なイラストくらい作れるかも？と思い、やってみました。


[SELECT ALL.] ※Ctrl+A or ⌘+Aを押してください


題材を決める

Windowsでは文字等を選択した時の色は基本的に紺色です。Macの場合はグレーです。

私は普段仕事ではWindowsを使っており、ブラウザはChromeを使っていますので水色でした。 なので色に引っ張られる形で、夏だし単純で描きやすい空と海の絵にしようと決めました。

選択時の色を設定

選択時の色の指定は::selectionを使います。CSSの疑似要素です。 FireFoxでは、そのままだと効かないので、ベンダープレフィックスをつけたパターンも用意します。

::selection {
  background: rgba(2, 119, 189, 0.01);
}
::-moz-selection {
  background: rgba(2, 119, 189, 0.01);
}

ここで透過度を0.01に指定します。 要素を沢山重ねて表現するので、出来る限り透明な状態にすることで、色を調整しやすくしています。

要素を作る

あとはイラストをイメージしながら要素を作っていきます。

たとえば雲は以下のように作りました。 文字は選択状態になると色が反転して白になります。この作用を利用して雲を作っています。

HTML
<div class="cloud">
    <span class="cloud-layer1">●</span>
    <span class="cloud-layer2">●</span>
    <span class="cloud-layer3">●</span>
</div>
CSS
.cloud {
  width: 100%;
  letter-spacing: 1px;
  line-height: 1px;
  position:absolute;
  z-index: 2;
}
.cloud-layer1 {
  font-size: 510px;
  position:absolute;
  left: 75px;
  top: 325px;
  z-index: 3;
}
.cloud-layer2 {
  font-size: 390px;
  position:absolute;
  left: -60px;
  top: 400px;
  z-index: 2;
}
.cloud-layer3 {
  font-size: 220px;
  position:absolute;
  left: 50px;
  top: 340px;
  z-index: 1;
}

空と海は青ですが、別の色を使いたいと思いました。 そこで、同じ青でも色を重ねて濃さの変化を出す手法をとりました。

泥臭い方法ですが、同じ要素をいくつも重ねます。

要素の中には (半角スペース)を指定します。 スペースは他の文字と違い、選択しても色が反転されませんので、とても都合が良いです。

海は簡易的に波を表現できるように3つのレイヤーに分けてあります。

HTML

<div class="sea">
    <span class="sea-layer1">&nbsp;&nbsp;&nbsp;</span>
    <span class="sea-layer1">&nbsp;&nbsp;&nbsp;</span>
    ～
    <span class="sea-layer2">&nbsp;&nbsp;&nbsp;</span>
    <span class="sea-layer2">&nbsp;&nbsp;&nbsp;</span>
    ～
    <span class="sea-layer3">&nbsp;&nbsp;&nbsp;</span>
    <span class="sea-layer3">&nbsp;&nbsp;&nbsp;</span>
    ～
</div>

飛んでいる鳥

空と海はできたのですが、それだけでは寂しいので何かワンポイントがあると良いなと思いました。

最初はヨットを考えたのですが、文字で船を表現するのが難しかったので断念し、鳥を入れることにしました。 鳥はターナ文字の中にある"飛んでいる鳥っぽい"文字を使います。

HTML

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansthaana.css">
～
<div class="bird">
    <span class="bird1">&#1921;</span>
    <span class="bird2">&#1926;</span>
    <span class="bird3">&#1927;</span>
</div>
CSS

.bird {
  font-family: 'Noto Sans Thaana', sans-serif;
  width: 100%;
  top: 0px;
  position:absolute;
  z-index: 4;
}

Windowsではターナ文字が表示できるのですが、Macでは表示できませんでした。 なのでGoogle Noto Fontsを使うことにしました。 昔はこんなこと出来なかったのに、便利になりましたね。

おまけ

ここまでで当初の目的は果たせたのですが、もうひと工夫です。 時間によって空と海の色を変えるようにしました。

CSSの疑似要素は普通の方法では変更できません。 そこで、HTMLのヘッダーにidを付与したstyleタグを定義しておき、 そのid要素に対してCSSの文字を上書きするという方法をとりました。

HTML
<head>
    ～
    <style id="selection" type="text/css"></style>
</head>
JavaScript
setSelectionStyle = function() {
  let date = new Date();
  let hour = date.getHours();
  let color = 'rgba(2, 119, 189, 0.01)';
  if (hour >= 17 && hour < 19) {
    color = 'rgba(255,87,34, 0.01)';
  } else if (hour >= 19 || hour < 5) {
    color = 'rgba(26,35,126 ,0.01)';
  }
  let selectionCSS = '::selection {background: __color__;} ::-moz-selection {background: __color__;}';
  let css = selectionCSS.replace(/__color__/g, color);
  document.getElementById('selection').innerHTML = css;
};

何の役にも立たないと思いますが、こんな表現方法もあるということで。

今回説明で利用したソースはこちらにあります。