LIGデザイナー採用
LIGデザイナー採用
2014.07.22

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

づや

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

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

console.log("hello world!")

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

console1

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

参考:Using the Console – Google Chrome

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

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

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

console2

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

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

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

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

console3

しかし当然といえば当然なんですが、使用可能な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ライフが送れるといいですね。