[12-2] なんでHTMLとCSSはセットなの?

最終更新日:2017年09月21日  (初回投稿日:2011年04月07日)

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

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

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

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

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

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

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

正しくないtableの使い方

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

ただ、table関連の要素は、その名のとおり本来「表組」を構成するためのもの。
これを無理やりレイアウトに使うのですから、当時でもかなり違和感はありました。
tableタグのせいで、HTMLがめっちゃ長く、複雑怪奇になるし。tableの意味なんてまったく無いし。(<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に従って文書を記述という2つの過程により文書を記述したが、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 がそれぞれリリース。
関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.