今回はウェブデザインを纏めてみるお話。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はさらに脳に優しいツールへ進化中。結局、人間は「視覚的な格子」を愛している——歴史は螺旋状に、しかし確実に上へ進んでいる。
