※htmlの勉強はQiitaとかでやってください。ここを見ても特に勉強にはなりません。

このブログ、もともとカササギ"技術"部という名前にする予定だったのに、まったく技術的なことをしていない…
というわけで、今回はHTMLのとあるコードについて解説していこうと思う。

そもそもみなさんは、このサイトをご存知だろうか。
http://abehiroshi.la.coocan.jp/

古き良き、爆速ホームページ代表こと阿部寛のホームページ。

知っている方は分かっているだろうし、知らない方は今開いてわかっただろう。
このサイト、めちゃくちゃ軽い。
これがなぜこれほど軽いのか、ご存知だろうか。

説明のためにコードを載せたかった
が、残念ながら阿部寛のホームページのソースを載せることは禁止されている。
そこで、代わりに似た構造をしている僕のサイトを載せようと思う。

スマホで見たら余計な改行が入っているかもしれないが、なんとこれ、たったの8行である。(ちなみに本家様は15行)
実はこれを使っているサイト、(naf.f5.si)、ここと同じサーバーを間借りして領域展開中だったり

これを見て
「なるほど、だから軽いのね！」
と早合点して堂々とそんなことをQiitaに書いた方がいらっしゃるようだが、
実際のところ、これはあくまでサイトの“枠組み”だけであって、
プロフィールページやメニューページは別のファイルが読み込まれている。

が、当然のことながら中身のHTMLも軽い。
これはCSSを一切使ってないためである。
あのデザインをCSSなしで実現するのはさすがの腕前だと思う。

以下中級者(以上)向け

背景のあの模様はどうしているのか、ということを、Webデザイン経験者は思ったことだろう。 じつは、こんなコードを使っている。

おわかりいただけただろうか。 そう。タグの中にStyleを指定するという荒業でCSSを使わずに実装している。 そして左側メニューはこのようになっている。

これに関しては自サイトでも平気で使っているので特に何も言えない

僕はHTML4の時代すら知らない2010年生まれだが、
この時代のコードは見ていて楽しい。
阿部寛のホームページが開設された当初はスペックと戦いながらデザインをしていたのだから、作者に敬意を表したい。
そしてなにより、今でも生きているいにしえのサイトとしてこれからも生き続けてほしい。

これからも、阿部寛のホームページを見られますように。