【コピペでOK】CSSでカラフルな文字を作ろう！

今回はカラフルな文字をCSSで作ってみましょう！コピペで使えるサンプル3つご用意いたしました🎵気に入ったのがあったら参考にしてもらえたら嬉しいです😊

完成見本1️⃣

一文字ずつ色違いにしてみました⭐️

html1️⃣

---

<p class="colorful-text">

   <span>&#9825;</span>

   <span>N</span>

   <span>E</span>

   <span>W</span>

   &nbsp;

   <span>I</span>

   <span>T</span>

   <span>E</span>

   <span>M</span>

   <span>&#9825;</span>

  </p>

---

⭐️タイトルとして使う場合は、pタグではなく、h1〜h6タグを使うのがおすすめです。

⭐️&#9825;は中抜きの♡、&nbsp;は半角スペースのことです。

CSS1️⃣

---

  <style>

   .colorful-text {

    text-align: center;

    font-weight: bold;

    letter-spacing: 0.1rem;

   }

   .colorful-text span:nth-of-type(odd) {

    color: lightskyblue;

   }

   .colorful-text span:nth-of-type(even) {

    color: pink;

   }

  </style>

---

⭐️letter-spacingで文字間を少し空けてみました。

⭐️oddは奇数、evenは偶数のことです。

完成見本2️⃣

3文字ずつ色を変えて、高さも変えてみました🎵

⭐️htmlは1️⃣と同じです。

CSS2️⃣

---

 <style>

   .colorful-text {

    text-align: center;

    letter-spacing: 0.05rem;

   }

   .colorful-text span:nth-of-type(odd) {

    vertical-align: 0.15rem;

   }

   .colorful-text span:nth-of-type(3n + 1) {

    color: #f0f;

   }

   .colorful-text span:nth-of-type(3n + 2) {

    color: #7f00ff;

   }

   .colorful-text span:nth-of-type(3n + 3) {

    color: #ff7f00;

   }

  </style>

---

⭐️vertical-alignを使って、奇数の文字だけ少し上に上げてみました。

完成見本3️⃣

文字全体をグラデーションカラーに🌈

html3️⃣

---

<p class="gradation-text">パステルカラー</p>

---

CSS3️⃣

---

.gradation-text {

    display: inline-block;

    font-weight: bold;

    color: transparent;

    background: linear-gradient(40deg, #ff7fbf 0%, #ff7fbf 10%, #7fffbf, #7f7fff 90%, #7f7fff 100%);

    background-clip: text;

    -webkit-background-clip: text;

    margin: 0;

    padding: 0;

   }

---

【参考サイト】

✒️Webでハートマーク文字を使おう

https://　www.sakura-pc.jp/pc/contents/basis/heart.html

✒️CSS3で要素に繰り返しスタイルを適用する方法

https://　blog.asterlist.com/2013/01/1701.html

✒️原色大辞典

https://　www.colordic.org/

✒️background-clipとは？基本的な使い方から値を指定する方法まで解説

https://　webukatu.com/wordpress/blog/25954/

---

いかがでしたか？

少しでもお役に立てたら嬉しいです。😊