C
HTML/CSS 一覧
前へ1 / 11次へ
HTML/CSS//Lesson 01

HTMLは誰が作ったのか

30分·theory

HTMLは誰が作ったのか

🎯 このlessonを読んだら

このlessonを最後まで読めば、次の3つを自信を持ってできるようになります。

  • ▸✅ HTML (ウェブページの骨格を作るマークアップ言語) · CSS (スタイルを適用する言語) のコアパターン
  • ▸✅ Tailwind (クラス名でCSSを素早く適用するツール) とのマッピング
  • ▸✅ アクセシビリティ (a11y · 誰もが使えるように作ること) · レスポンシブ (画面サイズに合わせて自動調整) の適用ポイント

学習目標をチェックリストとして活用し、すべてに答えられるようになったらlessonを閉じてください。

👨‍💻 HTML/CSSを作った人たち — 6人6コマ

01
Tim Berners-Leeティム・バーナーズ＝リー
Inventor of the WebCERN → MIT → W3C1955年〜現在

HTML・HTTP・URLを一人で発明した人物 — 人類のインフラを作った1989年

  • 1989 CERNにて「Information Management: A Proposal」提案書を執筆
  • 1990 世界初のウェブブラウザ WorldWideWeb と初のウェブサーバーを構築・起動
  • 1994 W3C（World Wide Web Consortium）を設立し、初代ディレクターに就任
  • 2004 大英帝国勲章ナイト・コマンダーを叙勲
  • 2017 チューリング賞を受賞 — コンピュータサイエンス最高の栄誉
HTML・HTTP・URL — インターネットではなく「ウェブ」そのものを作った人INVENTOR OF WEB · ウェブの発明者
02
Marc Andreessenマーク・アンドリーセン
Creator of Mosaic & NetscapeUIUC → Netscape → a16z1971年〜現在

ウェブを大衆に見せた最初のブラウザ — インターネットブームの引き金を引く

  • 1993 イリノイ大学（UIUC）在学中にNCSA Mosaicを開発 — 画像をインラインで表示できた初のブラウザ
  • 1994 Netscapeを共同創業しNavigatorをリリース — 市場シェア90%超を達成
  • 1995 NetscapeのIPO — ドットコムバブルの起点とされる
  • 2009 Andreessen Horowitz（a16z）VCを共同設立 — Facebook・GitHub・Coinbaseに投資
Mosaic · Netscape — 「Software is eating the world」の生き証人BROWSER PIONEER · 大衆ブラウザの始まり
03
Håkon Wium Lieホーコン・ビウム・リー
Inventor of CSSCERN → Opera Software1965年〜現在

「文書とデザインを分離しよう」— 一枚の提案書が30年のウェブデザインを作った

  • 1994 CERNにて「Cascading HTML Style Sheets」の提案を発表
  • 1996 CSS Level 1 がW3C公式勧告に — Bert Bosと共同標準化
  • 1999 Opera Software CTOに就任 — ウェブ標準化運動を牽引
  • 2006 オスロ大学にて博士号を取得 — CSSが学術領域に進出
CSS — ウェブデザインを「コンテンツと表現の分離」という哲学の上に築いた人CSS FATHER · CSS の創始者
04
Bert Bosベルト・ボス
Co-creator of CSSW3C（オランダ）1963年〜現在

CSSのもう一人の立役者 — 20年間、標準化グループの議長として細部を守り続けた人

  • 1995 LieのCSS提案に参加し、共同設計を開始
  • 1996 CSS 1 公式勧告の共同著者
  • 1998 CSS 2 を発表 — 位置指定とメディアタイプを追加
  • 2011 CSS Working Group 議長に就任（20年以上在職）
CSS WG — 膨大化した標準の一貫性を保ち続けた見えない手CSS STANDARDS · 標準グループ議長
05
Ian Hicksonイアン・ヒクソン
HTML5 Specification EditorNetscape → Opera → Google1974年〜現在

XHTML 2.0を葬りHTML5を救った人 — WHATWGの単独エディタとして15年

  • 2004 WHATWGを共同設立 — W3CのXHTML 2 路線に反旗を翻す
  • 2008 HTML5の最初のWorking Draftを発表（canvas・video・audio）
  • 2011 「HTML is the new HTML5」— バージョン番号を廃止しLiving Standardへ移行
  • 2014 HTML5 W3C公式勧告GA — 10年間の取り組みの結実
HTML5 Living Standard — 今日私たちが使うすべてのセマンティックタグHTML5 EDITOR · 仕様単独作成者
06
Jen Simmonsジェン・シモンズ
CSS Layout AdvocateMozilla → Apple (Safari/WebKit)現在在職

CSS Gridを大衆に教えた人 — モダンCSSレイアウトの顔

  • 2016 Mozilla Designer Advocate として CSS Grid の教育コンテンツを開始
  • 2017 CSS Grid が全ブラウザに同時リリース — Layout Land YouTubeチャンネルを運営
  • 2020 AppleのSafari/WebKitチームに参加
  • 2023 Container QueriesとSubgridの標準化を主導 — Safariで一級サポートを実現
CSS Grid · Container Queries — モダンレスポンシブデザインの標準ツールMODERN CSS · 現代レイアウトの伝道師
👥
一言で
Berners-Lee（1989年 Web創始）→ Andreessen（1993年 ブラウザ）→ Lie·Bos（1996年 CSS）→ Hickson（2014年 HTML5）→ Simmons（2017年以降 モダンCSS）。30年を作った6人。

