0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【2日目】0から始めるプログラミング学習生活 生成AIによるHTMLの歴史の説明+分からない事の整理

0
Last updated at Posted at 2025-08-13

Qiita学習記録PROJECT 2025年8月13日(水)

執筆責任者:Fukuoka
・要件定義、達成目標を設定する。
 ☜Have to do 8/19まで続かなければ、記事撤回。企画回収。

・著者として、出口戦略は、Note,Amazonでの販売を着地点とする。

・プログラミング初心者の学習記録の市場調査を実施
 →検索エンジンは、Google、生成AIはChatGPTを使用。

・活動見積もり・工数の計測
 →アイドルタイム・タクトタイムの計測
 →View数、いいね数の時間的計測。

・再来週に再度点検
 →2025年8月26日(火)Qiita学習記録の目標設定と達成率の公開

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
◆要件定義
 初学者が、生成AIを活用しながら、プログラミングを学習した場合、どのような課題点や壁が出てくるのかを実地で確認するために行う。

◆到達目標
 初学者から、現場で活躍するための基礎的な技術・知識を構築し、ロードマップの策定をする。

 →1週間毎に進捗管理を行う。
 ☜進捗の評価指標を何にするか確定。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 とりあえず、近くの新古書店に行きました。
 HTMLとCSSに関する書籍を発見し、一冊購入。
 とはいうものの、古い書籍だけど、歴史を知る上でも、いいのかもしれない。

 Amazonのレビューを見ていると、悲しい気持ちになったが、とりあえず読み込むことにする。

帯にある、”「基本」を極める”というキャッチが僕の心にフィットした。

早速、本を読んでいくと、以下のような属性:body background という見たことの無い属性が現れた。

とりあえず、BODY BACKGROUD属性について、Chat GPTに訊く。
以下のように返答された。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
HTMLの<body background="...">属性は、HTML4.01の時点(1999年12月勧告)で**非推奨(deprecated)になり、HTML5(2014年10月勧告)で廃止(obsolete)**されました。

年表で見る経緯

  • 1995年:HTML 2.0時代から利用可能(Netscapeなどで普及)
  • 1997年12月:HTML 4.0 勧告 → background属性が非推奨化(CSSでの背景指定推奨)
  • 1999年12月:HTML 4.01 勧告でも非推奨のまま
  • 2008年1月:HTML5ドラフトでbackground属性は「obsolete, not conforming」に分類
  • 2014年10月:HTML5正式勧告 → 仕様から削除(バリデーションエラー)

廃止の理由

  • 表示と構造を分離する「HTMLは構造、CSSはデザイン」という原則に沿うため
  • CSSのbackground-imageプロパティの方が柔軟で高機能だったため

実務的補足

  • 現在のブラウザでも後方互換のため動く場合は多いですが、HTML5準拠ではエラーになります。

  • 置き換えはCSSで:

    body {
      background-image: url("image.jpg");
      background-repeat: no-repeat;
      background-size: cover;
    }
    

もしご希望なら、このbackground属性を使った昔のHTMLコードをCSS化する変換リストも作れます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
知らない用語がいっぱい出てきたので整理する。

KEYWORD
1, HTML2.0
2, Netscape
3, HTML4.0
4, CSS
5, HTML4.01
6, HTML5
7, obsolete, not conforming
8, バリデーションエラー
9, 後方互換

用語については、後日調べることにする。
Versionが更新されると、今までの知識を更新する必要があるらしい。
生涯学習の登竜門に立っている心地がする。

◆HTMLの歴史
 読み進めていくと、WWWの歴史という言葉が出てくる。

これもまた、Chat GPTに問う。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ではWWW(World Wide Web)の歴史を、技術的進化と社会的インパクトの両方から整理します。
(単なる年表ではなく、時代ごとの特徴や背景も盛り込みます)


1. 創成期(1989〜1993)

キーワード:ハイパーテキスト、インターネットの利用拡張

  • 1989年3月
    ティム・バーナーズ=リー(CERN研究者)が「情報管理の提案(Information Management: A Proposal)」を提出。
    → ネットワーク上で文書を相互にリンクするハイパーテキストシステムの構想

  • 1990年

    • 「World Wide Web」プロジェクト始動
    • 最初のWebサーバ「httpd」と最初のWebブラウザ「WorldWideWeb(後にNexus)」を開発
  • 1991年8月
    世界初のウェブページが公開(CERNのプロジェクト紹介)

  • 1993年
    NCSA Mosaicブラウザ公開(画像表示がページ内で可能になり爆発的普及のきっかけに)


