ほんっとにはじめての HTML5 と CSS3

HTMLの書き方から話が始まったのに、CSSがかなりしつこく登場していますね。
ここらで1度、HTMLとCSSの関係について整理しましょう。
セットで使わなきゃならない、ちゃんとした理由があります。
それは「HTML文書」の本来のあり方の確立と、「アクセシビリティ」の確保です。

昔はぜ〜んぶHTMLだけで書いてた…！

1990年代中頃にはもう既に「スタイルシート」はあったんですけど、それを使う事そのものが、あまり一般的でなかったんです。
HTMLの要素に文字の色や太さを指定できるタグ（属性かな）があったりして、HTMLソースだけでサイトを作っていました。

その理由は、スタイルシートをサポートしているブラウザと、そうでないブラウザが混在していたから。
そして、各ブラウザはシェアを獲得しようと独自に（かなり勝手に）タグを作っていた。
当時は何でもアリの「ブラウザ無法時代」だったんです。（遠い目…）

★「ブラウザの歴史」については、下部の おまけ：インターネット技術・ブラウザなどの歴史 にまとめましたのでご覧ください。

下手にスタイルシートを使うと、ブラウザによって見た目が変わってしまうので、どんなブラウザでも同じ見た目にするために「table関連の要素でレイアウトを組む」のが主流でした。
今考えるとそれはもう「セマンティックなマークアップ（semantic markup）」なんてのには程遠い世界でした。

当時の「Fireworks」も、スライスで切って HTML出力すると、tableで組んで出してきましたしね。
これはこれですごいよね。

しかし当時のデザイナーにとっては、これがベストな方法だったんです。
誰でも同じように見えるようにしなければ、ビジターに不利益。そうなればクライアントの不利益になるから。

ただ、table関連の要素は、その名のとおり本来「表組」を構成するためのもの。
これを無理やりレイアウトに使うのですから、当時でもかなり違和感はありました。
tableタグのせいで、HTMLがめっちゃ長く、複雑怪奇になるし。tableの意味なんてまったく無いし。（<table> 関連の要素については、後日詳しく書く予定です）

W3Cが交通整理に乗り出した！

サイトの見た目の情報をHTMLに大量に書き込むため、HTMLソースがやたらに長く複雑になっている。
それでもブラウザによっては、見れるページと見れないページがある。
しかもこれでは、HTML本来の用途「文書構造を表示する」が達成されていない。
そろそろ誰かどうにかしなきゃ。

で、1996年、W3Cが「CSS 1.0」を勧告。
「HTMLは文書構造のみを、レイアウトはCSSで定義を」と提唱したのです。
言わば、みんな好き勝手にドライブしてる無法地帯だったのを、W3Cが交通整理に乗り出したってかんじかな。

それ以降、各ブラウザはW3C準拠で開発を進め、おかげで今ではどのブラウザでも、CSSどおりの表示にできるようになったんです。時間をかけてだんだんとですが。
（独自仕様にこだわったIEも、やっと消えゆく存在になって良かったw）

W3C (World Wide Web Consortium) とは、WWW (World Wide Web) で利用される技術の標準化を促進する団体。Web技術に強い企業・学術団体・個人が集まって、1994年に発足しました。

WHATWG (Web Hypertext Application Technology Working Group) という団体もあります。
同じくWeb上の技術を標準化する団体で、実際にブラウザを作る側（Apple、Mozilla、Opera）の有志が集まって 2004年に発足。W3Cの仕様が現場に合ってない（HTMLの流れを、W3C は一旦 XHTML にした）からとか。
HTML5 はもともと WHATWG が勧め、W3Cが受け入れ、双方の共同作業で標準化したそうです。
というわけで、べつに敵対してるわけじゃないけど、今は W3C と WHATWG のダブルスタンダードになっているのが現状。両者で異なる仕様ができたりもしています（ルビ関連の仕様とか）。

W3C準拠で作るから「HTMLとCSSはセット」

ブラウザはW3C準拠の仕様になっているのですから、W3C準拠の仕様でウェブサイトを作れば、どのブラウザでもこちらの意図どおりの表示で見せられるというわけです。

で、W3Cが「HTMLは文書構造のみを、CSSでレイアウトを」と提唱してるのですから、そのとおりに作る。 だから「HTML と CSSはセット」なんです。

「HTMLは文書構造のみ」が正しく情報をゲットさせる

W3Cが言うとおりに、HTMLは文書構造だけにしておいて、見た目の情報はCSSでやっておけば、ビジターみんながそれぞれちゃんと、そのサイトが伝えたい情報をゲットできるんです。

