他ブログ最新記事

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTMLのTableタグを使ってドット絵を描いてみた

2010年10月22日 01:04

HTMLで表を作りたい時、<table>タグを使います。
このブログでもF1のニックネーム紹介などで使用しています。

↓コレです。画像じゃないよ。
チーム ドライバー ニックネーム
マクラーレン ジェンソン・バトン 遅咲きの新チャンピオン
ルイス・ハミルトン 逆襲の史上最年少王者

この表を使ってドット絵を描けるんじゃないか?とふと思いました。
(たぶんもうやっている方はいると思うケド・・・w)
つーことで早速チャレンジ!

ただお使いのウェブブラウザによって正しく表示されない可能性があります。
一応自分の環境でFirefoxとIE7は確認したのですが・・・。
正しく表示されない場合はご報告してくださると助かります。

※しつこいですが、この記事では画像は一切使用していません!

マリオ
枠有り 枠無し
     

マリオ枠無しのCSS


マリオ枠無しのテーブルソース


スペランカー
枠有り 枠無し
     

スペランカー枠無しのCSS


スペランカー枠無しのテーブルソース


ロックマン
枠有り 枠無し
     

ロックマン枠無しのCSS


ロックマン枠無しのテーブルソース



1作品30分程度で完成しますが、いかんせん面倒ですw
ちなみに使用したのは、
・元のドット絵画像
・サクラエディタ(テキストエディタ)
・ペイント(色の抽出の為)
・電卓(16進数計算の為)
だけです。

【追記】
テーブルソースがIEだと正しく表示されないっぽい?
あれ?<iframe>ってIE対応してなかったっけ?
直すのも面倒なのでどうしてもソースを見たかったら
右クリック→ソースの表示
などで見てくださいw
関連記事
スポンサーサイト


1クリックしようとすると璃緒ちゃんが微笑みます


コメント

  1. きくゾう | URL | -

    ロックマンうめぇwww

  2. もちぇ | URL | -

    Re: タイトルなし

    > きくゾうさん
    一番苦労したからねw
    4色はキツイぜ。

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://mocheblog.blog22.fc2.com/tb.php/387-e761f6fa
この記事へのトラックバック



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。