2. 普及期(1994〜1999)

キーワード:HTMLの標準化、商業化、検索エンジンの誕生

  • 1994年

    • ティム・バーナーズ=リーがW3C(World Wide Web Consortium)設立
    • Netscape Navigator登場(高速&使いやすさで市場席巻)
  • 1995年

    • JavaScript(当初はLiveScript)誕生
    • PHP、Javaアプレットなど動的コンテンツ技術の登場
    • Amazon、eBay創業(ECサイト時代の幕開け)
  • 1996〜1998年

    • AltaVista、Yahoo!、Google(1998創業)など検索エンジン発展
    • HTML 3.2(1997)、HTML 4.0(1997年12月)勧告

3. Web 2.0時代(2000〜2010)

キーワード:双方向性、SNS、AJAX

  • 2000年前後

    • ブロードバンド普及で画像・音声・動画の利用増加
    • CSSが本格的に普及し、レイアウトとデザインがHTMLから分離
  • 2004年頃

    • 「Web 2.0」という概念が広まる(Tim O'Reilly)
    • AJAX技術によりページを再読み込みせず部分更新可能に
    • Facebook、YouTube、TwitterなどSNSが普及
  • 2008年

    • HTML5ドラフト公開(マルチメディア対応強化、Flash不要化へ)

4. モバイル&クラウド時代(2010〜2020)

キーワード:スマホ対応、アプリ化、クラウド基盤

  • 2010年代前半

    • スマートフォン&タブレット普及、レスポンシブデザインが標準化
    • HTML5正式勧告(2014年10月)
  • 2010年代後半

    • Webアプリケーション(PWA)普及
    • クラウド基盤(AWS、GCP、Azure)がWebサービスの土台に

5. 現代〜未来(2020〜)

キーワード:AI統合、音声・AR・分散化Web

  • AIによるパーソナライズや自動生成コンテンツの増加
  • Web3(ブロックチェーン活用、分散型アプリ)の模索
  • 5G/6Gによりリアルタイム高精細コンテンツが普及
  • メタバースやARブラウジングなど新しいUI/UXへの展開

補足:WWWとインターネットの違い

  • インターネット:世界中のコンピュータを接続するネットワークそのもの
  • WWW:その上で動くハイパーテキスト情報システム(WebサイトやWebアプリ)
    → 例えるなら、「インターネットが道路網、WWWがそこを走る車や地図」

もしご希望なら、この歴史を**「HTMLの進化」と「ブラウザ戦争」の視点**で再構成して、時代ごとの仕様変更や廃止タグの流れも一緒にまとめられます。
そうすると、さっきのbackgroundhrefの話と一本でつながる年表になります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 うん、なるほど、よく分からない。

 どこが分からないのか、分からなさ過ぎて、分からない。

 とりあえず、もう一度、要点をまとめていこう。

 Hyper Textという概念が非常に重要だと思われる。
「文書の中の文字列に、別の文書を呼び出す仕掛け(リンク)を用意」する。
 そうすることで、「必要なときにはその文字列をクリックすれば、情報をどんどんと辿っていける仕組み」なんだそう。

 なぜ、そんなことをするのかというと、論文等の文書を紙ベースではなく、コンピュータで整理、管理するのに適していると考えたかららしい。

では、明日は初期のHTMLはどんなものであったのか調べていこう。

今日はここまで!ご精読ありがとうございました。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
2025年8月14日(木)以下、加筆
 HTMLの歴史について触れてみた。
 結局分からないことが多い。

 でも、一つずつ、なぜ開発されたのか?
 どのような要請があったのか。を確認していけば、基礎的な技術・知識にたどり着く。芋づる方式でやっていくしかない。

 そもそも、なんでインターネットがすごいのか。まだよくわかっていない。でも、きっとインターネットが普及する前の世界と、現代社会は激変したのだと思う。

 生成AIによる技術革新はどうなることか、ドキドキしている。
 とはいえ、基礎的な知識なしに、判断するのはいけないと考えたので、早速だけれど学習を始めよう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?