*

ウェッブ制作

Width =px

ホーム > 変化を付ける小技 >
文字毎に文字色を変えるhtml css MENU 

HTMLとCSSで一文字毎に文字色を変える

概要:CSSでは、テキストの一文字単位で指定できるセレクタは無いので、ul liを使い一文字ずつ li に記述して表示している。若干、邪道と言えるが、タイトルなどでどうしても文字毎に色を変えてみたいなど、短いテキストならよいかなと! と思い記述している。尚、JavaScriptを利用することで、1文字単位の処理が可能ですが、文字数が少ない場合はこれで充分かと!!

以下の事例では、5色を使い、nth-of-type疑似クラスで5文字毎に文字色を指定している。

注意事項:liの区切りは改行しないで下さい。改行した場合、7px程の隙間が出来るので、解消するには親要素にfont-size:0;を入れて下さい。

補足:文字を入れるセレクタにspanを使う方法もあります。その場合、以下のようにして下さい。

CSSは、ul を p に、li をspan にします。