HTML5とCSS3の決定的な違いって？？

質問

色々拝見して自分なりに調べてみたのですが、いまいちHTML5とCSS3の存在の理解に苦しみます。

決定的なHTML4とCSS2からの違いなどがあるのでしょうか？
また、HTML5とCSS3を知らないと致命的な困りごとなどが今後発生しますでしょうか。

お詳しい方いらっしゃいましたら、HTML5とCSS3、それぞれについて分かりやすく教えて頂けたらと思います。

よろしくお願いします。

回答No.3

Chaire · ベストアンサー

補足。『致命的な困りごと』というわけではありませんが、

No.2 に HTML5 は『ブラウザ内でいろんな作業ができることを目標』にしている、と書きました。それゆえ、構文ミスのある「壊れた HTML」でも、HTML5 ブラウザなら共通のエラー訂正をしてくれます。

構文ミスに寛容な代わり、「意味」の間違いには異様に厳しくなっています。例えば、HTML5 においてテーブルレイアウトは認められません。それは表をレイアウトに転用する「意味」の間違いだからです。また、HTML5 ブラウザは見出し要素 h1、h2、……を拾って自動的にアウトライン（目次）を生成しますので、h1、h2 を「文字の大きさを変えるもの」と間違って覚えていた人は、痛い目を見るかもしれません。

これは、構文ミスに厳しい代わり「意味」には比較的寛容であった XHTML とは対照的です。そして「意味」の間違いは、機械的にはなかなか判別できない上に、検索結果などにモロに反映される可能性があります。

今後 HTML5 ブラウザが普及すると、例え HTML 4.0 で書いたページでも HTML5 の「意味」論で解釈されることになるでしょう。ですから、HTML5 の要素リストを眺めて「意味」を確認しておくのは悪いことではないと思います。

例えば、HTML5 において i 要素は「斜体」ではありません。書籍で斜体で書かれるような「学名」あるいは「特別なニュアンスで使っている語句」を表します。さて、ページ全体が「学名」になっている人はいませんか？

※img 要素の alt 属性の使い方も細かく記述されていますが、これまで画像が表示されない場合のことをちゃんと考慮してきた人にとっては、ごく普通のことしか書かれていません。
※セクション構造に関しては、マトモな説明および例をほとんど見たことがないので、現段階では使わなくて結構です。その代わり、見出しを適切に使って下さい。

---
CSS3 に関して、今後重要なのはメディアクエリです（これを CSS3 に含めるかはアレですが一応）。No.2 に『色を必要としない機器』云々と書きましたが、それを判別するにはメディアクエリを用いて @media not (color) { ... } とします。このスタイル規則は、色を出力しないメディアでのみ適用されます。

次の外部 CSS は 800px 以上のウィンドウサイズを持つスクリーン系メディアにのみ適用されます。
<link rel="stylesheet" media="screen and (min-width: 800px)" href="big.css" />

次の外部 CSS は、iPhone などの向きを変えたとき自動的に切り替わります。
<link rel="stylesheet" media="(orientation: portrait)" href="tatemuki.css" />
<link rel="stylesheet" media="(orientation: landscape)" href="yokomuki.css" />

---
そういうわけで、HTML5 の要素の意味を確認することと、メディアクエリを覚えること、個人的にこの 2 つは強くお勧めします。

回答No.4

88suzuran88

簡単にいえば、
要素と機能の追加です。

HTMLはただの文字列に意味を持たせる物。
CSSは見た目を良くするもの。(デザインするもの。)

今までのHTMLとCSSは完全に、こういうふうに分離することが出来ませんでしたが、
HTMLの要素の調節や、CSSの機能アップによって、
HTMLでデザインを気にせず作り、
CSSのみでデザインをすることが、
出来るものに近づいてます。

本来の、HTML、CSSの使い方として使えるように、
進化してきてるということです。

例えば、背景画像を複数使いたい場合に、
今まではdivなどを幾つも使わなければいけなかったのが、
CSS3で1つの要素に複数の背景が設定できるようになり、
HTML5では、無駄なdivの階層を無くすことが出来ます。

ソースもすっきりして、
視覚ブラウザ以外の音声ブラウザなどで、内容を認識しやすくなったり、
googleロボットなども読みやすくなり、SEOにも、少しはプラスになってると思います。

まだまだ不十分なので、
まだバージョンが上がる可能性が有ります。

