【CSS・JS】ひと文字ずつ色を変える方法 | 名古屋のホームページ制作ならＷＷＧ｜企業のWeb制作会社

BLOG
ブログ

公開日:2021.10.27

【CSS・JS】ひと文字ずつ色を変える方法

良かったらハートを押してね！

HTML

デザイン

CSS

JS

タグ

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

目次

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

１．やりたいこと

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

このデザインにするためには、ひと文字ずつ、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.

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

3．まとめ

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

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

良かったらハートを押してね！

前の記事を見る

一覧へ戻る

次の記事を見る

前の記事を見る

次の記事を見る

一覧へ戻る

おすすめの記事

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」