HTML/CSS — *すべてのUIのアルファベット*

核心を一言で

HTML (HyperText Markup Language · ウェブページの構造・骨格を表現するマークアップ言語) とCSS (Cascading Style Sheets · 色・サイズ・配置などのスタイルを適用する言語) は、ウェブのアルファベットです。React・Vue・Svelteのようなすべてのフレームワークは、最終的にHTML/CSSに変換されて画面に描画されます。この2つを知らなければ、すべてのUI開発が勘任せになります。

30年の進化

  • ▸1990 — ティム・バーナーズ＝リー、最初のHTML
  • ▸1996 — CSS1標準化
  • ▸2014 — HTML5 + CSS3の標準化（セマンティックマークアップ (タグが意味を持つ) · Flexbox (一軸方向のレイアウトツール) · メディアクエリ (画面サイズごとにスタイルを適用)）
  • ▸2017 — CSS Grid (画面をグリッドで分割するツール)
  • ▸2023 — Container Queries (親コンテナのサイズに応じてスタイルを変更)、:has() (特定の子要素を持つ親を選ぶセレクタ)

これまで後方互換性を維持しながら発展。1995年のコードが今もほぼ動作します。

なぜ今も必要なのか

> 「Reactだけでいいんじゃないですか？」

Reactは結局HTML/CSSを生成します。次の3つのうちどれか一つが欠けても開発が止まります：

1. セマンティックHTML (divではなくarticle·navのように意味のあるタグ) を知らなければ — SEO (検索エンジンへの露出) · アクセシビリティが壊れる
2. CSSボックスモデル · Flexbox · Grid を知らなければ — レイアウトが勘任せになる
3. レスポンシブデザイン (画面サイズに応じた自動調整) を知らなければ — モバイルユーザーの60%を失う

> 💡 HTML/CSSの基礎をしっかり理解することは、すべてのフロントエンド開発の出発点。

このカテゴリで学ぶこと

  • ▸HTMLセマンティック構造（head · body · セマンティックタグ）
  • ▸フォーム入力の標準
  • ▸CSSセレクタ · 詳細度
  • ▸ボックスモデル（最も混乱しやすい部分）
  • ▸Flexbox · Grid（モダンレイアウト）
  • ▸レスポンシブデザイン（メディアクエリ）

これらをすべて理解すれば、ReactやVueも自然に身につきます。

なぜHTML/CSSがすべてのUIの基盤なのか

一言で: ウェブ · モバイルアプリ · 電子メール · ドキュメント — すべてHTML/CSSの上に成り立つ。30年かけて進化したUI標準言語。

ツールマッピング — 各セルの英語はツール名なので、横の説明だけ読んでください

領域標準
マークアップ構造HTML5 (Semantic) (意味のあるタグでページ構造を表現)
スタイリングCSS3 + Custom Properties (変数のように色・サイズを再利用)
レイアウトFlexbox · Grid (一軸方向またはグリッドで自動配置)
レスポンシブメディアクエリ · Container Queries (画面・コンテナサイズに応じてスタイルを変更)
デザインシステムTailwind · CSS Modules (クラス名でスタイルを素早く適用)
アクセシビリティARIA · WCAG (スクリーンリーダーなどの支援技術との互換性標準)

5つのコアな理由

理由意味
セマンティックHTML（意味のあるタグ）<article> · <nav> — スクリーンリーダー · SEO · AI認識がすべて向上
Flexbox/Grid（自動レイアウトツール）手動でのピクセル計算不要。宣言だけでレスポンシブレイアウト
Custom Property（CSS変数）--brand-color の一行でテーマ切り替え
レスポンシブデザインモバイル · タブレット · デスクトップを一つのコードで
アクセシビリティ（a11y · 誰もが使えること）視覚 · 聴覚 · 運動機能に障害のあるユーザーにも対応
Core Web Vitals (Googleが定めたページ体感速度の指標)LCP · CLS · INP — 検索順位とUXに直結

まとめ: HTML/CSSを知らなければ、ReactもVueも意味のないdivの山を生み出すだけ。UI開発のアルファベットです。

🤖 AIにこう聞いてみよう

このlessonの概念を知っていれば、AIに具体的に指示できます。漠然と「直して」と言うのではなく、語彙を持ったリクエスト — それがトークン（AIが一度に処理するテキストの単位）を節約する第一歩です。

  • ▸「このHTML/CSSにセマンティックマークアップ (意味のあるタグを使う) の概念を適用してリファクタリング（同じ動作・よりきれいな構造）してください」
  • ▸「このページのアクセシビリティ (a11y) · SEO (検索エンジンへの露出) を確認してください」
  • ▸「Tailwind (クラス名でCSSを素早く適用) のクラスで同じ結果を作ってください」

なぜこれがトークンを減らすのか

概念を知らない状態ではAIの回答を受け取っても、「それって何ですか？」と再度聞き直す必要が出てきます。その「聞き直し」がトークンを消費します。概念を一度しっかり学んでおけば、会話が一回で完結します。

先に読むとよい概念: DB 上級 — レプリケーション・シャーディング・キャッシュ・コネクションプール・パーティショニング
次のおすすめ: HTMLとは？
前へ一覧次へ
HTML/CSS の基礎 - HTML/CSS