CSSだけではn文字目やn行目の指定はできないけど、文字毎・行ごとにテキストの色を変える方法
ピュアなCSSの機能では要素に対してはn番目でのスタイル割り当てができるものの、n文字目やn行目の指定してスタイルを割り当てる事はできません。
通常CSSだけでn文字目、n行目毎にスタイルを当てる場合はspanタグなどを使って要素として反映させていくのですが、量が多いとHTML側の記述、あるいは各番号毎に書く必要のあるCSS側も記述量が大変な事になってしまいます。
今回はjsなどのスクリプトやspanタグを使わずにでも、文字毎・行毎にテキストの色を変えるくらいなら簡単にできるだろうと、紹介してみます。
文字毎に色を変えるCSSサンプル
See the Pen CSS slice text by yochans (@yochans) on CodePen.
各色の始点と終点の位置を揃えたグラデーションを使って文字毎の色を変更しています。
文字数が長くなると大変ですので、linear-gradientではなくrepeating-linear-gradientを使って色の記述数以上は繰り返します。
フォントサイズに合わせる為に、em指定（1em＝フォントサイズ）していますが、文字間サイズの設定を変えたりとかの関係でズレる可能性もあり、その場合は調節が必要かもしれません。
半角文字？なにそれ美味しいの？
<p class="sample">無理やり文字毎に色を変える</p>.sample{
font-size:40px;
font-weight:bold;
color: transparent;
background: repeating-linear-gradient(
90deg,
#b22222 0 1em,
#0000cd 1em 2em,
#c71585 2em 3em,
#3cb371 3em 4em,
#20b2aa 4em 5em,
#fa8072 5em 6em
);
background-clip: text;
-webkit-background-clip: text;
}行ごとに色を変えるCSSサンプル
See the Pen CSS Slice on line to change text color by yochans (@yochans) on CodePen.
こちらは単純にbr改行文字列の行単位で色を変えているCSSサンプルです。
文字毎に変更しているのと同じ要領で、グラデーションの角度を縦になるように変更しています。
文字サイズが行間の関係でどうだろうと思いましたが、環境下では1.5emで丁度になりました。
行間サイズのWEB依存でズレるかもしれないので実装時は行間サイズを指定しておいた方が良いかもしれません。
<p class="sample">無理やり文字毎に色を変える<br>
無理やり文字毎に色を変える<br>
無理やり文字毎に色を変える<br>
無理やり文字毎に色を変える<br>
無理やり文字毎に色を変える<br>
無理やり文字毎に色を変える<br>
無理やり文字毎に色を変える<br>
</p>.sample{
background:#000;
font-size:20px;
font-weight:bold;
color: transparent;
background: repeating-linear-gradient(
0deg,
#b22222 0 1.5em,
#0000cd 1.5em 3em,
#c71585 3em 4.5em,
#3cb371 4.5em 6em,
#20b2aa 6em 7.5em,
#fa8072 7.5em 9em
);
background-clip: text;
-webkit-background-clip: text;
}