Enviar pesquisa
Carregar
今からハジメるHTML5マークアップ
•
75 gostaram
•
46,702 visualizações
SwapSkills
Seguir
SwapSkills2010 vol2 羽田野太巳
Leia menos
Leia mais
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 64
Baixar agora
Baixar para ler offline
Recomendados
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
Recomendados
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
HTML5 入門
HTML5 入門
NOAN
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
Mais conteúdo relacionado
Mais procurados
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
HTML5 入門
HTML5 入門
NOAN
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
Mais procurados
(20)
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
HTML5 入門
HTML5 入門
GDG Women DevfestW
GDG Women DevfestW
マークアップ講座 01b HTML
マークアップ講座 01b HTML
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
HTML5開発最前線
HTML5開発最前線
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
WordPressプラグイン作成入門
WordPressプラグイン作成入門
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
壊れやすいCSS
壊れやすいCSS
CSS の歩き方
CSS の歩き方
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
WordPress を使いこなそう
WordPress を使いこなそう
Semelhante a 今からハジメるHTML5マークアップ
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
Shuyo Nakatani
大雑把なHtmlの説明
大雑把なHtmlの説明
tanaka-hiroki
京都 IT講座 9月
京都 IT講座 9月
annulus
Htmlの基本
Htmlの基本
SD Labo
Htmlの基礎
Htmlの基礎
SD Labo
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
Wp html5
Wp html5
regret raym
CSS Design and Programming
CSS Design and Programming
Taku AMANO
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
京都IT研修講座
京都IT研修講座
annulus
IT研修講座
IT研修講座
annulus
it研修講座
it研修講座
annulus
It01
It01
chibicoo
itkensyukouza2008
itkensyukouza2008
annulus
kyoto IT
kyoto IT
annulus
京都 IT研修講座
京都 IT研修講座
annulus
Semelhante a 今からハジメるHTML5マークアップ
(20)
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
大雑把なHtmlの説明
大雑把なHtmlの説明
京都 IT講座 9月
京都 IT講座 9月
Htmlの基本
Htmlの基本
Htmlの基礎
Htmlの基礎
Oktopartial Introduction
Oktopartial Introduction
Wp html5
Wp html5
CSS Design and Programming
CSS Design and Programming
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
京都IT研修講座
京都IT研修講座
IT研修講座
IT研修講座
it研修講座
it研修講座
It01
It01
itkensyukouza2008
itkensyukouza2008
kyoto IT
kyoto IT
京都 IT研修講座
京都 IT研修講座
Mais de SwapSkills
セマンティック検索 20100731
セマンティック検索 20100731
SwapSkills
Talk microdata
Talk microdata
SwapSkills
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
ゲーム作成で学ぶ iPhoneアプリケーション超入門
ゲーム作成で学ぶ iPhoneアプリケーション超入門
SwapSkills
SwapSkillsFree|jQueryMobile [基礎編]
SwapSkillsFree|jQueryMobile [基礎編]
SwapSkills
HTML5 & Web Platform
HTML5 & Web Platform
SwapSkills
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
SwapSkills
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
SwapSkills
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
SwapSkills
『はじめてのXSLT 』小林 信次
『はじめてのXSLT 』小林 信次
SwapSkills
Swapskills Print Css
Swapskills Print Css
SwapSkills
Swap Skills I Phone
Swap Skills I Phone
SwapSkills
Mais de SwapSkills
(12)
セマンティック検索 20100731
セマンティック検索 20100731
Talk microdata
Talk microdata
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
ゲーム作成で学ぶ iPhoneアプリケーション超入門
ゲーム作成で学ぶ iPhoneアプリケーション超入門
SwapSkillsFree|jQueryMobile [基礎編]
SwapSkillsFree|jQueryMobile [基礎編]
HTML5 & Web Platform
HTML5 & Web Platform
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
『はじめてのXSLT 』小林 信次
『はじめてのXSLT 』小林 信次
Swapskills Print Css
Swapskills Print Css
Swap Skills I Phone
Swap Skills I Phone
Último
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
inspirehighstaff03
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
inspirehighstaff03
My Inspire High Award 2024 「正義って存在するの?」
My Inspire High Award 2024 「正義って存在するの?」
inspirehighstaff03
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
inspirehighstaff03
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」
inspirehighstaff03
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
inspirehighstaff03
リアル戦国探究in米沢 事前講座2スライド(スタッフ共有用)『両雄の強さの秘密』についてのスライド
リアル戦国探究in米沢 事前講座2スライド(スタッフ共有用)『両雄の強さの秘密』についてのスライド
Ken Fukui
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
ssusere0a682
My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」
inspirehighstaff03
リアル戦国探究in米沢 当日講座1(スタッフ共有用)『兵は詐をもって立つ』についてのスライド
リアル戦国探究in米沢 当日講座1(スタッフ共有用)『兵は詐をもって立つ』についてのスライド
Ken Fukui
リアル戦国探究in米沢 当日講座2スライド(スタッフ共有用)『人を致すも人に致されず』についてのスライド
リアル戦国探究in米沢 当日講座2スライド(スタッフ共有用)『人を致すも人に致されず』についてのスライド
Ken Fukui
My Inspire High Award 2024 「家族とは何か」
My Inspire High Award 2024 「家族とは何か」
inspirehighstaff03
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
inspirehighstaff03
My Inspire High Award 2024 「孤独は敵なのか?」
My Inspire High Award 2024 「孤独は敵なのか?」
inspirehighstaff03
My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」
inspirehighstaff03
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
inspirehighstaff03
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
oganekyokoi
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
inspirehighstaff03
What I did before opening my business..pdf
What I did before opening my business..pdf
oganekyokoi
リアル戦国探究in米沢 当日講座3スライド(スタッフ共有用)『糧は三度はさいせず』についてのスライド
リアル戦国探究in米沢 当日講座3スライド(スタッフ共有用)『糧は三度はさいせず』についてのスライド
Ken Fukui
Último
(20)
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award 2024 「正義って存在するの?」
My Inspire High Award 2024 「正義って存在するの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
リアル戦国探究in米沢 事前講座2スライド(スタッフ共有用)『両雄の強さの秘密』についてのスライド
リアル戦国探究in米沢 事前講座2スライド(スタッフ共有用)『両雄の強さの秘密』についてのスライド
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」
リアル戦国探究in米沢 当日講座1(スタッフ共有用)『兵は詐をもって立つ』についてのスライド
リアル戦国探究in米沢 当日講座1(スタッフ共有用)『兵は詐をもって立つ』についてのスライド
リアル戦国探究in米沢 当日講座2スライド(スタッフ共有用)『人を致すも人に致されず』についてのスライド
リアル戦国探究in米沢 当日講座2スライド(スタッフ共有用)『人を致すも人に致されず』についてのスライド
My Inspire High Award 2024 「家族とは何か」
My Inspire High Award 2024 「家族とは何か」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024 「孤独は敵なのか?」
My Inspire High Award 2024 「孤独は敵なのか?」
My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
What I did before opening my business..pdf
What I did before opening my business..pdf
リアル戦国探究in米沢 当日講座3スライド(スタッフ共有用)『糧は三度はさいせず』についてのスライド
リアル戦国探究in米沢 当日講座3スライド(スタッフ共有用)『糧は三度はさいせず』についてのスライド
今からハジメるHTML5マークアップ
1.
有限会社futomi 代表取締役 羽田野 太巳(はたの
ふとみ) http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi
2.
http://www.html5.jp/
3.
http://www.amazon.co.jp/gp/product/4798025291/
4.
HTML5のマークアップの基礎 IE対応とスタイリング セクションとアウトライン 旧来の要素を見直す ワークショップ
5.
6.
<!DOCTYPE html> 標準モードでのレンダリング 整形式XML XHTML5での利用も想定 短くて覚えやすい
7.
HTML5推奨 <meta charset="UTF-8"
/> 下位互換もOK <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
8.
ファイルの先頭から512バイト以内。 よほど大きな理由がない限り"UTF-8" "Shift_JIS"や"EUC-JP"は非推奨 "UTF-32"も非推奨 charsetコンテンツ属性を持ったmeta要素 は1つだけ
9.
HTML5はXHTML的なマークアップもOK <input type="radio" checked> ○ <input type="radio" checked="checked" /> ○ XHTML的に書いても、Content-Type が text/html である以上、XHTMLではなく、 HTML
10.
<!DOCTYPE html> <html lang="ja"> <head> <meta
charset="UTF-8" /> <title>タイトル</title> </head> <body> <!-- コンテンツ --> </body> </html>
11.
インライン・ブロックという分類は廃止 プレゼンテーショナルな分類を排除 文書構造を表す意味(セマンティクス) に基づいた分類に 新たにコンテンツ・モデルと呼ばれる分 類を定義 要素の中に入れても良いコンテンツを、 コンテンツ・モデルを使って定義
12.
13.
The W3C Markup Validation Service http://validator.w3.org/ Validator.nu http://html5.validator.nu/
14.
http://validator.w3.org/
15.
http://html5.validator.nu/
16.
17.
DOMツリーが期待通りに構成されない 未知の要素はCSSが効かない
18.
<header> <hgroup>
<h1>HTML5.JP</h1> <h2>次世代 標準 HTML5 情報サイト</h2> </hgoup> </header>
19.
本来のDOM
IEのDOM header header └ hgroup hgroup ├ h1 h1 └h2 h2 /hgroup /header
20.
JavaScriptによるハック document.createElement("要素名"); これだけで解決 appendChild()は不要
21.
ie.js (function () {
var els = [ 'section', 'article', 'hgroup', 'header', 'footer', 'nav','aside', ]; for (var i=0; i<els.length; i++ ) { document.createElement(els[i]); } })();
22.
<!--[if IE]><script src="ie.js"></script><![endif]-->
23.
未知要素はすべてのブラウザーでインラ インとしてレンダリングされてしまう スタイルシートでブロックとして定義 section, article, aside, nav { display: block; }
24.
25.
section要素(セクション要素) article要素(セクション要素) aside要素(セクション要素) nav要素(セクション要素) hgroup要素 header要素 footer要素
26.
章や節といった単位を表す(セクション) 見出しと本文をまとめる <section> <h2>マレー空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマ レー空港に到着しました。</p> ... </section>
27.
セクションを表す ブログの投稿、ニュースサイトの記事、 ブログ記事へのコメント、掲示板の投稿 そのコンテンツだけを切り出しても、独 立したコンテンツとして再利用可能なも のに使う
28.
<article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そこで起こった 出来事をまとめました。</p> <section> <h2>マレ空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマレー空港に 到着しました。</p>
... </section> <section> <h2>ヴァビンファル島</h2> <p>この島に一週間滞在しました。...</p> ... </section> </article>
29.
ナビゲーションを形成するセクション サイト内のページリンクの集まり <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/">チュートリアル</a></li> ... </ul> </nav>
30.
メインのコンテンツとは関連が薄く、切 り離すことができるコンテンツを表すセ クション 補足記事、サイドバー、広告、プル・ クォート
31.
<article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そ こで起こった出来事をまとめました。</p> ... <aside> <h2>モルディブとは</h2> <p>...</p> </aside> </article>
32.
見出しと、それに付随する小見出しや副 題やキャッチフレーズをグループ化 もっともレベルが高い見出し要素がアウ トラインの見出し それ以外の見出し要素はサブタイトル <h1>~<h6>しか入れてはいけない
33.
<section> <hgroup> <h1>岐阜の鵜飼</h1> <h2>長良川の1300年の伝統</h2> </hgroup> <p>長良川の鵜飼いは、...</p> ... </section>
34.
ページやセクションのヘッダー <header> <hgroup> <h1><a href="http://www.html5.jp/">HTML5.JP</a></h1> <h2>次世代 HTML 標準 HTML5 情報サイト</h2> </hgroup> <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/index.html">HTML5 チュートリアル</a></li> <li><a href="/blog/">ブログ</a></li> ... </ul> </nav> </header>
35.
ページやセクションのフッター <body> ... <footer> <ul> <li><a href="/about/profile.html">サイト運営者情報</a></li> ... </ul> <p id="copyright"><small>Copyright © 2007 - 2009 <a href="http://www.futomi.com/">Futomi Hatano</a> All Rights Reserved.</small></p> </footer> </body>
36.
37.
ドキュメントのコンテンツを、書籍の目 次のように並べたもの HTML5では、ドキュメントからアウトラ インを決定するアルゴリズムが規定 h1~h6要素、section, article, aside, nav要素 の入れ子関係に従って決まる
38.
<h1>見出し1</h1>
見出し1 <p>段落</p> ├見出し2 <h2>見出し2</h2> └見出し3 <p>段落</p> <h2>見出し3</h2> <p>段落</h2>
39.
<h1>見出し1</h1>
見出しレベルはセク <p>段落</p> ション要素のネス <section> ト・レベルと一致 <h1>見出し2</h1> すべて<h1>でも、期 <p>段落</p> 待通りのアウトライ </section> <section> ンに <h1>見出し3</h1> <p>段落</h2> </section>
40.
HTML5 Outliner http://gsnedders.html5.org/outliner/ <h1>HTML5</h1> <p>HTML5とは...</p> <h2>要素</h2> <p>要素とは...</p> <h3>section要素</h3> <p>section要素とは...</p> <h3>article要素</h3> <p>article要素とは...</p> <h2>DOM</h2> <p>DOMとは...</p>
41.
42.
段落レベルの区切り セクション(章や節)の区切りではない
43.
<section> <h2>英語が話せなかった私とペラペラの彼</h2> <p>私はまったく英語が話せなかった。もちろん、 まともに聞くこともできなかった。...</p> ... <hr /> <p>彼は英国の大学に通っていた。そのため、彼は 英語がペラペラだ。...</p> ... </section>
44.
細目などの注釈を表す要素として再定義。 免責条項、警告、法的制約、著作権表記、 帰属、ライセンス要件など
45.
<footer> ... <p><small>© copyright 2010
Futomi Hatano</small></p> </footer>
46.
重要性を表す要素として再定義 強調を表す要素ではなくなった 強調はem要素を使うべき strong要素の中にstrong要素を使うと、重 要性が増す
47.
<p><strong>注意:最近、第三者によるなりすましの 被害が急増しています。被害を受けた方のほどんどは、 容易に推測できるパスワードを設定されています。パ スワードには<strong>ランダムな文字列を設定 </strong>するようにしてください。また、<strong>定 期的にパスワードを変更</strong>して頂きますよう、 お願いいたします。</strong></p>
48.
声、ムード、技術用語、船の名前など、 印刷表現ではイタリック体で表されるよ うなテキストの範囲 日本では、イタリック表記とする印刷慣 例は少ない 用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
49.
<p>私は、<i class="thought">なんてバカなんだ!</i>と心の 中で叫んだ。みんなが、沈んだ船の話をしていたので、 てっきり<i class="ship">戦艦大和</i>の話と思っていたら、 どうやら<i
class="ship">タイタニック号</i>の話だったらし い。どうりでさっぱり話が通じなかったわけだ。みんなに は相当変なヤツと思われたに違いない。まさに、<i class="idiom" lang="en">Oh! My God!</i>って感じだ。
50.
重要性や強調という意味は持たないが、 キーワードといった、他の文章とは区別 したいテキストの範囲 用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
51.
<p>当社が長年かけて研究し改良を重ねた自信作が<b class="product">きらきらカーワックス</b>です。<b class="product">きらきらカーワックス</b>は、サッと磨くだ けで、あなたあの愛車がピカピカになり、それ以降、水洗い 洗車だけで、それが6ヶ月も持続します。一度つかったら、 あなたはもう<b class="product">きらきらカーワークス</b> を手放せません!</p>
52.
見た目しか表さずCSSで対処可能な要素 basefont, big, center, font, s, strike, tt, u ユーザービリティやアクセシビリティに 悪影響を与える要素 frame, frameset, noframes ほとんど使われていない要素 acronym, applet, isindex, dir
53.
プレゼンテーショナルな属性 <hr>, <p>などのalign属性 <table>, <td>, <body>などの bgcolor属性 <hr>のnoshade属性とsize属性とwidth属性 <td>, <th>などののnowrap属性とvalign属性 代替方法があり不要となった属性 <a>のshape属性とcoords属性 <td>のscope属性
54.
55.
HTML5で要素のセマンティクスが強化 マークアップはセマンティクスのみ プレゼンテーションはCSSで
56.
アウトラインを意識したコンテンツ作り が重要 マークアップ・スキルだけでなく、文書 構成スキルも重要に
57.
適切な要素を考えてください
58.
59.
<header> <nav>
<aside>
60.
61.
<section> <article> <article>
62.
63.
<article>
<header> <section> <section> <footer>
64.
有限会社futomi 代表取締役 羽田野 太巳(はたの
ふとみ) http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi
Baixar agora