例えば、
★古いブラウザで見てる人
★低速環境で見てる人
★で、画像や動画は重いから読み込まない設定にしてる人
★CSSを無効にして見てる人（ユーザー独自のCSSを指定してる人もいます）
★文字をでっかくしたい人（単に老眼とかだけでなく、大きくしないと見えない人もいます）
★音声読み上げブラウザを使ってる人（視覚情報無し。音声情報だけの人もいます）

「HTMLは文書構造のみ」で書くというのは、CSSの指定なしでも、HTML文書だけで意味が通じるサイト。これを目指しています。

サイトに訪れてくれる人に、誰でも同じようにサイトの情報をゲットしてもらうために。
この「誰でも同じようにゲットできる」っていうのが、これがアクセシビリティという考え方です。（ユーザビリティとも）

アクセシビリティ（accessibility）とは、「アクセスのしやすさ」って意味です。
建物や交通施設へのアクセスだけでなく、製品、情報、サービスなどのあらゆるものに対しての近づきやすさを表すのが本来の意味。
Webの場合は、閲覧環境などへの対応性も表します。
「ユーザビリティ（usability=使いやすさ）」という考え方も、Web上では同じかな。
小さい子が読む本に「ルビ（ふりがな）」つけますよね。あれが日本に昔からある usability、accessibility。

で、具体的にはどうする？

別にコレと言って特別なことをする必要は無く、これまでやってきたようにHTMLの各要素を正しい用途で使えばOK。

タイトルは <title>、見出しは <h1> 〜 <h6>、段落は <p> など、それぞれを「その役割どおりに正しく」使うだけ。それでHTMLの文書構造は正しく構築できます。

HTML5はこのように、1つひとつの要素の役割が決まっていて、その役割にピッタリの箇所に使っていくルールになっています。
これを セマンティックなマークアップ（semantic markup）と言います。

「semantic」は「意味論の」「意味論的な」と言った意味の形容詞です。
まあ「ちゃんと役割どおりの要素を使って意味のあるマークアップをしろ」的なことです。

HTMLの要素ではできない装飾はCSSで

HTML要素の文字に色を付けたり、背景に色や画像を入れたり、したいですよね。
ブラウザには「デフォルトのスタイル」が既に設定されていますが、それを変えたいときに、CSSの出番になります。

CSSでビジュアル面をどれだけ変えても、HTML文書をきっちりと構築してあれば、HTMLだけで（ビジュアル的に見てない人にも）、情報はみんなに同様に伝わります。

HTML文書だけでサイト情報が全て伝わるのが理想。まずそこを目指してHTMLを書く。
で、HTMLでは指定できない装飾はCSSで指定。
この方法がベストです。

おまけ：インターネット技術・ブラウザなどの歴史

グリーンが インターネット・Web の技術の、ブルーが ブラウザの歴史です。
（後半ものすごくザックリです。2017年9月までの情報です）

1969年

IBM で GML（Generalized Markup Language）を開発。
Charles Goldfarb、Edward Mosher、Raymond Lorie の3氏によって開発され、GML は3氏の頭文字でもある。

1986年

ISO（国際標準化機構）でGMLを標準化しSGML（Standard Generalized Markup Language）とする。

1989年

CERN（欧州素粒子物理学研究所）の Tim Berners-Lee氏が、WWW（World Wide Web）を考案し、HTTP（HyperText Transfer Protocol）、URL（Unform Resource Locator）を開発。
さらに、ページ記述言語として SGML をベースとした HTML（HyperText Markup Language）を開発。
SGMLは、(1)文書型定義　(2)1に従って文書を記述という２つの過程により文書を記述したが、HTMLは、このうちの(1)を省略したものだそうです。

1990年

WWW（World Wide Web）誕生（CERNが、世界初の WWWサーバと WWWブラウザを試作）

1993年

NCSA（National Center for Supercomputing Applications = イリノイ大学のスパコン応用研究所）が Mosaic 1.0 をリリース。（UNIX版、WIN & MAC版）
Mosaicは初めての画像表示ができるブラウザ。

1994年

Berners-Lee氏（CERN）が先頭に立ち、Web技術の標準化をする機関として W3C（WWW Consortium）設立。

Netscape社設立（設立時は、Mosaic Communications社）Mosaicの開発者 Marc Andreessen氏が設立時に参加。
Netscape社、Netscape Navigator 1.0 リリース。（これが「ネスケ」ってやつ）世界シェア90％に。

1995年

