ブラウザのコンソールで画像を表示させたりして遊ぶ🐈

結論

コンソールで画像を表示できたりする。

背景

つみきブログを見ていて、何気なくDeveloper Consoleを開いたら、

コンソールに画像表示される~!!ってなった。

結構いろいろなサイトでこんなことをやっているらしい↓
JavaScript Consoleに面白い出力をしているサービス - Qiita

コンソールでリクルーティングしてるところもあって面白いですね。

どうやってやってんの

以下のサイトで詳しく説明されている

console.log() - ログを出力する | Consoleリファレンス

簡単に説明すると'%c'の置換キーワードにスタイルが適用できるらしい

console.log( "これは、%cメッセージ%cです。", "color:red;", "" );

遊んでみた

簡単なスタイルの適用。

for (let i=1; i<5; i++) console.log("%cこっちを見て", 'color: #c1b8b9; background: #c1031d; font-size: ' + i + 'em;');

怖い

次は画像の表示。たぶん以下がシンプルだと思う。スタイルで背景画像として画像を表示している。また表示域がデフォルトで1文字なのでpaddingで画像の大きさを記述する必要がある。

console.log("%c ", 'background: url(https://www.pakutaso.com/shared/img/thumb/neko1869IMG_9113_TP_V.jpg); background-size: 100% 100%; padding: 128px 200px');

出力結果

まとめ

わりとconsole.log()はいろいろできる。