1文字ずつ色(装飾)を変えて、カラフルに表示したい!

1文字ずつ色を変えたい

1文字ずつ色を変えたい

CSS(スタイルシート)を使えば、文字を自由な色で表示できます。その際、
  • すべての文字色を一括して変える
  • 先頭の1文字だけを異なる色に変える
といった装飾は、従来から可能です。前者はcolorプロパティを使えば良いだけですし、後者はfirst-letter擬似要素を併用すれば良いだけです。しかし、
  • すべての文字の配色を1文字ずつ変える
という装飾は、残念ながらCSS3を使っても実現できません。そのような装飾をする仕様がCSSにはないからです。では、1文字ずつ異なる色を使ってカラフルに表示させたい場合には、どうすれば良いでしょうか。


 
CSSだけでは無理とはいえ、HTML側で頑張る方法は避けたい
1文字ずつタグで囲むと、読みにくく無駄が多くなり面倒

1文字ずつタグで囲むと、読みにくく無駄が多くなり面倒

もしかすると、HTMLソース側で、1文字ずつspan要素などを使ってマークアップする解決策を思いつかれるかもしれません。

しかし、この方法ではHTMLの記述がとても面倒です。さらに、ソースの視認性が低下し、メンテナンス性(修正のしやすさ)も低下してしまいます。したがって、できるだけ避けたい方法です。


 

jQuery+CSS3で、1文字ずつ色(装飾)を変える方法

1文字ずつ別々の色で表示できる

1文字ずつ別々の色で表示できる

そこでオススメなのが、「jQuery」と「CSS3」を活用して、HTMLソースはシンプルなままで、1文字ずつ異なる装飾を指定できるようにする方法です。

この方法を使えば、1文字ずつ色を変更することはとても簡単に実現できます。右図は、後ほどご紹介するサンプルページを、ブラウザで表示させた画面イメージです。1文字ずつ色が変わっていることがお分かり頂けるでしょう。


 
HTMLソースは、わかりやすいシンプルなままで実現可能
ここで使うHTMLソースは、以下のように非常にシンプルなもので済みます。複雑なマークアップは不要ですから、ソースの視認性は低下しません。後からの修正も容易です。
<p class="colorful">
   この段落の配色を一文字ずつ変える!
</p>
このように、特定のclass属性値(上記では「colorful」)が付加された場所だけ、1文字ずつ別々の色(装飾)を適用できるように、jQueryとCSS3を使って作ります。スクリプトの記述量は6行程度で済みますし、CSSの記述も数行で済む、とても簡単なものです。

1文字ずつ色を変えるだけでなく、他の装飾も1文字ずつ可能
1文字ずつ装飾を変化させられる

1文字ずつ装飾を変化させられる

ここで実現可能な装飾は、1文字ずつ文字色を変更するだけではありません。1文字ずつ文字サイズを変えたり、1文字ずつ背景色を変えたり、1文字ずつ書体を変えたり、1文字ずつ枠線を付加したり……など、CSSで実現可能な装飾はすべて、「1文字ずつ」適用が可能です。

今回は、このように「1文字ずつ装飾を変える」方法をご紹介致します。


 
それでは次のページから、1文字ごとに異なる装飾を指定するためのソースを見ていきましょう