英雄クロニクルの色タグには「虹」という特殊な色があります。 虹色タグを使うことで、文字の色を赤→黄→緑→青→紫→赤という順で変化させることができます。
英雄クロニクルのタグを使うだけなら文字だけが虹色になりますが、CSSを使うと他のこともできます。
まずは文字を虹色にしてみましょう。
<虹:色タグで虹>
<div style="animation: 1s infinite rainbow;">CSSで虹</div>
次のように表示されます。
"animation: 1s infinite rainbow;"で、色タグの虹と同じように色が変化します。
虹色は色が変化します。言い換えれば「動き」のある装飾です。 そのためanimationというCSSを使います。
1s infinite rainbowは、animationに対するパラメーターです。 それぞれ下の表のような意味があります。なお、説明の都合で入力とは違う順番で記載しています。
| パラメーター | 説明 |
| rainbow |
rainbowは「アニメーション設定の中の「虹」を使いなさい」という指定です。 HTML/CSSにそういうパラメーターがあるのではありません。 英雄クロニクルのシステムが、色タグの虹を表示するために、そういう設定を用意しているのです。 上の入力例は、その設定を流用することで虹文字を表示しています。 言い換えれば、上の入力で文字が虹色になるのは英雄クロニクルの自由記入欄の中だけです。 |
| infinite |
infiniteは「アニメーションを無限に繰り返しなさい」という指定です。 CSSに詳しくない方はここを触ってはいけません。 ここを変えると、「赤→黄→…→赤の変化」が起きなかったり、１回変化してすぐに止まってしまうかもしれません。いずれにしても、虹色っぽい変化ではなくなってしまいます。 |
| 1s |
これはアニメーションを繰り返す時間を指定しています。 「赤→黄→…→赤」に戻るまでの時間を１秒にしなさい」という指定です。 1sのsは「秒」を表す単位であり、1sは１秒を表しています。 短い時間を指定すると、変化スピードが速くなります。長い時間を指定すると遅くなります。 |
虹色っぽい変化をさせるためには、animation, rainbow, infiniteの３つは必ず指定してください。
1sの部分は変更しても大丈夫です。下のように入力すれば違いがわかりやすいでしょう。
<div style="animation: .25s infinite rainbow;">高速虹</div>
<div style="animation: 4s infinite rainbow;">ゆっくり虹</div>
次のように表示されます。
下のように入力してみてください。
<div style="animation: 1s infinite rainbow;">虹１</div>
<div style="animation: 1s -0.5s infinite rainbow;">虹２</div>
虹１と虹２の色が交互に変化しているように見えます。
虹２のパラメータでは-0.5sが追加されています。
これは色の変化タイミングを「-0.5秒ずらしなさい」という指定です。
タイミングが丁度半分ずれているので、交互に点滅しているっぽい感じになります。
下の呪文を入力すると、左から右に虹色が流れて変化しているように見えます。
<div style="animation: 5s infinite rainbow; display:inline;">こ</div><div style="animation: 5s -4s infinite rainbow; display:inline;">ん</div><div style="animation: 5s -3s infinite rainbow; display:inline;">に</div><div style="animation: 5s -2s infinite rainbow; display:inline;">ち</div><div style="animation: 5s -1s infinite rainbow; display:inline;">は</div>
上で示した例を入力すると、次のように表示されます。
もう少しCSSを増やすと、背景を虹色に変化させることもできます。
とはいえ、そんなに難しくはありません。次のように入力すると、背景が虹色に変化します。
<div style="animation: 10s infinite rainbow; background-color: currentColor; padding: 10px;"><白太:背景色が虹色に変化！></div>
"background-color: currentColor;"が、今回のポイントです。
currentColorは特定の色ではなく、「その時の文字の色」を表します。
そして文字の色はanimationの設定で１０秒周期で虹色に変化します。
つまり、「背景は文字の色」×「文字の色は虹色」＝「背景は虹色」となっているのです。
しかし、それだけだと文字も虹色なので背景に紛れてしまい、読めなくなります。 そこで英雄クロニクルのタグを使って文字を白にしています。
色を指定可能なところはどこでも（例えば枠の色とか）、同じようにすることで虹色に変化できます。
呪文が長くなってしまいますが、頑張ればこういうこともできます。
<div style="animation: 30s infinite rainbow; background-color: currentColor; padding:5px;"> <div style="animation: 30s -.33s infinite rainbow; background-color: currentColor; padding:5px;"> <div style="animation: 30s -.66s infinite rainbow; background-color: currentColor;"><白太:じわじわ変化する虹背景></div></div></div>
上で示した例を入力すると、次のように表示されます。