こんにちは、最近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ライフが送れるといいですね。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
