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

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

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

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

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

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

関連記事:HTMLとCSSだけでWebアプリを作った実例を紹介

1Kbyteの虹グラデーション

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

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

1Kbyteでタイルタイプのアニメーションなども可能

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

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

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

1KByteのCSSレイアウトデザインはたくさんある

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

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

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

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

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

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

関連記事:おみくじゲームを作ってブログ記事の中に入れてみた話

ユニコブログ®ConoHa WINGレンタルサーバーで運用しています。

WebサイトデザインのテーマにはSTORK19を利用しています。

ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業して法人化した初期の頃は、自分と同じく起業する人や、スタートアップ企業と事業の共同立ち上げ立ち上げを中心に活動していました。

現在は、Webメディア運営を中心に、Webアプリの開発、キャラクターデザインからのLINEスタンプ制作やLINE絵文字等の販売及び、3DCGによるコンテンツ制作事業としてAR(拡張現実)やVR(仮想現実)、MR(複合現実)向けのプラットフォームへコンテンツ提供を行っています。

公式ブログサイトのユニコブログ®では、「会社の収入だけに依存しない生活を実現する」ことをテーマにブログ記事を書いたり、無償でブログ運営を始める人のサポートを行っています。

主な経歴としては、2003年から放送及び映像業界向けの様々な新規事業立ち上げを15年以上担当していました。

2014年からは、会社員として働きながら経営/メディアコンサルティング業を開始して、2020年01月に法人化し、ユニコーンコンサルティング株式会社を設立しました。

現在、公式として公開しているユニコブログ®以外にも、数十サイトの特化ブログ型Webメディアや、サイト型Webメディアを運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

また、当ブログ内でピックアップしているレンタルサーバーとWordPressテーマ、プラグインの組み合わせや相性を検証する日々。合わせて、WordPressテーマのカスタマイズやブログパーツ、プラグインなどの開発を手伝っています。

所有資格や認定ライセンスとしては、SMPTE Professional Engineer Member、一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者などを所有しています。デジタル認定証についてはプロフィール詳細から確認できるようになっています。

著書 : 『保存版 売上を向上させるためのYouTube活用術』

教育関連でも複数の教育機関で定期的に講演を行っています。主な活動実績としては、2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。

2022年度は土曜プログラム(マイプログラム)『仕事最前線』での講演などになります。

2023年以降は、オンライン講演での活動が多くなっています。

著述家 / ブロガー兼コンテンツクリエイター

ユニコブログ®運営者のプロフィール詳細

ユニコーンコンサルティング株式会社の公式サイト