1KByteで表現できるHTMLとCSSの組み合わせで遊んでみた話

最近は、少ない容量で何ができるかとか、HTMLとCSSだけでどんなことができるのかなどを話す機会があって、何か、繁華街のネオンのようなコンテンツを、1Kbyteなどの軽量なコードで表現できないかみたいな話があったのでやってみました。

正直いつものごとく、デザイン性などの審美性などを考えないで作ってしまっているので、ギラギラしていると思います。

いつも、このブログの場合には見出しの下にアクセントとして画像を配置していることが多いのですが、今回は、HTMLとCSSだけでコーディングしたものを埋め込んでいます。

このほかにも、HTMLとCSSだけで作った、ちょっとしたクイズ系のWebアプリなどがありますので、試していただければ幸いです。

1Kbyteの虹グラデーション

派手すぎて、目がチカチカします。

今回は、マンセル色相環に赤、橙、黄橙…みたいに、日本の色彩検定で資格を取るために勉強したことがある方の場合にはわかる順番でグラデーションしていくようにコーディングされています。

これも派手な画像になってしまっていますが、画像を配置するよりは全然軽量化できて、見出し下に何か画像を配置したりするのが好きな人には良いかもしれません。

とはいえ、普段書いているブログ記事で使う配色でもなく、2000年初頭の色々なジャンルを思い出させるようなアニメーションなので、需要はないかもしれないですが、これも1Kbyteでコーディングされているので、表示速度を上げたい人は、画像を使うよりも良いかもしれません。

ただ、最近は、見出しに合わせてわかりやすい図解画像を入れる方が多いので、あまり需要がないかもしれないです。

1KByteのCSSで、すごく素敵なレイアウトされているモノは、たくさん公開されています。

しかし、それ以外にも、いろいろなマテリアルに施すことができるアニメーションコードはたくさん公開されているので、今回みたいに見出しの下に配置するようなアニメーション素材を探してみるもの面白いと考えています。

これからは、テキストコンテンツだけではなくて、ちょっとしたWebアプリやブログパーツなどを組み込んだブログ記事コンテンツが増えてくると考えています。

HTMLとCSSだけであれば、少しずつ遊びながら学んでいけば、他の言語に比べると、基本的なコーディングはそれほど難しいものではありません。

ぜひ、楽しんでみてもらえたら幸いです。

最後まで読んでいただき、ありがとうございました。