【html/CSS】虹色の作り方【背景・文字・アニメーション】

「ホームページ上に虹色を表示させたい」

「虹色を動かしてより目立たせたい」

CSSで虹色の作り方と虹色のカラーコード、グラデーションの虹色、虹色の文字、虹色をアニメーションで動かす方法、さらに虹色を使う際の注意点まで解説します。

虹色カラーコード

赤	橙	黄	緑	青	藍	紫
#c70000	#d28300	#dfd000	#00873c	#005aa0	#181878	#800073
#e60000	#f39800	#fff100	#009944	#0068b7	#1d2088	#920783
#de4141	#e8ac51	#f2e55c	#39a869	#4784bf	#5d5099	#a55b9a
#f59090	#fcd7a1	#fff9b1	#a5d4ad	#a3bce2	#a59aca	#cfa7cd

虹色は赤橙黄緑青藍紫の7つとされています。

この色もトーン（濃さ）を変えることで様々な表現が可能です。

虹色グラデーション

CSSでグラデーションを指定するには下記のように指定します。

複数色指定する場合は「,次の色,次の色…」と続けていきます。

枠線版

<style>
.border-image{
    border: 20px solid;
    border-image: conic-gradient(#f5f551,#5eff5e,#84a1ff,#ff45ff,#ff5a5a,#ffbc41,#f5f551) 1;
    height: 100px;
}
</style>
<div class="border-image">一周グラデーション</div>

CSSで枠線をグラデーションにするには下記のようにします。

テキスト版

<style>
.example3{
    background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 300%;
    font-weight: bold;
    display: inline-block;
}
</style>
<div class="example3">虹色グラデーションテキスト</div>

背景色自体は先述した「虹色グラデーション」を指定しています。

下記2つのCSSを指定すると背景色を文字でくり抜くことができます。（IE不可）

display:inline-blockを指定して背景と文字の横幅が同じになるようにしています。

虹色アニメーション

虹色が動く

<style>
.example4{
    background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783,#e60000) 0 / 200%;
    height: 80px;
    animation: 5s example4 linear infinite;
}
@keyframes example4{
    100% { background-position: 200%; }
}
</style>
<div class="example4"></div>

背景色を虹色で設定し、位置を0に、大きさを2倍にします。

「5s」は時間です。数字部分を変えると早くなったり遅くなったりします。

「example4」は任意の英数字です。クラス名みたいなもので後述するアニメーションの指示と結びつけています。

「linear」は動きの緩急です。linearを指定すると一定の動きになります。

「infinite」は無限です。アニメーションを繰り返します。

アニメーションの設定で位置を200%にして動かしています。

虹色の順で色が変わる

<style>
.example5{
    height: 80px;
    animation: 5s example5 linear infinite;
}
@keyframes example5{
    0%{background: #e60000}
    14%{background: #f39800}
    28%{background: #fff100}
    42%{background: #009944}
    56%{background: #0068b7}
    70%{background: #1d2088}
    85%{background: #920783}
    100%{background: #e60000}
}
</style>
<div class="example5"></div>

背景色自体は単色です。

時間で背景色を変えることでグラデーションのように変化します。

虹色を使う前に注意

「目立させたいから虹色」はちょっと待って

デザイン上、虹色を使うことは正直言ってほぼありません。

見かける虹色と言えばゲームのSSRや当たりの演出でしょうか。

こういった「特別感」を表現するには虹色はいいかもしれません。

ただ、それ以外で街で見かける虹色といえば、虹色文字のポップ体で書かれた注意書きやポスター、学校行事のタイトルなどでしょうか。

なんとなく目立させたいという理由で虹色を使っても、安っぽく見えてかえってダサくなってしまいます。

伝えたい内容や掲示場所に合わせて適切なデザインをすることをオススメします。

目立させたいなら反対の色

下記の黒と黄色、どちらが目立ちますか？

まぶしく見えるのは黄色ですが、はっきり視認できるのは黒ですよね。

では背景色だけ変えた下記ならどうでしょうか？

今度は明らかに黄色がはっきり見えますね。

このように、目立つかどうかは背景、周りに応じて変わってきます。

周りとの色の差異が大きいほど目立ちます。

反対の色は下記で考えましょう。

明度

明度は白っぽいか黒っぽいかです。

背景色が白っぽいなら、より黒っぽいほうが目立ちます

彩度

彩度は濃さです。純粋な色を最大として、黒や白が多くなるほど彩度は下がります。

背景の彩度が低いなら、高い彩度のほうが目立ちます。

色相

色相は色の順番です。それこそ虹色のようにグラデーションに色は変わっていきます。

これを円にし、反対側にある色を「補色」といいます。

オレンジ背景に対して赤は色相が近いためあまり目立ちません。

青は補色であるため目立ちます。

テーマに合わせた色

「目立たせたいけど結局何色使えばいいんだよ！背景色は白だよ！」

というときは伝えたい内容に合わせた色にして印象とあわせて伝えましょう。

例えば信号では、青は進め・黄色は注意。赤は止まれですね。

同様に勧めたいものは青、注意喚起は黄色、禁止には赤を使うといいでしょう。

画像検索で類似デザインの確認

Google画像検索を使って類似デザインを確認してみましょう。

もちろん同じデザインを使うわけにはいきませんが、使っている色や配置の傾向など確認できれば、デザインの方向性も見えてきます。

【まとめ】虹色の作り方

カラーコード

#e60000

#f39800

#fff100

#009944

#0068b7

#1d2088

#920783

グラデーション

テキスト

下記2つのCSSを指定すると背景色を文字でくり抜くことができる。

虹色が動くアニメーション

背景色を虹色で設定し、位置を0に、大きさを2倍にする。

アニメーションの設定で位置を200%にして動かす。

虹色の順で色が変わるアニメーション

背景色自体は単色。時間で背景色を変えることでグラデーションのように変化させる。

虹色を使う注意点

「目立たせたいから虹色」は よくない

内容や目的に合わせたデザインを！

以上、CSSで虹色の作り方でした。