Webデザインの歴史をまとめてみる

今回はウェブデザインを纏めてみるお話。phpやリアクトなど動的な技術的は一旦置いておいて原始的なタグの推移のお話。

ウェブページデザインの歴史（主なタグ・技術の変遷）

時期	主なレイアウト/デザイン手法	使われていた主なタグ・技術	特徴・問題点・背景	代表的な見た目例
1991〜1995年	ほぼ純粋な文書構造	<h1>〜<h6>, <p>, <br>, <hr>, <a>, <ul>, <pre>	デザインという概念がほぼ存在しない。ブラウザのデフォルト表示に頼る	白背景＋黒文字、青いリンク、文字ばかり
1993〜1998年頃	画像＋テーブルレイアウトの夜明け	<img>, <table>, <tr>, <td>, bgcolor, background, <font>	Netscapeの<center>, <font color>, sizeなどが乱発。テーブルで無理やりレイアウト	派手な背景GIF、Under Constructionアイコン、カウンター
1998〜2004年頃	テーブルレイアウト全盛期	<table>, <tr>, <td>, 入れ子テーブル、spacer.gif	最も汚いHTMLが量産された時代。メンテナンス性最悪。CSS1は存在するが普及せず	3Dボタン、ドロップシャドウGIF、フレームサイト
2004〜2010年頃	CSSレイアウト移行期（table → float）	<div>, float:left/right, margin, padding, position	CSS Zen Gardenで一気に認知。tableレイアウトは「悪」とされるようになる	Web 2.0（丸角、グラデーション、ドロップシャドウ）
2007〜2012年頃	スキューモーフィズム＋擬似CSS3	CSS3（border-radius, box-shadow, gradient, text-shadow）	iPhone登場後、リアル質感が流行。Flash衰退の始まり	リアルなレザー、ステッチ、金属質感、グラデボタン
2010〜2015年頃	レスポンシブデザインの確立	@media クエリ, max-width, flexible images, fluid grid	Ethan Marcotteの「Responsive Web Design」論文（2010）が決定打	スマホ対応で崩れないレイアウトが必須に
2013〜2018年頃	フラットデザイン全盛期	flexbox (display:flex), フラット色、アイコンSVG	iOS7でスキューモーフィズム終了宣言。ミニマリズム＋大胆な色	ドロップシャドウほぼ消滅、フラット2.0（微妙な影）
2014〜現在	グリッドレイアウトの本格普及	display: grid, grid-template-columns, gap	2017年頃から主要ブラウザが一斉対応。float卒業の最終兵器	複雑なカード配置、マガジン風レイアウトが容易に
2017〜現在	CSS変数、カスタムプロパティ、コンテナクエリ	--変数名, calc(), @container	テーマ切り替え、ダークモードが劇的に楽に。設計思想が大きく変わる	デザインシステム対応が容易に
2020〜現在	ニューモーフィズム / Glassmorphism / 3D風	backdrop-filter: blur(), filter: drop-shadow(), 3D変形	ミニマリズムの飽き＋立体感回帰。GPUアクセラレーション前提	フロストガラス、ソフトUI、微妙な奥行き表現
2022〜2026現在	変数・論理演算・scroll-driven animation	@property, color-mix(), animation-timeline: scroll()	ほぼJavaScript無しで複雑なアニメ・配色・レイアウトが可能に	スクロールで動く高度な演出、AI生成背景など

結局は「格子」へ回帰：ウェブデザインの螺旋進化

歴史は繰り返すとはよく言ったもので、ウェブの歴史を俯瞰すると画面を「情報の格子（グリッド）」として整理するのが、人間にとって最も直感的だという結論に、何度も戻ってきている。 初期の<table>乱用から始まり、floatの混沌、Flexboxの柔軟性、そしてCSS Gridの完成形へ——不自由を解消しながら、結局「2次元の骨組み」が最適解だったという皮肉な軌跡になっている。

1. 「脱テーブル」運動と、制御の難しいfloat時代

2000年代前半、<table>によるレイアウトは「構造を破壊する悪」とされ、CSS floatへの移行が強く推奨されました。
つまり、タグはそのタグ名の意味に合わせて正しく使おうというだけの話です。
tableはデータ一覧など表を作るものであってデザインに使うのは正しくないとシンプルな理由ですね。
次に注目されたのはfloatで、floatは自動折り返しが可能で理論上優れていましたが、現実は「浮遊」の名にふさわしく扱いが難しかった。

