console.logにCSSを適用させてみよう

こんにちは、最近LINEスタンプになったづやです。

さて、JavaScriptのコンソールログってありますよね。

console.log("hello world!")

こんなことやると、デバッグツールのコンソールに文字を表示させることができるあれです。
※IE8以下はエラーになるので要注意です。

こいつには、Chromeだと一部のstyleを効かせることができるようです。

参考：Using the Console – Google Chrome

https://developer.chrome.com/devtools/docs/console

console.logにCSSを適用させる方法

やり方はけっこう簡単で「%c」を文字の中にいれて第2引数で対象のstyleを呼ぶだけでいけるようです。

var style="color:red;"
console.log("%chello world!" , style);

※IEはこの記事を執筆している時点での最新バージョン11.0.9600.17041でもダメでした。

途中で違うstyleを当てたい場合は、下記のような書き方でもいけるようです。

var redStyle="color:red;" ,
blueStyle = "color:blue;";

console.log('%chello%c %cworld!%c' , redStyle , '' , blueStyle , '' );

しかし当然といえば当然なんですが、使用可能なstyleとないstyleがあるようです。
ドキュメント見てもそれっぽいのがないので、調べてみました。
※あったら教えてください、悲しすぎる。

効果があったStyle

• color
• font-size
• font-weight
• font-style
• font-family
• text-decoration
• text-shadow
• text-transform
• line-height
• background-color
• margin ※上下は効かない模様
• padding ※上下は効かない模様
• border ※一通り全部効く模様

まとめ

テキストを装飾するようなstyleはだいたい効くようです。
この記事を参考に素敵なconsole.logライフが送れるといいですね。