投稿者： yoseyama

日頃、XHTML+CSSをこねくり回して仕事をしている私は、デザイナーからいただく結構無理のあるビジュアルを具変化するために頭を使っています。そうするとたまに馬鹿な事を考えてしまいます。それが…

「XHTML+CSSで絵を描くことが出来るのか。」

XHTML+CSSの技術を使い絵を描く事ができるのか。その方法はどうしたらいいのか。考えだしたらもう作るしかない！ってことで、手始めに「スーパーマリオブラザーズ」のマリオを題材にして作ってみました。

作り方はいたって簡単。親要素になるDIVをrelativeして、子要素になる1px×1pxのDIVをabsoluteして1px単位で揃えたもの。12px×16pxなので192個のピクセルの集合体です。一つ一つピクセルを座標に置きながら16進数の色を当てはめていく作業。なんだか絵を描くというよりも、細い糸を折り合わせながら模様をつくる織物をしているような、なんてアナログな作業なんでしょうか。192個のピクセルを並べ終えるのに1時間ほどかかりました。12px×16pxのとても小さな画像を作るのにこんなに時間がかかるものなのか、普段見ている液晶モニターのピクセル描画はこんないも大変なことなのかと感動する反面、改めて「くだらない」感を感じつつも、やけに楽しんでいる自分に気付きます。

■マリオ

●XHTML+CSSで表現する事にこだわる。

ここで一つ、XHTMLとCSSについて考えてみましょう。XHTML上では、見出しやその内容、他のページへリンクなど、文字情報が収納されています。CSS上では、装飾やレイアウトやデザイン要素を収納しています。上記の内容は「WEB標準」といわれているもので、情報はXHTMLへ、デザインはCSSへと分ける目的があります。「絵」を描くことは視覚表現ですから、CSSという筆で、XHTMLというキャンパスに絵を描くことになるのでしょう。そう考えるとなんだか美しいです。

広い世界には同じ事考える人もいるのではないかと調べてみたら、こんなページがありました。

[ JnZ  / jpg2html ]

このページでは、文字をドットの変わりに使った方法や、tableを用いた方法や、javascriptを使った方法などいろいろな手段を使ってビジュアルを表現しています。しかし、全てCSSをhtml上にインライン（色情報など）で記述していて、私が考える「XHTML+CSSで絵を描く」こだわり部分とちょっとずれている感じがします。jpg2html ですからこれでもいいのでしょう。根本的に目指しているものが違います。「XHTML+CSSで絵を描く」こだわりは、「WEB標準」という枠の中で表現する「無意味さ」というところに魅力を感じます。XHTML上にグラフィック情報を極力記述したくないわけです。「WEB標準」という決められた概念の中で、どこまで表現できるものなのか？がポイントです。

●AIRでソフト開発。

一つ一つピクセルを紡いでいく事がとても辛いので、先ほどの「マリオ」を元にflashを使い、jpgなどの画像データから1pxの色を抽出しスタイルシートに書き出すAIRを作る事にしました。ここからはプログラマーさんのお仕事になるので、私が説明できる域を越えました。すいません。省略します。

作業を進めながらプログラマーさんから見た意見が出てきました。まず、色が16進数で抽出したからといってこれをCSSに書き出しclassを作った後、クラス名をxhtmlに記入するわけですから2度手間ではないか？とか。それならいっそXHTMLにインラインでCSSを記入したほうがいいのではないか？とかです。

やはりそうきたか。「 jpg2html 」がそうであったように「楽」を考えるとそうなるのでしょう、私の本意としては理想に近づけたいものです。でも、とりあえず作ってみよう！な始まりなので、「WEB標準」に対してのこだわりは、今しばらく目をつぶっておいて、インラインで埋め込みHTMLのワンファイルを吐き出すAIRツールが完成しました。（ばんざーい！）

初めにレオナルド・ダビンチの名画「モナリザ」を吐き出してみました。104KBのjpgのデータが、なんと3.4MBのhtmlデータになってしまいます。（汗　jpgの圧縮技術って素晴らしいですね。と関心していられない。194px×300pxの大きさの画像でこのデータ量ですから、ちょっとしたサイズになるととんでもない事になりそうです。ブラウザのレンダリング（描画）にも時間がかかります。「子要素になる1px×1pxのDIVをabsoluteして1px単位で揃えたものです。」このことがこんなにもストレスなるとは思いませんでした。

■モナリザ

●まとめ

「CSSで絵を描くことが出来るのか。」からはじまり、マリオを題材に可能であることは分かりました。それをソフトで自動化したのですが、つくってみると気になる点が出てきます。CSSがインラインの記述になってしまったり、データが非常に重くなったりです。XHTML+CSSだけでどこまで改善できるものなのか、いろいろ試してみる価値はあるだろうし、何か新しい発見があるかもしれません。

とりあえず、初めの目的である「CSSで絵を描くことが出来るのか。」は成功です。これからは「どうやったらデータが軽くなるのだろう？」が課題となるのでしょう。正直、軽くできるものなのかわかりませんが…。

Tweet

trackback URL：
http://www.blocco-deli.co.jp/blog/2009/07/03/xhtmlcss/trackback/