WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

今回はCSSとJSを使って、ひと文字ずつ色を変える方法をご紹介します！
ポップで明るいサイトを作るときにぜひ試してみてください。

目次

---

1. やりたいこと
   
2. ひと文字ずつ色を変える方法
   ①基本的な方法
   ②もっとカラフルに！
   
3. まとめ
   

まずは、私がやりたかったのはこんなデザインの時です。

このデザインにするためには、ひと文字ずつ、spanタグで括らなくてなりません。

どんなソースになるかというとこんな感じです。

こんな面倒なことはやりたくないですよね・・・。

そこで、簡単にひと文字ずつspanタグで括ってくれるようなJSを探してみました！

では、早速ご紹介します。

See the Pen Untitled by @wwg (@WWG) on CodePen.

①基本的な方法

HTMLのコードはこれだけで大丈夫です！
シンプルで分かりやすいですね！

<p class="txt_color">Hello, world!</p>

次にJSです。
こちらを入れます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>

$(function() {
    $(".txt_color").children().addBack().contents().each(function(){
        if (this.nodeType == 3) {
            $(this).replaceWith($(this).text().replace(/(\S)/g, "<span>$&</span>"));
        }
    });
});

そうするとこれでもう、自動的にひと文字ずつspanタグで括ってくれます！

あとは、CSSで装飾するだけです。
nth-childの奇数、偶数を使用します。

.txt_color span:nth-child(odd) {
  color: #36b077;
}
.txt_color span:nth-child(even) {
  color: #77d943;
}

②もっとカラフルに！

See the Pen Untitled by @wwg (@WWG) on CodePen.

全部違う色にすることもできます。
子ども向けのポップなサイトに合いそうですね！

これを使用すれば全部の文字をspanタグで括る必要はなくなり、便利になりましたね！
もし良ければ、使用してみてください。

愛知 県内から 名古屋 を中心にホームページ制作を行っている会社 株式会社WWG（ダブルダブルジー） 愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F TEL： 052-485-6846 ※ ホームページ制作や活用サポートのお問い合わせはコチラから