10年ぐらい前のHPデータ発掘したのでHTMLだけでどこまでできたのか見てみた

2020年2月21日 16:42

こんにちわ。トラコマです。

昔のパソコンを整理していたら、最後に作った同人サイトのデータが出てきました。黒歴史…

データの中身を見てみたら、やはりCSSなんてどこにもない。
当たり前ですよね、その頃の私はCSSてものが存在すること自体知らなかったのですから（笑）

↓これがINDEXページ。腐ってました。

最後に作ったホームページのTOPは、白背景に黒文字でしたが、デザインは丸っきり同じなので、色付きのこれにしました。

HTMLソースはこんな感じ。

<html>
<title>〇〇〇</title>
<HEAD>

<BODY BGCOLOR="#426579" TEXT="#ffffff" LINK="#ffffff" VLINK="#ffffff">
<STYLE type="text/css" SCROLLING="yes">
<!--BODY {
    scrollbar-face-color:#426579; /* スクロールバー本体の色 */
    scrollbar-hight-color:#426579; /* スクロールバー左側(上)の色 */
    scrollbar-shadow-color:#426579; /* スクロールバー右側(上)の色 */
    scrollbar-3dllight-color:#426579; /* スクロールバー左側(下)の色 */
    scrollbar-arrow-color:#426579; /* 矢印の色 */
    scrollbar-track-color:#426579; /* 背面の色 */
    scrollbar-darkshadow-color:#426579; /* スクロールバー右側(下)の色 */
}-->
</STYLE>

<BESEFONT SIZE="1">

<br>
<br>
<br>
<br>
<br>
<font size="+9" face="Impact,Arial,Arial Black">
<A HREF="top.html" onMouseOver="this.style.color='#9acd32'"
    onMouseOut="this.style.color=''">ENTER≫</a></font>
<br>注意書き

</body>
</HTML>

よく見たらCSSありましたね。当時の自分はこれもHTMLの一種だと思ってます。バカ野郎です。
そして、大文字と小文字の統一感がなくって、すごい汚いソース。

覚えている限りで説明しますと、最初の<BODY>内に設定されているのが、順番に「背景」「文字色」「リンクカラー」「リンクをクリックした後の色」となります。

次にCSSで指定しているSCROLLINGですが、yesでスクロールバーを常に表示させる、noで非表示て感じです。これはiframeで使う機会があると思います。

<BASEFONT SIZE="1">てのはそのまま。
このページの基本フォントサイズは1ですよーっていう指定です。単位はpxだっけ？忘れましたwww

<font size="+9" face="Impact,Arial,Arial Black">は、
ベースフォントサイズ1＋9のフォントサイズ、ImpactまたはArialのフォント種類で表示してください。今でいうfont-familyです。

<A HREF="top.html" onMouseOver="this.style.color='#9acd32'"
    onMouseOut="this.style.color=''">ENTER≫</a></font>

↑のリンク設定の中身は、要はhover時の設定になります。
onMouseOverでカラー#9acd32にして、onMouseOutでマウスが離れたら元に色にしてます。

続いてTOPページです。

堂々と腐向け混ざってるっていっとる。

見づらいですが、フレーム分けしたデザインになっています。
今だとCSSで組みますが、これもHTMLだけでフレーム分けしてました。

まず、元となるファイルを作ります。名前は【top.html】に。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET cols="25%,75%" border=1 borderColor="#ffffff" frameBorder=1 frameSpacing=1>
    <FRAME src="top-a.html" name="-1" noresize frameboder="no" SCROLLING="yes">
    <FRAME src="top-b.html" name="-2" noresize frameboder="no" SCROLLING="yes">
</FRAMESET>

<noframes>
<body>
<p>
このページにはフレームが使用されていますが、お使いのブラウザではサポートされていません。
</p>
</body>
</noframes>

</HTML>

<FRAMESET cols="〇%,〇%">での横並びフレーム幅を決めます。
縦フレームの場合は、rows="〇%,〇%"。

border＝フレーム境界線の太さ。
borderColor＝フレーム境界線の色。
frameBorder＝境界線の表示・非表示の設定。1で表示、0で非表示。
frameSpacing＝フレーム境界線の太さ。

…なんでフレームの境界線の太さを2回設定してたんだろう？
borderColorとframeSpacingて微妙に違うんだっけ？多分コピペしたやつだから理解しないで使ってたと思います。

<FRAMESET></FRAMESET>内に、表示させるファイルを読み込みます。
nameは適当。noresizeでフレームのリサイズを禁止させ、両ファイル共スクロールできるようにしてます。

元となるファイルを作成したら、各フレームに表示させるファイルを作成。
↓は【top-a.html】

<HTML>
<HEAD><
<BODY BGCOLOR="#ffffff"...

省略

...>
<BASEFONT SIZE="1">

<A HREF="top-b.html" TARGET="-2"><img src="TOP画像.jpg" border="0"></a>
<br>
<br>
<table cellspacing="0" bgcolor="#ffffff">
<tr>
<td bgcolor=#ffffff width=50>
<font size="+1" fase="Impact,Arial,Arial Black">
<A HREF="〇〇〇.html" title="日記"
    onMouseOver="this,style,color='#9acd32'"
    onMouseOut="this,style,color=''" TARGET="-2"><b>BLOG</b></font></a>
</td>
.
.
.
<td bgcolor="#ffffff" width=50>
<font size="+1" fase="Impact,Arial,Arial Black">
<A HREF="〇〇〇.html" title="リンク"
    onMouseOver="this,style,color='#9acd32'"
    onMouseOut="this,style,color=''" TARGET="-2"><b>LINK</b></font></a>
</td>
.
.
.
</tr></table>

省略

</body>
</HTML>

ホント汚い！なんで大文字と小文字を統一してないのか。なんで最初大文字なのに最後小文字で閉じてるのか。イミカワラン！
これでは修正しましたが、bgcolorのカラーコードにダブルクォーテーション付けてなくって、ちゃんと反映してなかったと思う。

あと、テーブル要素の一つ一つに、背景色とか横幅とか指定してますね。
こうやらなきゃ反映しなかったんでしたっけ？？…絶対もっと良い方法あったはずでしょ…

【top.html】で指定したhtmlファイルを作成したら、さっきのTOPページができます。

↑これ。

ソースが汚くなりますが、HTMLだけでもそれなりのデザインができました。レスポンシブ対応はまったくできませんけどね！w
まぁ非推奨属性が多いですし、<br>を多用しないと詰まった感じになるので、当然ですが今は絶対できないことです。

調べてみたらCSSって1996年に誕生してるみたいです。
私がはじめてホームページを作ったよりも、5年ぐらい前に誕生してたってことは、絶対一般的に使われてましよね。

どんだけ、ちゃんと勉強してなかったのか…自分…

あと、どのファイルもよく見ると、スクロールバーの設定がコメントアウトしてるのですが…

絶対反映してないじゃん。

この記事が気に入ったらサポートをしてみませんか？