数年後のWEB標準標準

数年後の
WEB標準

年々変化しているHTML・CSSが
現在どうなっているのか
これからどうなっていくのか

Wanir @ Yamagata
sato165@delab http://de-lab.com

自己紹介

佐藤裕子 ( sato165 )

 WEBデザイン＋コーディング
(X)HTML+CSS , Javascript

 WEBシステム構築
PHP×Mysql

Cakephp | CMS ( MT4 , wordpress , Drupal …)

 SEO
 動的サイトのSEO , SEO内部コーディング

 開発環境
 Eclipse | Dreamweaver

 Ubuntu8.04 ( VPS & 自宅サーバー )

sato165 @ 検索エンジンを有効利用するWEBサイト構築

HTMLと XHTML


HTML と XHTML

HTML と XHTML の移り変わり
Befour 2000年 – HTML 4
– 1997年にHTML3.2が勧告。その後HTML4.0へ。

テーブルレイアウトが主流の時代。
–

インターネットを広く普及させることが目的だった為、厳格な規格が無かった。
–

After 2000年 - XHTMLへ
XHTML=XMLを元に作られた。
–

データのやりとりに適している構造。
–

BLOG大流行→「WEB標準」
–

W3CがWEB標準化の為XHTMLへの変更を推奨
–

これからはXHTML！！
–

sato165 @ 数年後のWEB標準

HTML と XHTML

現在はどうなってるの？
2002年 HTML5がW3Cで承認
なぜか止まっていたHTML5の策定が決定
–

HTML5とXHTML2.0の規定が独自化。
–

HTML5普及とブラウザ対応が急速に進む！
–

これからのWEB標準標準となるのはHTML５かも！ ←イマココ

HTML5とXHTML2の独自化・細分化
HTML5 ウェブアプリケーション構築とページ

XHTML2 ドキュメント記述と文書レンダリング


HTML と XHTML

HTML5 がいい感じになってる！
セレクタが視覚的にわかりやすくなった！
<header> - ヘッダ
–

<article> - 単一の記事
–

<nav> - ナビゲーション
–

<footer> - フッタ
–

セマンティック化
※セマンティック何を意味するかを表す情報(メタデータ)を一定の規則に従って付加すること

<aside> - 注記サイドバー引用コメント他、話の流れから外れたもの
–

<video><audio> - 埋め込みメディア
–

<time> - 時間を表す datatime属性を付加
–


HTML5でコード書いてみた



HTML5のHTMLのブラウザ対応
対応ブラウザ
Safariがいち早くHTML5対応を発表！

safari 4のページはHTML5
Firefox ※Firefox2？
–

Opera
–

Safari
–

Google Chrome
–



IEでの対応
Javascript

Jacascript無効の場合
Simon Pieters氏
DOMツリーを確認しつつ、HTML5の新要素以外の要素でスタイリングする。
•
ユニバーサルセレクタ（*）を活用して、目的の要素を絞り込む。
•
noscript要素を利用する。
•


CSS Variables


CSS Variables

CSSで変数を使う
コンポーネントCSSがブラウザ対応

@variables {
corporateColor: #39873d;
}
strong {
background-color: var(corporateColor);
}
h2 {
color: var(corporateColor);
background-color: var(corporateColor);
}


CSS Variables

WebkitがCSS Variablesを実装
Webkitを使ってる主要なWEBブラウザ
Safari
–

Google Chrome
–

Lunascape
–

Webkitを使っているソフトウエア
iPhone
–

Android
–

iTune
–

Dreamweaver
–

AIR
–


Thanks xxx

Sato165 http://de-lab.com

数年後のWEB標準標準

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

数年後のWEB標準標準