どうも、バナナです。

最近は、雨の日が続いていますね。
「雨ばかりで嫌だ」という人が多いですが、バナナは雨音を聞くのが好きなので嬉しいです。

今日は、タイトルの通り文字の色を半分だけ変える方法を説明していきたいと思います。

言葉だけだとイメージがつきにくいと思うので、こんな感じのやつです。

実際に動いているデモ

オシャレなサイトとかでよく見ますよね。
バナナもオシャレなサイトを作れますアピールしたかったのです。

HTML

<h1 class="txt" data-title="White or Black">White or Black</h1>

※必要な部分のみを抜粋しています。

CSS

.txt::before{
　content: attr(data-title);
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}

※必要な部分のみを抜粋しています。

コードの解説

仕組みはすごく簡単です。
それぞれ色違いのテキストを同じ場所に配置して重ねています。

なので、色違いのテキストを2つ用意する必要があります。

.txt::before{
　content: attr(data-title);
}

しかし、HTML上に同じテキストを2つ記述するのが嫌だったので、今回はattr() 関数 を使用しました。

attr() はCSSの関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

attr() – CSS: カスケーディングスタイルシート | MDN

簡単に言うと、指定した要素のhref属性やdata属性などを取得して、その値をスタイルシート側で使用することができます。

今回は、.textのdata-title="White or Black"を疑似要素で表示させました。

attr()は使い方によってとっても便利なので覚えておきましょう！
次に半分だけ重ねるので、疑似要素のwidthを半分に設定します。

.txt::before{
　content: attr(data-title);
  width: 50%;
}

しかし半分にしただけではテキストが折り返されてしまいます。
なので、折り返さないようにwhite-spaceを設定します。

.txt::before{
　content: attr(data-title);
  width: 50%;
  white-space: nowrap;
}

テキストが折り返してしまうのは、解消できました。
しかし、テキストが半分の大きさよりはみ出しています。

はみ出した部分を見えなくするためにoverflowを指定して非表示にします。

.txt::before{
　content: attr(data-title);
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
}

非表示にすることができました。
あとはpositionで重ねるだけです。

.txt::before{
　content: attr(data-title);
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}

これで無事に完成です！

まとめ

今日はCSSで文字の色を半分だけ変える方法を説明しました。

やっていることはそこまで難しくないですけど、ただテキストを配置するだけとは一味違った雰囲気を出せますよね。

まだ実際にお仕事では使ったことないですけど、やってみたかったので今回記事にしてみました。

皆さんもぜひ挑戦してみてください。

今回はこの辺で。
またね。