LoginSignup
1
1

More than 5 years have passed since last update.

Data URL scheme で世界最小のモーションタイポグラフィ

Last updated at Posted at 2018-08-09

タイトルは釣りです。かつ一発ネタです。
下記コードをブラウザのアドレスバーに入力して Enter! すると、ちゃっちいのが流れます。

data:text/html,<style>*{margin:0;}marquee{font-size:256px;line-height:100vh;}</style><marquee>Hello, world!</marquee>

motiontypography1.gif

こちらの記事を読んでいて、「そうか、 data URL は HTML もいけるのか」と思ったのがきっかけです。「そりゃブラウザの認識できるメディアタイプなら何でもいけるやろ」と直後にセルフツッコミをかましましたが、 text/html は盲点でした。これは何かしらのシチュエーションで役に立つかもしれませんね。 window.open() で作ったウィンドウに DOM を構築したい時とか。稀なシチュエーションですけど。

ところで、「待てよ…これは北斗の拳の“アレ”が作れるのでは?」と思い立ち、作った第二弾が下記コードです。
Chrome ではマルチバイト文字列が化けてしまうので Firefox でお願いします。 URL エンコードしてもダメでした。 meta[charset="utf-8"] を付けたら大丈夫でした。

data:text/html,<meta charset="utf-8"><style>*{margin:0;}body{background-color:black;}marquee{color:white;font-size:100vh;font-style:italic;line-height:100vh;}</style><marquee>世紀末救世主伝説</marquee>

motiontypography2.gif

すばらしい。子供の頃の思い出が蘇るようです。工夫すれば「絶対無敵ライジンオー」もいけると思います。
それにしても font-size100vh をブチ込んだのは人類史上私が初めてではないでしょうか。ってゆうか効くんですね、 font-size: 100vh; 。これも何かしらのシチュエーションで役に立つ、わけないか。はい。

なお、 data:text/html,... はあくまで URL なので、本来はちゃんと URL エンコードするべきです(上記コードは簡便のために素のままで掲載しています)。最初はカラーコードを #000 としていましたが、 # が入っているので叱られちゃいました。

以上。 Twitter なんかで小さいコードを載っける時にも役に立つかもしれませんね。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1