【小ネタ】console.log()の色を変更する方法

こんにちはtakosanです。

今日はconsole.log()で出力される文字の色を変更する方法を紹介します。

はい、小ネタです。すぐ読み終わります。

目次

結論

console.log('%cここにテキスト!','color:#28bb8f;');

上記の例では、”ここにテキスト!” の表示色を緑いろに変更しています。

また、第2引数にCSSスタイルを指定することで、文字の色を変更することができます。

注意点としては普通にCSSを書くときみたいに、color:#28bb8fのあとに「;」を忘れずに入れることくらいです。

また、colorはredやblackとしてもその色を表現できます。

上記のコードの結果

背景色も変えたいんだけど?

変えれるんだな、これが。

console.log('%c Beautiful console. ', 'background-color: lightblue; color: black;');

上記のようにすると背景色も変えることができます。

上記のコードの結果

CSSなんでもいけるの?

全部試してないですが、たぶん大体いけます。

実はこの記事のアイキャッチ画像にもなってますが、

font-sizeやborder、paddingなども含めることができるので

スタイルのカスタマイズはかなり自由です。

どういうところで使うのか

自社のプロダクトカラーなどを使って、DOM読み込み完了時に色のついた文字で自社のコピーとかを表示したりすると、

細かいところに気を使ってて面白いなと感じてもらえる要素になるかもしれませんね。

僕も経験上、機能の正常完了を告げるときに色付きconsole.log()を表示するものを開発したことがあります。

あとは普通にエラーや警告文言を、色で直感的に判断できるようにってのもあると思います。

ご自身でも色々と試してみてください。

意外と知らない人多いので、面白かったらシェアしてくれるとうれしいです!

細かい話

%cってなんなのか?

調べればわかりますが、ググるのがめんどくさい人用にここに書いておきます。

%c は、console.log()で表示される文字列にCSSスタイルを適用するための指定子です。

この指定子を使用することで、console.log()で表示される文字列にCSSスタイルを適用することができるわけです。

つまり、%c を指定した箇所には、CSSスタイルが適用されるという意味があるので、

%cの「c」はCSSの「c」と覚えててもいいのかなと思います。

ではよいWebライフを~

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次