console.logに文字色やスタイルを適用する方法を解説！

console.logはブラウザのコンソールに変数の中身やエラー文字列を出力してくれる便利な関数です。

JavaScriptを使ったフロントエンド開発では使う機会が多く、ほぼ必須の機能と言っても良いでしょう。

今回はそんなconsole.logで出力される文字色やスタイルを適用する方法を解説していきます。

console.logの引数として渡す文字列の中に置換キーワードを利用することができます。

置換キーワードの中で%cというキーワードを含めることで値に指定したスタイルを適用することができます。

console.logの第一引数にはHello Worldという文字列の前に%cという置換キーワードを先頭に付けた文字列を渡しています。

第二引数に適用したいスタイルを指定します。今回は文字色を赤色に変えるcolor:redという文字列を渡しています。