「メモ帳でホームページを作る技術」はもう使えないのか？　Windows 98で現代のTwitterっぽいものを再現してみた（2/3 ページ）

» 2018年06月04日 10時00分公開

[高橋ホイコ，PR／ねとらぼ]

前のページへ 1|2|3 次のページへ

Excelアート的な古代ハック技術「テーブルレイアウト」

　さあ、メモ帳でTwitterを作りますよ！　アクセサリからメモ帳を開きましょう。

　最初にホームページの呪文「＜HTML＞＜HEAD＞＜／HEAD＞＜BODY＞＜／BODY＞＜／HTML＞」を打ち込みます。今では小文字で書かれるタグも、昔は大文字でした。

ホームページの呪文を入力

　BODYタグの間に本文を書きます。まず、書くのはTABLEという表のタグです。そう、今となっては全面否定されている「テーブルレイアウト」を使います。

テーブルレイアウトの罫線を表示させた状態。最終的に罫線を消します

　画面全体に表を表示させ罫線を消します。表の枠組みを使ってデザインするという大胆な手法です。1997年頃から一気に広まったものの、1999年12月のW3C勧告で「表じゃないものに表を使うな」と否定され徐々に消えていきました。今やると先生に怒られます。

メモ帳でそのままタグを打ちこみます。このファイルをブラウザで開けばホームページ画面になります

　太字を書きたければ＜B＞タグで囲い、文字の色や大きさを変えたければ＜FONT＞、改行するには＜BR＞を使ってコードを書いていきます。これらのタグだけでTwitter画面っぽいものができちゃいます。たった1～2時間で文字部分が完成しました。

文字部分が完成しました！　あとは画像を入れるだけ

　現代風にCSSを使ってデザインしようとするとしこたま時間がかかる筆者ですが、テーブルレイアウトならサクサク作れちゃいました。若い頃培った技術はこんなにも体に入っているものかと、年寄りっぽいことを感じてしまいました。

画像は「食品ラップ」を使って描こう！

　画像を作っていきましょう。メモ帳と同様に古くからWindowsに入っている「ペイント」を使います。こちらでも今では考えられないアナログな手法を使いますよ！

　かつて画像のトレース作業で使っていたのはなんと「食品ラップ」です。写したい元の画像の上に食品ラップを張り、マジックでトレースします。次に食品ラップをPC画面に張り、ペイントでそれをなぞってトレースするのです。

　もしかしたらこのやり方をしていたのはWindows 3.1も登場していない90年頃かもしれません。雑誌のイラストなどをこうしてトレースして遊んでいました。CRTモニターなら静電気でうまく張り付くのですが、液晶画面では張り付かないですね。

作りたい画像をラップに写す

Twitterアイコンもマジックでなぞります

ペイントでラップのイラストをなぞる。ラップのイラストが小さすぎました

　遠くから見ればそれっぽく見えるTwitterアイコンの完成です。タッチパッドで描くことになり、苦労しました。

Twitterアイコンが描けた―！

PS/2マウスがないからタッチパッドで描くしかない、辛い

　ここで事件発生です！　なんと、ペイントでJPEG形式保存ができないではないですか。ホームページの画像はJPEG・GIF・PNGのどれかです。初期のペイントがBMP形式だったのは把握していましたが、Windows 98でもまだJPEG対応していなかったとは……。

JPEGで保存できないだとっ！

　BMPをJPEGに変換できるプリインストールソフトがあったので、そちらでなんとか変換ができました。メモ帳とペイントだけでTwitter作れるとかウソをついてしまいました。あああー。

　ソースに画像を表示するコードを追加します。マウスコンピューターの公式Twitter画面（っぽいもの）が再現できましたー！

Twitter画面できたー！！

　めちゃくちゃそれっぽい！　「いま、Windows 98でTwitter開いたらこんな感じ」感がよく出ています。オシャレなカフェにWindows 98持ち込んで、この画面開いてドヤリングしたいわー。

今では使えないタグばかりになりました

　完成したソースコードを眺めると、9割がた現在ではやってはいけない書き方をしています。文字の大きさや色を指定する＜FONT＞、文字を太くする＜B＞は代表的な例です。筆者は最新のHTML5には疎いのできちんと把握しきれていませんが、もう、もう、全然アウトな知識になっているはずです。仕事の役には立ちません。