Microsoft社、Internet Explorer 1.0 リリース。IE は Mosaic のライセンスを引き継いで開発されたブラウザ。

1996年

W3C、CSS1.0（Level 1）を勧告。

Netscape Navigator 2.0 をリリース（JavaScript 1.0 と Java をサポート）
Netscape Navigator 3.0リリース。
Internet Explorer 3.0 リリース。Netscape と Internet Explorer の闘いが本格化。
Opera リリース。

1997年

W3C、HTML4.0 を勧告。

Netscape Navigatorがブラウザ市場の7割を占める。
Netscape Communicator 4.0 をリリース。（CSSやダイナミックHTML機能をサポート。しかしバグが多かった）
Internet Explorer 4.0 をリリース。機能的に Netscape を超えて、しかも無料。

1998年

W3C、XML1.0（eXtensible Markup Language）を勧告。CSS2.0（Level 2）を勧告。

Netscape社、ブラウザの無償化。Netscape Communicator 4.5 リリース。
Netscape社から Mozilla Organization が設立される。
Netscape社、11月、AOL社に買収される。

1999年

Internet Explorer 5.0 リリース。

2000年

W3C、XHTML1.0 を勧告。HTML4.0（HTML4.01）の仕様を、XML に準拠するように再定義したもの。HTMLの要素とCSSの役割が分離される（今の書き方に）

Internet Explorer 5.5、Netscape 6、Opera4.0 がそれぞれリリース。

2001年

W3C、XHTML1.1 勧告。

Internet Explorer 6.0。IE の日本でのシェアが一位に。
Opera 5.0 及び 6.0 リリース。

2002年

Netscape 7 リリース。
Mozilla Organization が、Mozilla 1.0 リリース。

2003年

Opera7.0 リリース。
Apple社、Safari 1.0 リリース。それまでは、Microsoft との提携により「Internet Explorer for Mac」が Mac のデフォルトブラウザだった（1997年からの5年間）

2004年

W3C、CSS2.1（Level 2.1）を勧告。
WHATWG（Web Hypertext Application Working Group）設立。

Mozilla Foundation、Firefox リリース。

2005年

Opera 8.0 、Safari 2.0 、Netscape 8 がそれぞれリリース。
CSS、XHTMLをサポートするブラウザが出揃う。オールドブラウザとモダンブラウザが混在する状況。

2006年

Internet Explorer 7.0 、Opera 9.0 、Firefox 2.0 がそれぞれリリース。

2007年

Safari 3.0 リリース。
Netscape 8 リリース。ネスケはこれが最終版。

2008年

W3C、HTML5のドラフトを発表。

Googleから Chrome リリース。
Opera 9.5、Firefox 3.0、Safari 4 がそれぞれリリース。

2009年

Internet Explorer 8.0 リリース。
Chromeは、2.0、3.0 が次々リリース。
Opera 10、Firefox 3.1、Safari 4 がそれぞれリリース。

2010年

Opera 10.6、Firefox 3.6、Safari 5、Chrome 8 がそれぞれリリース。

2011年

Internet Explorer 9.0 リリース。

2012年

Internet Explorer 10 リリース。

2013年

Internet Explorer 11 リリース。IE の最終版。

2014年

W3C、HTML5 を勧告。
CSSは「機能別モジュール」に分けられ、各モジュールごとに「Level 3」が勧告されている（これを通称 CSS 3 と呼んでいます）。

2014年

Microsoft社、Microsoft Edge をリリース。
Chrome 39 、Firefox 34 、Safari 10.1 、Opera 47 がそれぞれリリース。

2016年

W3C、HTML5.1 を勧告。

2017年

Chrome 61 、Firefox 55 、Safari 8 、Opera 26 がそれぞれリリース。

関連記事

• [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
• [14-3] データの容量を示す単位（バイト、キロバイト、メガバイト）
• [14-2] 画像形式について（GIF、JPEG、PNG の違い）
• [14-1] ブラウザでソースを表示する
• [13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)
• [13-2] サイトの背景に画像を表示しよう（CSS使用）
• [13-1] サイトの背景に色をつけてみよう（CSS使用）
• [12-2] なんでHTMLとCSSはセットなの？
• [12-1] CSSを外部ファイルにしよう
• [11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用）
• [11-5] 画像にリンクを貼ろう
• [11-4] 別のページの特定の箇所にリンクしよう
• [11-3] 同じページ内でリンクしよう
• [11-2] リンクの文字の色を変えよう（CSS使用）
• [11-1] 他のページにリンクしよう