今年もクソアプリ作るぜ!HTML5で2000年頃のHP風にプロフィールサイトを作ったぜ
クソアプリ Advent Calendar 2016 1日目の投稿です。
概要
HTML5、CSS3で2000年頃のホームページ風にプロフィールページを作成した。 ホスティング先は今時のGithub pages
作ったサイトはこれ
ベースはTwitter BootstrapではなくGoogleのmaterial 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。無料版だと自動で広告がページトップに挿入されるのだ。
その広告を適当に再現
無駄に背景が連続した画像
無駄に画像を字が読みにくい感じで背景画像を設定
Japanese ONLYの謎の人種差別的挨拶
「Sorry,this site is Japanese ONLY」をサイトトップに追加 日本語だけで申し訳ない気持ちを表してるが、英語的に全然ダメ。当時からおかしいという指摘は多々あったけど。 エスカレータは本来2列で並ぶべきなのに、片側を空けてしまうように広まってしまっていたのだ
ダサい感じのアクセスカウンタ
カウンターはなぜかカンストしてるかデータが吹っ飛んでるかで1000+とかで下駄を履いているのもポイント
※ カウンターはイメージです
リンクするルールとバナー画像
リンクしてくれるホームページに設置できるように、バナー画像を用意するものなのだ
※ リンクフリーというのもよく使われるけど英語的に間違ってるよ
tableタグをGrid systemで表現
昔のページでよく使われたtableタグを多用して作られてるように見えるが、material design liteのグリッドシステムで再現
iframe風のサイドバー
|
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
参考にしたサイトたち