装飾文字５■レインボー文字＋CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>装飾文字５■レインボー文字＋CSS</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background:#c8bcb5;}/*背景色指定。不要なら削除*/

.test1{
color:#f00;/*★文字に縁取り*/
font-size:40px;
font-weight: bold;
text-shadow: black 1px 1px 0px,
    -1px 1px 0px #000,
    1px -1px 0px #000,
    -1px -1px 0px #000;
}

.test2{
    color: #000;/*★文字に影*/
    font-size: 40px;
    font-weight: bold;
    text-shadow: 5px 5px 1px #777777;/*★原本は #999999*/
}

.test3{
    color: #FFF;/*★文字に縁取り*/
    font-size: 40px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #00F,
    -2px 2px 1px #00F,
    2px -2px 1px #00F,
    -2px -2px 1px #00F;
}

.test4{
    color: #FFF;/*★文字に縁取り。上記アレンジ*/
    font-size: 40px;
    font-weight: bold;
    text-shadow: 3px 3px 3px #865b32,/*★茶色*/
    -2px 2px 1px #000,/*★黒*/
    2px -2px 1px #999,/*★濃い灰色*/
    -2px -2px 1px #fff000;/*★黄色*/
}

.test5 {
    color: #FFF;/*★3Dテキスト*/
    font-size: 40px;
    font-weight: bold;
    text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->

<div style="text-align:center;"><!--レインボー文字の中央位置指定開始。不要なら削除-->

<!--★ここが表示位置。「共通タグ」<span class="rainbow">●●</span> は必須。●●は好きな文章を記述。同じような書き方をすれば、何ヶ所もレインボー文字表示可能-->

■JavaScript+CSS■<br>

<p class="test1"><span class="rainbow">1.○●レインボー文字□■</span></p>
<p class="test2"><span class="rainbow">2.△▲レインボー文字□■</span></p>
<p class="test3"><span class="rainbow">3.▽▼レインボー文字□■</span></p>
<p class="test4"><span class="rainbow">4.◇◆レインボー文字ＡＢ</span></p>
<p class="test5"><span class="rainbow">5.◎◎レインボー文字☆★</span></p>

<hr><!--★ここからCSSのみの分開始。不要なら削除-->

■CSSのみ■<br>

<p class="test1">1.動くJavaScript□□■■</p>
<p class="test2">2.動くJavaScript□□■■</p>
<p class="test3">3.動くJavaScript□□■■</p>
<p class="test4">4.動くJavaScript□□■■</p>
<p class="test5">5.動くJavaScript□□■■</p>

<!--★ここまでCSSのみの分。不要なら削除-->

</div><!--レインボー文字の中央位置指定終了。不要なら削除-->

<!--★以下が「共通タグ」になります。-->
<script type="text/javascript"><!-- 
/*======================================================================
レインボー文字 http://tagnoheya.com/jstag/31/ (サイト名：タグの部屋　http://tagnoheya.com/)
★2017/06/07　即時関数でグローバル変数を削除
=========================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var nameC="rainbow"; //★表示用共通タグのspanのclass名の指定。rainbowで都合が悪い時は変更可
var spd=100;         //★速度原本50。数値が大きいほど遅い

//指定ここまで----------------------------------------------------
var c=document.getElementsByTagName("span"),rainbows=Array(),rainbowX=0;
for(var i=0,n=c.length;i<n;++i){
if(c.item(i).className===nameC){rainbows.push(c.item(i));}}　/*■原本"rainbow"をnameCへ変更*/
for(var i in rainbows){var e=rainbows[i],j,t,s;
t=e.firstChild.nodeValue.split("");
e.removeChild(e.firstChild);
for(j in t){s=document.createElement("span");
s.appendChild(document.createTextNode(t[j]));
e.appendChild(s);}}rainbow();
setInterval(rainbow,spd);
function rainbow(){
for(var rb in rainbows){
for(var ch=rainbows[rb].childNodes,i=0,n=ch.length;
i<n;++i){var x=((rainbowX+i)%16)/16*360,y=(x-Math.floor(x/60)*60)/60,r,g,b;
if(x<60){r=255;g=255*y;b=0}
else if(x<120){r=255-255*y;g=255;b=0}
else if(x<180){r=0;g=255;b=255*y}
else if(x<240){r=0;g=255-255*y;b=255}
else if(x<300){r=255*y;g=0;b=255}
else{r=255;g=0;b=255-255*y}
ch.item(i).style.color="#"+((0x1000000|b|(g<<8)|(r<<16)).toString(16).substr(1));}}++rainbowX;}
}());//即時関数終了
//--></script>
<!--★「共通タグ」終了。コピーここまで-->

</body>
</html>
装飾文字５■ レインボー文字＋CSS 最終修正日 : 2017/06/07

　装飾文字５■　レインボー文字＋CSS　　　最終修正日 : 2017/06/07
