HTMLで１文字ずつ文字色をレインボーカラーに設定する方法（PHPを使用）【CSS】

hoge

１文字ずつ、カラフル（虹色）に装飾した。
CSSだけだと出来なかったので、苦肉の策で、PHPを使用して文字をカラフルにした！

・・・jqueryでもできるけど、ソースコードの短さと処理速度の点からPHPを採用。（←速度については、憶測。）

 

完成イメージ

こんな感じのが出来る。

 

HTML

今回のカラフル装飾の対象は、h1要素。
PHPで一文字ずつ取り出して「span」で囲う。（げ・・・原始的。。）

<?php
	$str = "あいうえおかきくけこ";
	$title_span = "";
	foreach(str_split($str) as $value){
		$title_span .= "<span>".$value."</span>";
	}
?>

<h1><?php echo $title_span; ?></h1>

処理後は、HTMLへの出力がこのようになる。↓

<h1><span>あ</span><span>い</span><span>う</span><span>え</span><span>お</span><span>か</span><span>き</span><span>く</span><span>け</span><span>こ</span></h1>

 

CSS

次に、カラフル装飾はCSSにて行う。
今回は８色を設定。
８色で繰り返し装飾するように設定。（楽チン）

h1 span:nth-child(8n+1) { color: red; }
h1 span:nth-of-type(8n+2) { color: orange; }
h1 span:nth-of-type(8n+3) { color: pink; }
h1 span:nth-of-type(8n+4) { color: yellow; }
h1 span:nth-of-type(8n+5) { color: green; }
h1 span:nth-of-type(8n+6) { color: blue; }
h1 span:nth-of-type(8n+7) { color: indigo; }
h1 span:nth-of-type(8n) { color: violet; }