手抜きの静的サイトを作ってみた

2026.07.20

前回、全力の静的サイトを作りました。HTMLファイル1つに2000行以上のコードを詰め込んで、CSSアニメーション、SVG、JavaScript、全部入り。

今回はその逆です。手抜きで作ります。

このページがそれです。今あなたが見ているこのページ。CSSを一切書いていません。viewportの指定すらしていません。文字の大きさも色もブラウザの初期値。全部左詰め。余白もブラウザ任せ。

何を省いたか

• CSS — 0行。外部ファイルも読み込んでいない。インラインスタイルもない。
• JavaScript — 0行。ハンバーガーメニューもない。動くものが何もない。
• viewport指定 — なし。スマホで見ると小さいかもしれない。
• SVGアイコン — なし。装飾が何もない。
• レスポンシブ対応 — なし。画面幅に関係なく同じ見た目。
• フッター — なし。下まで読んだら終わり。
• ナビゲーション — 一番上のリンク2つだけ。

全力と手抜きの比較

最後の行がポイントです。どちらも表示される。どちらも静的サイト。仕組みとしては同じものです。

手抜きでも動く理由

HTMLの仕様は寛容にできています。CSSがなくてもブラウザは初期スタイルで表示してくれます。見出しは大きく太く、段落には余白がつき、リンクは青くなる。全部ブラウザが勝手にやってくれます。

逆に言えば、全力版の2000行は「ブラウザの初期値が気に入らないから自分で全部指定し直した」ということです。手抜き版は「ブラウザさん、全部お任せします」。

まとめ

• 静的サイトはCSSもJavaScriptもなくても成立する
• ブラウザの初期スタイルだけで文章は読める
• 全力の約2000行と手抜きの約70行は、どちらも同じ「静的サイト」
• 見た目に差はあるが、仕組みは同じ。ファイルを置いて、ブラウザが読む。それだけ

前回は「HTMLだけでここまでできる」を見せました。今回は「HTMLはここまで手を抜いても動く」を見せました。

← その他の記事一覧に戻る