Soumettre la recherche
Mettre en ligne
HTML5, きちんと。
•
315 j'aime
•
490,381 vues
M
Masataka Yakura
Suivre
HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 2009年のCSS Nite vol. 40で話したときのスライドです。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 174
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
WPSCanによるWordPressの脆弱性スキャン
WPSCanによるWordPressの脆弱性スキャン
OWASP Nagoya
Ormとの付き合い方
Ormとの付き合い方
豊明 尾古
Memcachedの仕組みと設定
Memcachedの仕組みと設定
Tatsuya Akashi
인프런 - 스타트업 인프랩 시작 사례
인프런 - 스타트업 인프랩 시작 사례
Hyung Lee
MySQLアンチパターン
MySQLアンチパターン
yoku0825
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
shinjiigarashi
Recommandé
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
WPSCanによるWordPressの脆弱性スキャン
WPSCanによるWordPressの脆弱性スキャン
OWASP Nagoya
Ormとの付き合い方
Ormとの付き合い方
豊明 尾古
Memcachedの仕組みと設定
Memcachedの仕組みと設定
Tatsuya Akashi
인프런 - 스타트업 인프랩 시작 사례
인프런 - 스타트업 인프랩 시작 사례
Hyung Lee
MySQLアンチパターン
MySQLアンチパターン
yoku0825
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
shinjiigarashi
普通のRailsアプリをdockerで本番運用する知見
普通のRailsアプリをdockerで本番運用する知見
zaru sakuraba
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
SQLアンチパターン - ナイーブツリー
SQLアンチパターン - ナイーブツリー
ke-m kamekoopa
片手間MySQLチューニング戦略
片手間MySQLチューニング戦略
yoku0825
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
徳丸本に載っていないWebアプリケーションセキュリティ
徳丸本に載っていないWebアプリケーションセキュリティ
Hiroshi Tokumaru
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
Tetsutaro Watanabe
Azure AD DSドメインに仮想マシンを参加させる (トレノケ雲の会 mod1)
Azure AD DSドメインに仮想マシンを参加させる (トレノケ雲の会 mod1)
Trainocate Japan, Ltd.
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
晃 遠山
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Takuto Wada
Docker道場オンライン#1 Docker基礎概念と用語の理解
Docker道場オンライン#1 Docker基礎概念と用語の理解
Masahito Zembutsu
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Toshiaki Maki
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
いろいろ考えると日本語の全文検索もMySQLがいいね!
いろいろ考えると日本語の全文検索もMySQLがいいね!
Kouhei Sutou
개발자를 위한 (블로그) 글쓰기 intro
개발자를 위한 (블로그) 글쓰기 intro
Seongyun Byeon
Fluentd, Digdag, Embulkを用いたデータ分析基盤の始め方
Fluentd, Digdag, Embulkを用いたデータ分析基盤の始め方
Kentaro Yoshida
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
Shota Shinogi
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
Contenu connexe
Tendances
普通のRailsアプリをdockerで本番運用する知見
普通のRailsアプリをdockerで本番運用する知見
zaru sakuraba
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
SQLアンチパターン - ナイーブツリー
SQLアンチパターン - ナイーブツリー
ke-m kamekoopa
片手間MySQLチューニング戦略
片手間MySQLチューニング戦略
yoku0825
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
徳丸本に載っていないWebアプリケーションセキュリティ
徳丸本に載っていないWebアプリケーションセキュリティ
Hiroshi Tokumaru
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
Tetsutaro Watanabe
Azure AD DSドメインに仮想マシンを参加させる (トレノケ雲の会 mod1)
Azure AD DSドメインに仮想マシンを参加させる (トレノケ雲の会 mod1)
Trainocate Japan, Ltd.
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
晃 遠山
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Takuto Wada
Docker道場オンライン#1 Docker基礎概念と用語の理解
Docker道場オンライン#1 Docker基礎概念と用語の理解
Masahito Zembutsu
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Toshiaki Maki
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
いろいろ考えると日本語の全文検索もMySQLがいいね!
いろいろ考えると日本語の全文検索もMySQLがいいね!
Kouhei Sutou
개발자를 위한 (블로그) 글쓰기 intro
개발자를 위한 (블로그) 글쓰기 intro
Seongyun Byeon
Fluentd, Digdag, Embulkを用いたデータ分析基盤の始め方
Fluentd, Digdag, Embulkを用いたデータ分析基盤の始め方
Kentaro Yoshida
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
Shota Shinogi
Tendances
(20)
普通のRailsアプリをdockerで本番運用する知見
普通のRailsアプリをdockerで本番運用する知見
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
SQLアンチパターン - ナイーブツリー
SQLアンチパターン - ナイーブツリー
片手間MySQLチューニング戦略
片手間MySQLチューニング戦略
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
徳丸本に載っていないWebアプリケーションセキュリティ
徳丸本に載っていないWebアプリケーションセキュリティ
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
Azure AD DSドメインに仮想マシンを参加させる (トレノケ雲の会 mod1)
Azure AD DSドメインに仮想マシンを参加させる (トレノケ雲の会 mod1)
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Docker道場オンライン#1 Docker基礎概念と用語の理解
Docker道場オンライン#1 Docker基礎概念と用語の理解
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
Redisの特徴と活用方法について
Redisの特徴と活用方法について
いろいろ考えると日本語の全文検索もMySQLがいいね!
いろいろ考えると日本語の全文検索もMySQLがいいね!
개발자를 위한 (블로그) 글쓰기 intro
개발자를 위한 (블로그) 글쓰기 intro
Fluentd, Digdag, Embulkを用いたデータ分析基盤の始め方
Fluentd, Digdag, Embulkを用いたデータ分析基盤の始め方
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
En vedette
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
HTML5 入門
HTML5 入門
NOAN
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
Shinji Semba
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
Sass 超入門
Sass 超入門
Michinari Odajima
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
清水 正行
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
En vedette
(18)
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5 入門
HTML5 入門
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Sass 超入門
Sass 超入門
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
色彩センスのいらない配色講座
色彩センスのいらない配色講座
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
Similaire à HTML5, きちんと。
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Relations Team
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
Shuyo Nakatani
HTML5 in Firefox4
HTML5 in Firefox4
dynamis
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML5 for IA
HTML5 for IA
Atsushi HASEGAWA, Ph.D.
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
CSS Design and Programming
CSS Design and Programming
Taku AMANO
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
Similaire à HTML5, きちんと。
(20)
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
GDG Women DevfestW
GDG Women DevfestW
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
HTML5 in Firefox4
HTML5 in Firefox4
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
HTML5 for IA
HTML5 for IA
Webapp startup example_to_dolist
Webapp startup example_to_dolist
CSS Design and Programming
CSS Design and Programming
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
scala+liftで遊ぼう
scala+liftで遊ぼう
マークアップ講座 01b HTML
マークアップ講座 01b HTML
Dernier
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Dernier
(8)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
HTML5, きちんと。
1.
HTML5, きちんと。 masataka yakura
2.
こんばんは。 矢倉といいます。
3.
http://www.mitsue.co.jp/
4.
Web 標準 Blog http://standards.mitsue.co.jp/
5.
Opera Web標準カリキュラム http://dev.opera.com/articles/view/801
6.
Web Designing 2009年11月号 (10月17日発売)
7.
「HTML5 & CSS3
で Web は変わるのか?」
8.
監修しました → (11月21日発売)
9.
「プロクリエイターの作例に学ぶ XHTML+CSS 達人テクニック」
10.
本日のテーマ:HTML5
11.
まだまだ情報が少ない。
12.
背景や目的についても ある程度は知ってて欲しい。
13.
HTML5とは?
HTML5のセクション XHTMLはどうなる? 勧告はいつごろ? もうひとつの目的 どう使っていくか HTML5の新機能
14.
HTML5 とは?
15.
「Web プラットフォーム」 その中核をなす仕様。
16.
HTML4 や XHTML1
は 「文書」の作成が目的だった。
17.
HTML5 では新たに 「アプリケーション」が加わる。
18.
これまでのあゆみ
19.
1998 年 2
月 XML 1.0 が勧告。
20.
W3C は XML
への移行を計画。
21.
HTML は段階を経て XML に移行するプランに。
22.
XHTML 1.0 ―
HTML4 を XML 化 XHTML 1.1 ― 機能を細分化 XHTML 2.0 ― 新しく作り直し
23.
2002 年~ ブログが普及しだす。
24.
「XHTML+CSS」が広まる。
25.
ほとんどが text/html XMLとして使われなかった。
26.
27.
Web アプリが台頭し 今の HTML
では機能不足に。
28.
新しい機能の実現に XML の普及を待つ必要がある?
29.
2004 年 6
月 W3C のワークショップにて
30.
ベンダー「HTML の拡張を!」
31.
W3C「うちではやりませんが
お好きにどうぞ。」
32.
Apple, Mozilla, Opera WHATWG
を立ち上げる。
33.
ベンダーによって HTML の拡張が始められた。
34.
ベンダーが関わった仕様は 開発者から評価を得ていく。
35.
2006 年 10
月 Tim Berners-Lee のブログにて
36.
It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML […] all at once didn’t work. ― Tim Berners‐Lee: “Reinventing HTML”
37.
「XML への移行は いっせいには進まなかった。」
38.
2007 年 3
月 新 HTML WG 設立。
39.
WHATWG と協力して HTML5 の策定をスタート。
40.
2009 年 5
月 Google I/O で大プッシュ。
41.
少しずつ実装も進んでいる。
42.
XHTML はどうなる?
43.
XHTML2 WG が 2009
年末で活動終了と発表。
44.
XHTML 2.0 は終了。 でも、XHTML
はなくならない。
45.
HTML5 は XML
として 扱うことも可能(XHTML5)
46.
HTML5 の HTML
構文でも 「XMLっぽく」書けるように。
47.
<img>
← 今までの HTML <img /> ← こっちも OK に! ※ 混在もできます。
48.
というわけで、ご心配なく。
49.
Misunderstanding Markup http://standards.mitsue.co.jp/resources/mm_comic/
50.
もうひとつの目的
51.
「機能の拡張」もあるけれど 「互換性」も重要なテーマ。
52.
1. ブラウザーの互換性
53.
54.
Web アプリの開発には JavaScript や
DOM が不可欠。
55.
56.
クロスブラウザー対応は厄介。 互換性に問題がある。
57.
非互換を生む 2 つの「ない」
58.
実装 がない。 → 対応状況が異なる
59.
仕様 がない。 → 実装に違いが生まれる
60.
実装はベンダー依存だが 仕様は定義して対応できる。
61.
HTML5 では 詳細な処理規則を定義。
62.
2. 既存の実装との互換性
63.
今のブラウザーやサイトとも 互換性をある程度は保つ。
64.
大きな変更はできないが 今の環境を捨てずに済む。
65.
互換性を持つことで Webを段階的に進化させられる。
66.
HTML5 の新機能
67.
APIの追加や マークアップの拡張など。
68.
<canvas>
69.
スクリプトから画像を扱う。 応用はさまざま。
70.
Bespin https://bespin.mozilla.com/
71.
<canvas> で作られたエディタ。
72.
73.
Chrome Experiments http://www.chromeexperiments.com/
74.
最新技術のショーケース。
75.
76.
<video> & <audio>
77.
<img> みたく、簡単に 動画・音声を扱えるように。
78.
<video src=“intro_html5.vid”>
<a …> ダウンロード </a> </video>
79.
80.
プラグインじゃないので CSS や SVG
と組み合わせが可能。
81.
マークアップ
82.
マークアップにも 数多くの拡張や変更が。
83.
<canvas> <audio> <video>
<header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...
84.
よく使われる class/id を 要素として採用する。
85.
<div id=“header”> → <header> <div
class=“section”> → <section>
86.
定型句はよりシンプルに。
87.
<!DOCTYPE html>
88.
<meta charset=“UTF-8”>
89.
古いブラウザーでも機能する。
90.
フォームの拡張も。
91.
<input type=text ...> <input
type=password ...>
92.
<input
type=email ...> <input type=range ...> <input type=color ...> <input type=datetime ...> ...
93.
名
前 (必須): メール (必須):
94.
<input type=“text” ...
required> <input type=“email” ... required>
95.
サイト内検索:
キーワードを入力
96.
<input type=“search”
placeholder=“キーワードを入力”>
97.
HTML5 のセクション
98.
文書構造をより明示的に表せる。
99.
<section> 章や節などの、ひとまとまり
100.
<section> <h3> section
要素 </h3> <p> 章や節などを表す。</p> ... </section> <section> <h3> nav 要素 </h3> <p> 主要なナビゲーションを表す。</p> ... </section>
101.
<section> <h3> article
要素 </h3> <p> 自己完結するセクションを表す。</p> <section> <h4> サンプル </h4> ... </section> </section>
102.
<nav> 主要なナビゲーション
103.
<nav class=“global”> <ul>
<li> <a ...> ホーム </a> <li> <a ...> お知らせ </a> <li> <a ...> HTML5 Niteって? </a> <li> <a ...> これまでのNite </a> <li> <a ...> お問い合わせ </a> </ul> </nav>
104.
UA が <nav>
を利用することで アクセシビリティも高まる?
105.
<article> 記事など、自己完結するセクション
106.
<article class=“entry” id=“vol40”>
<h2> CSS Nite in Ginza, Vol. 40 </h2> <p> 4周年記念となるVol.40では… </p> <section> <h3> 事前登録について </h3> ... </section> ... </article>
107.
フィードの <item> や <entry>
などをイメージ。
108.
<aside> 補足的な情報や、サイドバー
109.
<section> <h2> nav
要素 </h2> <p> 主要なナビゲーションを表します。 </p> <aside> <p> 海外では「navi」よりも 「nav」の方が多いみたいです。</p> </aside> </section>
110.
<header> ... </header> <div
class=wrap> <div class=main> ... </div> <aside class=sidebar> ... </aside> </div> <footer> ... </footer>
111.
セクションと見出しから アウトラインができる。
112.
<article>
<h1> HTML5 のセクション </h1> <nav> ... </nav> ... <section> <h2> nav 要素 </h2> ... <aside> <h3>「navi」ではなく「nav」</h3> ... </aside> ... </section> ...
113.
HTML5 のセクション (見出しなしの目次)
section 要素 nav 要素 「navi」ではなく「nav」 article 要素 aside 要素
114.
見出しだけでも アウトラインはできる。
115.
<h1> HTML5 のセクション
</h1> <h2> section 要素 </h2> <h2> nav 要素 </h2> <h3>「navi」ではなく「nav」</h3> <h2> article 要素 </h2> ...
116.
HTML5 のセクション section
要素 nav 要素 「navi」ではなく「nav」 article 要素 aside 要素
117.
注意!
118.
使い方を間違えると アウトラインが壊れてしまう。
119.
特に <section> は気をつけて。
120.
<article class=“entry”> <header>
<h2> タイトル </h2> </header> <section class=“body”> <p> 本文 </p> <p> テキストテキスト </p> </section> <footer> ... </footer> </article>
121.
<header id=logo> <section>
<h1> <img src=logo ...> </h1> </section> </header>
122.
<section id=wrapper> <section
id=main> <article> <section> <header> ... </header> ... </section> </article> </section> ... </section>
123.
セクションは意味的なもの。 アウトラインを意識して。
124.
レイアウト目的なら <div> で。
125.
勧告はいつごろ?
126.
127.
「2010 年 9
月」とある。 でも、むりです。
128.
「勧告」とは?
129.
仕様がすべて実装され すぐに使える状態。
130.
実装が終わるのは?
131.
「2022 年」と……
132.
「使えないじゃん!」
133.
そんなことはないです。
134.
たとえば、CSS 2.1 は まだ「勧告候補」です。
135.
勧告されていませんが 広く使われてます。
136.
実装されている機能から 使っていけばいい。
137.
実装の本格的なスタートは 「勧告候補」になった時。
138.
2012 年あたりになる?
139.
実装状況を知るには?
140.
1. 開発者向けサイト
141.
Mozilla Developer Center https://developer.mozilla.org/ja
142.
Safari Dev Center http://developer.apple.com/safari/
143.
2. 仕様書のステータス表示
144.
145.
146.
どう使っていくか
147.
「実装されてる機能から使え」 とは言ったものの……
148.
149.
150.
対応しないブラウザーは どう対処すればよいのか?
151.
1. JavaScript で対処
152.
ExplorerCanvas http://excanvas.sourceforge.net/
153.
IE に <canvas>
を。
154.
Modernizr http://www.modernizr.com/
155.
対応状況をチェックする。 classもつけてくれたりする。
156.
2. 対応度合いにあわせて利用
157.
最低限なものは、全ての環境で。 できる子には、高機能なものを。
158.
Progressive Enhancement って言われてるやつです。
159.
placeholder 属性 無くても不都合はない。
160.
難しいことは確か。
161.
HTML5 や CSS3
は 勧告までとても時間がかかる。
162.
今までと異なる考え方で 取り組んでいく必要がある。
163.
今は何をすれば?
164.
実装も出てきたけれど 仕様はまだまだ策定中。
165.
「<article> と <section>
を 区別する必要はあるのか。」
166.
「<section> の誤用が多い。 いっそのこと削除しては?」
167.
仕様がドラスティックに 変更される可能性も……
168.
使う際には、リスクの認識を。
169.
おわりに
170.
「情報が少ない」といいました。
171.
みんなが使っていく仕様 情報はみんなで共有したい。
172.
調べたことをまとめて 情報を増やしていって欲しい。
173.
ありがとうございました。
174.
Contact: yakura-masataka@mitsue.co.jp
Télécharger maintenant