回答No.2

Chaire

HTML 4.0 の主眼は、国際化およびスタイルシートの分離でした。

データの適切な「見せ方」は、巨大なスクリーンモニタか、モバイル機器の小さな画面か、紙面に印刷するかなど、出力メディアに応じて変わります。そのために、データそのものを記述する HTML と、データをメディアに応じた形で出力するためのスタイルシートが、別々である必要がありました。

巷の入門なんかだと、スタイルシートの制作者側のメリット・デメリットばかり強調されがちです。しかし、スタイルシートの恩恵を真に享受できるのは、利用者側なのです。そして、制作者もまた利用者の一人です。

---
HTML5 は、HTML 4.0 とはやや別の方向性にあります。

ブラウザ開発者としては、昔から「ブラウザ内で何でもできる」というのを一つの目標にしてきた節があります。ブラウザ内でアプリケーションを動かすことができれば、利用者はパッケージ製品を購入して自分のパソコンにインストールする必要もなく、必要なサービスを必要なだけ享受できます。

大雑把にまとめると、HTML 4.0 はどんなメディアにでも適切に情報伝達できることを目標にしているのに対し、HTML5 はメディアをブラウザに限定しつつ、ブラウザ内でいろんな作業ができることを目標にしています。

---
ところで、HTML 4.0（1997 年）の改訂版である HTML 4.01（1999 年）が出てすぐ、XHTML 1.0 が勧告されています。そして、来たる XHTML 2.0 では「メディアに依存しない Web アプリケーション記述」という、上記 2 つの流れを統合したものになる、はずでした。

しかし、XHTML 2.0 は従来の HTML とはかなり異なるものになるため、互換性を捨てられないブラウザ開発者に徐々に見捨てられ、XHTML 2.0 草案自体も二転三転した挙げ句に策定中止になってしまいました。これらのブラウザ開発者が集まって、従来の HTML を再利用しつつ Web アプリケーションを書けるようにしたい、というのが現在の HTML5 の提案につながります。

なお、HTML5 にも XHTML 構文（XHTML5）がありますので、「XHTML が終わった」というのはよくある誤解です。終わったのは XHTML 2.0 です。XHTML は XML であり、XML 関連ツールを適用できます。最近のプログラミング言語なら標準で XML ライブラリを持っていますので、プログラミングできるなら XHTML の方が弄りやすくはあります。

---
CSS は、バージョンではなくレベルで勧告されています。CSS Level 2 は、CSS Level 1 のバージョンアップ、というわけではありません。CSS を組み込む機器は、その機器が必要とするレベルの CSS を実装すれば良いだけです（とは言え、現在 CSS1 と CSS2 はメンテナンスが終了しており、CSS 2.1 を用いることが推奨されています）。

CSS Level 3 はさらに徹底され、モジュール化されています。色を必要としない機器は Color モジュールを実装する必要がありません。まあ、当然です。

ですから、一口に「CSS3」と言っても、どのモジュールの組み合わせかによって違いますし、それらを統合する何かは（今のところ）ありません。単に、いくつかのブラウザが適当に「つまみ食い」して実装している、というのが実情です。

CSS 2.1 までの範囲では表現しにくいものも多々ありますので、やがては部分的に CSS3 モジュールに置き換わっていくでしょう。必要を感じなければ、あせることもありません。

---
そういうわけで、「HTML4 + CSS2」「HTML5 + CSS3」なんて対立項を煽るのは、ただの滑稽話に過ぎません。HTML4 でも CSS3 は適用できますし、HTML5 で CSS2 を使うことも、HTML5 を使わないことも自由です。方向性が違うのですから、自分に合った方向のものを選べば良いだけです。

回答No.1

naokita

サル → 原人 → 人間 のような進化と思えば良いでしょう。

(X)HTMLとCSS2を知っていての前提ですが、
HTML5とCSS3を勉強すれば全て分かります（自分も勉強中）

数年間は、(X)HTMLとCSS2で全く問題ありません。
今は、HTML5とCSS3で描いた方が困るでしょう・・・
とはいえ、10年前はCSS自体が同じ状況だったのです。

将来的には、優れた表現が出来るようになると思えば良いです。
「CSS3 ドラえもん」
で検索すると納得できるかも。

HTML5の簡単な違いとかは、
http://www.slideshare.net/myakura/html5-2480964