ルパン三世のカシャカシャってなるタイトルコールのやつを全画面にしたかった

はじめに

元ネタは以下の記事。

ルパン三世のカシャカシャってなるタイトルコールを好きな文字列で生成する

コレを軽量化してSVG化した方が現れた。

ルパン三世のカシャカシャってなるタイトルコールのやつをsvgにしたかった

また、スライダーにより自由にサイズは可変可能。

なら俺は・・・

全画面で表示したいんだ！！！！（ホントはPWA化もしたかったけど、気が向いたら・・・）

どんなものができたのよ。

※音が出ます。

変更箇所

そんなに難しいことはしていないのですが、かんたんなツールとか作るときによく使う小技があるのでご紹介。

    <style>
        body {
            margin: 0;
            width: 100%;
            height: 100vh;
        }
        
        .title_call {
            width: 100%;
            height: 100vh;
        }
        /* 中略 */
    </style>

スタイルのbodyにmargin: 0;を指定するのは鉄板。全画面にするとき、Chromeの仕様で最初から8pxほどのマージンが発生します。

その他、width: 100%;を指定するのは下部のスクロールバーを隠すため

あとは、入力欄のAbsoluteなどを設定して完了。

まとめ

多分、かんたんなフレームワークで入力画面と表示画面を分けてあげるといい感じになるのかなと思います。（録画したりとか）

久々にこんな感じで見つけてForkして手直しするの、楽しいですよね

追記

まだなんか、折り返しの表示がうまくいってないなー・・・