floatの致命的な落とし穴

要素を「浮かせる」性質上、後続コンテンツが下に潜り込みやすく、崩壊を防ぐためのclearfixハック（空divや::after偽要素）が必須に。1つ忘れただけでページ全体が崩れる——当時の開発者の悪夢だった。

2. スマホ革命と、Flex → Gridへのスムーズ移行

2007年のiPhone登場で「m.ドメイン」の二重管理が限界を迎え、2010年にレスポンシブデザインが提唱されます。
現代の人には分からないと思いますが「m.ドメイン」というのはガラケーなどのかなり小さな画面向けに1つのサイトに対してPC用と携帯用の実質2つサイト作っていたのです。
スマホが普及するにつれ、ある程度画面幅が確保された事で、1つのサイトが幅によって自動でコンテンツ表示を調整する方が良いという考えに至ったという事です。
この画面幅によって自動的に最適化しようというのがレスポンシブデザインです。

float自体はコンテンツを自動改行でき、レスポンシブとも相性が良かったのである程度続きますがデザイン方法が直感的ではないため苦しめられた人も多かったと思います。
Flexbox（2012年頃本格普及）はfloatの不安定さを解消し、方向性の並べ替えを簡単に実現できました。
ただ、Flexは1次元でのデザインとなるので少し機能面不足があり続けて作られたのがGridという概念です。
ただ、出始めは一部ブラウザが対応してないなどで利用が限られました。

いやまぁ、大抵のタグ問題はIEが最新のタグに対応出来ないという問題が多かったと思います。
そして、根幹的な最大の問題はWindowsのデフォルトブラウザだったせいで切り捨てるの難しかったという側面も大きい。

そして2017年以降、CSS Gridの主要ブラウザ完全対応により、2次元レイアウトが本格的に可能に。
floatやclearfixのような「回避策」はほぼ不要となり、2026年現在、レイアウト目的のfloatは絶滅危惧種と言えます。

3. 最大の皮肉：本物の表データでさえ<table>を避ける現代

Gridが成熟した今、面白い逆転が起きている。
かつて「脱テーブル」を叫んだ私たちが、今度は「本当に表形式のデータすら、<table>を使わずdiv+Gridで作りたがる」という矛盾を抱えている。
Tableタグは柔軟性が低くそのままではレスポンシブでもはみ出やすい。
例えば、幅を単に100%にすると幅に収まるが表が超縦長になる。
なので、Tableはdivで囲んでoverflowとセット、角を丸める等にしてもdivで囲んだ方良い。
ただ、それなら最初からdivで表にしようと思うのは自然な考えだと思います。

なんならリストだったり、ボタンも意味タグを使うよりも柔軟にできるdivを使う場合もあると思います。
こうなってしまうと全てがdivでclassを見なければ何を意味するのが構造が理解しにくい。
個人的には意味タグを優先して使うがWebツールなどの場合はどうしてもdivで代替する事はやはりある。

なぜdiv+Gridを選ぶのか

React/Vueなどのコンポーネント駆動開発では、<table>の厳格な親子構造よりdivの方が柔軟。レスポンシブで「列をカードに変形」「仮想スクロール」「ソート・フィルタUIのカスタム」が容易だからだ。TanStack Tableなどのライブラリも、内部でdivベース+ARIAを駆使している。

アクセシビリティの再来する代償

見た目は表でも、divの塊ではスクリーンリーダーに「行・列の関係」が伝わりにくい。かつてのtableレイアウトと同じく、意味の欠落が起きている。2026年現在、WCAGも「真の表データは<table>を推奨」と再確認しつつ、開発現場では「利便性＞セマンティクス」のトレードオフが続いている。

---

デザインは歴史を繰り返しながら少しずつ上に

意味の違う「箱（table）」→扱いの難しい「浮遊（float）」→デバイス分断の時代を経て、ウェブは再び「進化した格子（Grid）」に戻ってきた。
 Flexboxでfloatは減り、Gridでfloatはほぼ消滅。過去の不便を解消しながら、「情報の2次元整理」という本質だけは変わらず残る。

2026年の今、Subgridやmasonryレイアウト、container queriesが加わり、Gridはさらに脳に優しいツールへ進化中。結局、人間は「視覚的な格子」を愛している——歴史は螺旋状に、しかし確実に上へ進んでいる。