トップページ > ブログ > HTML Standard(HTML5)とCSS3で90年代ホームページを作ってみる。

BLOG

ブログ

UPDATE:2023.7.7

CATEGORY

HTML Standard(HTML5)とCSS3で90年代ホームページを作ってみる。

今日は七夕ですね。


まぁ、それはそれとして
コーダーとして日々最新のホームページ事情やデザインをチェックしていると
時々ふと90年代~2000年代初頭くらいのホームページが懐かしく恋しくなることがあります。

90年代~2000年代初頭くらいのホームページ……なにそれ……?

そう思う方に向けて、『90年代~2000年代初頭くらいのホームページ』を一番イメージしやすい
有名なホームページをご紹介します。


この形、懐かしい……なんだかホッとさえします。


でも懐かしさを感じるくらいに大好きなのに
私、こんな感じのホームページを作ったことがありません。

そんなわけで、今回は『90年代~2000年代初頭くらいのホームページ』を作ってみることにします。



90年代~2000年代初頭くらいのホームページとは?

必要不可欠な要素『フレーム』


たとえば『90年代~2000年代初頭くらいのホームページ』といえば
先の例にも利用されているフレーム(frame)を使ったレイアウトでしょう。


そのほか必要なものは以下でしょうか。
・謎の訪問者をカウントするカウンター
・謎の文字や画像が繰り返される背景
・謎の横に流れる文字
・謎の点滅する文字
・謎の虹色の文字
・謎のキリ番制度
・謎の…
こうしてみると謎が多いですね、『90年代~2000年代初頭くらいのホームページ』……


しかし、HTMLの仕様は初期から大きく変わっています。

『90年代~2000年代初頭くらいのホームページ』をイメージする重要な要素のframe要素は、
実は現在のHTMLの仕様では廃止されています。

そんな……frameが使えないなんて……


そもそも私はアプリコットデザインに入社とほぼ同時期にWEB業界のいろはを学んだので、
今のホームページ制作で使われているHTMLの標準仕様(HTML Living StandardとCSS3)しか知りません。

つまりframe要素の使い方がわかりません。

……
……
……

ここまで考えて『90年代~2000年代初頭くらいのホームページ』を作るのを一瞬諦めようとしましたが、
ならば「今現在のHTMLの仕様で『90年代~2000年代初頭くらいの見た目のホームページ』を作る」に目標を変更しました。



現在のHTMLの仕様で作った
『90年代~2000年代初頭くらいの見た目のホームページ』

そして出来上がったのがこちらです。

※「HTML」部分をクリックして非表示にし、0.5倍で見ると見やすいかもしれません。(1.0倍だとレイアウト崩れます)
※レスポンシブしてないのでスマホからだと崩れます。パソコンから見てください(あの頃にレスポンシブなんて存在しなかったからね)

こだわった部分は『流れる文字』と『虹色の文字』です。
虹色の文字は苦労が見え隠れすると思います。(もうちょっとうまいやり方があったかもしれません、、、)
そしてframe要素を使わずにラジオボタンとJavaScriptでフレームっぽく見せることにも成功しました。
反省点としてはtable要素を使い忘れてしまったことでしょうか。

ちなみに右クリックは禁止です。


終わりに

いかがでしょうか、
ちゃんと『90年代~2000年代初頭くらいの見た目のホームページ』に見えましたか?

「昔のホームページって今ほど複雑ではないでしょう?」と思われるかもしれませんが、作ってみると意外と大変です。
(今回は普通に現在の仕様のHTMLを使って作りましたが、
むしろアニメーションがcssで表現できなかった昔の方が作るのは大変だったのでは…?)

今も昔もホームページを作る作業の労力は変わらないのかもしれませんね。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE