コンユウメモ @kon_yu

作ったガラクタとか、旅行とかの話

今年もクソアプリ作るぜ!HTML5で2000年頃のHP風にプロフィールサイトを作ったぜ

クソアプリ Advent Calendar 2016 1日目の投稿です。

概要

HTML5、CSS3で2000年頃のホームページ風にプロフィールページを作成した。 ホスティング先は今時のGithub pages

作ったサイトはこれ

https://konyu.github.io/

ベースはTwitter BootstrapではなくGooglematerial design liteを使い、レスポンシブ対応し、header, footer, main, sectionタグを用いて構造を作成し、css3を用いてアニメーションを利用した

ここから2000年頃のHP風のこだわりのポイントを1つずつ解説していく

タイトルは「無題ドキュメント」

ホームページビルダーで作られたページのデフォルト名は「無題ドキュメント」昔作られたいい加減なサイトはけっこう「無題ドキュメント」である。

いまでも「無題ドキュメント」で検索すると、昔の個人ページや企業ページがヒットするので調べてみるといいだろう

<title>無題ドキュメント</title>

metaタグにホームページビルダーのタグ

ホームページを作るといえばホームページビルダー

もちろん今回作成するにあたって使ってない

<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows" />

ジオシティーズの広告が入ってる

ホームページといえばYahoo Geocities。無料版だと自動で広告がページトップに挿入されるのだ。

その広告を適当に再現

スクリーンショット 2016-12-01 23.07.51.png

無駄に背景が連続した画像

スクリーンショット 2016-12-01 23.06.25.png

無駄に画像を字が読みにくい感じで背景画像を設定

Japanese ONLYの謎の人種差別的挨拶

「Sorry,this site is Japanese ONLY」をサイトトップに追加 日本語だけで申し訳ない気持ちを表してるが、英語的に全然ダメ。当時からおかしいという指摘は多々あったけど。 エスカレータは本来2列で並ぶべきなのに、片側を空けてしまうように広まってしまっていたのだ

ダサい感じのアクセスカウンタ

カウンターはなぜかカンストしてるかデータが吹っ飛んでるかで1000+とかで下駄を履いているのもポイント

※ カウンターはイメージです

リンクするルールとバナー画像

スクリーンショット 2016-12-01 23.19.19.png

リンクしてくれるホームページに設置できるように、バナー画像を用意するものなのだ

※ リンクフリーというのもよく使われるけど英語的に間違ってるよ

tableタグをGrid systemで表現

スクリーンショット 2016-12-01 23.22.59.png

昔のページでよく使われたtableタグを多用して作られてるように見えるが、material design liteのグリッドシステムで再現

iframe風のサイドバー

スクリーンショット 2016-12-01 23.27.38.png | スクリーンショット 2016-12-01 23.36.50.png

iframe風のサイドバーは、画面幅が狭くなると自動で非表示になる。スマフォでアクセスしても非表示。

無駄に激しくチカチカするnewアイコン

古くはgifアニメで作られていたがcssのアニメーションで再現

ゲストブック用のBBS

最近めっきりなくなった掲示板(BBS)は昔のサイトは挨拶用とか、XXXXを語る用とか1つのHPに複数のBBSがあったりしたもんよ

100の質問と工事中

その名の通り、昔はやったしょうもない質問が100個ある。100の質問(さらにしょうもない1000の質問というもうクソミソなものもあったもんよ)

そして永遠に工事が完了しないサグラダ・ファミリアのような工事中の表示

なぜか自分のPCの説明のページがある

歴代の自宅PCのマシンスペックが「CPU Pentium3 1GHz」とか「メモリ 512MB」とか書いてある

メーカーのPCが高くて、自作PCで組むと1/3ぐらいの金額で組めた時代だからかね

ポインタについてくる文字列たち

視認性を下げUXを著しく下げるJavascript

Special Thanks

参考にしたサイトたち