How To Create It?

2.HTML記述の方法 〜Macの場合〜

Macintoshユーザーの方には画像の全てのピクセルを色番号に変換してくれるとても便利なユーティリティを紹介します。このツールは古籏一浩さんに作っていただきました。

 →ダウンロード(34KB)
 →ダウンロード(43KB)


【PICTtoHEXでの基本的なHTMLの作り方】

PICTtoHEXは、RGBで保存された画像ファイルをピクセル毎にrrggbbといった色番号に変換するツールです。オプションで各ピクセル行の行頭に[n行目]、[行頭]、line-nなどを挿入することができます。
チュートリアル画像を用意しました。これを使用して基本的なテーブル・タグド・アートの作り方をご説明します。

1.チュートリアル画像をダウンロードしてHDに保存します。(その他の画像をテーブル・タグド・アート化したい場合は、Photoshopなどの画像処理ソフトで一辺が最大でも40ピクセル位になるようにサイズを変更し保存します。)
2.ダウンロードしたPICTtoHEXを立ち上げ、ファイルメニューから「開く」を選択し、先程のチュートリアル画像(またはサイズ調整をしたその他の画像)を読み込みます。
3.画面に変換元の画像が表示されます。出力形式から「[行頭]というのを入れる」を選択した後、ファイルメニューより「rrggbbテキストで保存」を選択、保存先を指定し、保存します。
4.置き換え機能のついたテキストエディター(YooEdit等)で、保存したテキストファイルを開きます。するとこのようなテキストデータになっています。
5.一番最初の[行頭]を「<TABLE BORDER><TR><TD BGCOLOR="#」に置き換え、最後の行の最後の色番号の後に「"> </TD></TR></TABLE>」と書き込みます。こうなります。
6.2行目から最終行までの全ての[行頭]を「"> </TD></TR><TD BGCOLOR="#」と一括して置き換えます。こうなります。
7.色番号と色番号の間のカンマ「,」を「"> </TD><TD BGCOLOR="#」と一括して置き換えます。こうなります。
8.<HTML>タグや<TITLE>タグ、<BODY>タグを前後に加え、ファイル名に拡張子「.html」をつけ加えて完成です。ブラウザで読み込むとこうなります。

【PICTtoTAGでの基本的なHTMLの作り方】

PICTtoTAGは、RGBで保存された画像ファイルをピクセル毎にrrggbbといった色番号を直接HTML形式に代入して出力することができるツールです。但し、セル毎の背景色ではなく、各セル内の文字の色として出力します。
ここでもチュートリアル画像を使用して基本的なテーブル・タグド・アートの作り方をご説明します。
1.チュートリアル画像をダウンロードしてHDに保存します。(その他の画像をテーブル・タグド・アート化したい場合は、Photoshopなどの画像処理ソフトで一辺が最大でも40ピクセル位になるようにサイズを変更し保存します。)
2.ダウンロードしたPICTtoTAGを立ち上げ、ファイルメニューから「開く」を選択し、先程のチュートリアル画像(またはサイズ調整をしたその他の画像)を読み込みます。
3.画面に変換元の画像が表示されます。文字設定メニューから「テーブル内の文字設定」を選択し、出力したい文字(デフォルトは■)を設定し、ファイルメニューから「HTMLで保存」を選択、保存先を指定し、保存します。こうなります。
4.<HTML>タグや<TITLE>タグ、<BODY>タグを前後に加え、ファイル名に拡張子「.html」をつけ加えて完成です。ブラウザで読み込むとこうなります。