単一のDivを使ったアート作品制作

A Single Div プロジェクト紹介

• Lynn Fisherが2014年から2019年まで実施したCSSドローイングプロジェクト
• 単一のHTML `` タグだけを使って、CSSでさまざまな画像を描くことが目標
• GitHubの#divtoberリポジトリでプロジェクトが進行
• 「Buy me a coffee」リンクから、このプロジェクトを支援できる
• 「View more single divs ⇨」リンクで、さらに多くのSingle Div作品を確認できる

GN⁺の意見

• CSSだけで多様なグラフィックを表現することは、ウェブ開発者にとって挑戦的でありながら興味深いテーマである。このプロジェクトはCSSの機能と表現力を極限まで活用する良い例になり得る。
• 一つの `` タグだけで絵を描くという制約は、逆に創造性を刺激することがある。開発者が新しいCSSテクニックを身につけ、実験できる機会になる。
• コードゴルフ（Code Golf）のようなチャレンジと同じく、最小限のコードで希望の結果を作ることは、開発者の問題解決能力を高めることができる。
• ただし、実際のプロダクション環境ではパフォーマンスや保守性などを考慮する必要があるため、この方法をそのまま適用するのは難しい場合がある。このプロジェクトは、あくまでCSSの学習と実験の目的で活用されるのが望ましい。
• Lynn Fisherのこのような創造的なプロジェクトが、より多くのウェブ開発者に刺激を与え、CSSに対する関心と情熱を高めてくれることを期待する。

[GN⁺]

Hacker Newsのコメント

• CSSを使って、シンプソン家のキャラクターをたった1つのHTML `` タグだけで描き上げた驚くべきデモプロジェクトが紹介されている
• ブラウザのデベロッパーツールのInspectorでは見えやすいが、ソースコードを表示すると可読性が著しく低下するという問題点が指摘された
• 同様のCSSアート作品は過去にもHacker Newsで複数回、活発に議論されたことがある
• CSSアートはthree.jsなどの3Dグラフィックライブラリよりはるかに難しく時間がかかるものの、ウェブアクセシビリティの観点では依然としてより良い選択肢になり得るという意見
• モバイルでも見栄えが良いことが確認され、グラフィックデザインのセンスも優れているという評価
• M1 MacBookでは少しラグが発生するという意見
• 「単一の div」が何を意味するのか、どのような技術を使っているのかに関する疑問を表明