Submit Search
Upload
HTML5での制作、いつから始める?
•
Download as KEY, PDF
•
2 likes
•
1,794 views
Fuminori Mori
Follow
2012-07-14に鹿児島市のマルヤガーデンズで開催されたWordVolcanoというイベントで行ったHTML5とWordpressについての講演スライドです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 47
Download now
Recommended
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
「日本語組版処理の要件(JLREQ)」とは何か
「日本語組版処理の要件(JLREQ)」とは何か
Shinyu Murakami
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Recommended
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
「日本語組版処理の要件(JLREQ)」とは何か
「日本語組版処理の要件(JLREQ)」とは何か
Shinyu Murakami
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
WordPressって何
WordPressって何
Kazue Igarashi
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTML5 for IA
HTML5 for IA
Atsushi HASEGAWA, Ph.D.
HTML5概要、コードサンプル
HTML5概要、コードサンプル
ourmaninjapan
More Related Content
What's hot
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
WordPressって何
WordPressって何
Kazue Igarashi
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
What's hot
(20)
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
WordPressって何
WordPressって何
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
HTML5 & The Web Platform
HTML5 & The Web Platform
マークアップ講座 01b HTML
マークアップ講座 01b HTML
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
Similar to HTML5での制作、いつから始める?
HTML5 for IA
HTML5 for IA
Atsushi HASEGAWA, Ph.D.
HTML5概要、コードサンプル
HTML5概要、コードサンプル
ourmaninjapan
Attractive HTML5
Attractive HTML5
Sho Ito
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
満徳 関
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
Kei Mikage
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
テスト
テスト
Masashi Sato
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Fujio Kojima
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
Shinyu Murakami
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
Similar to HTML5での制作、いつから始める?
(20)
HTML5 for IA
HTML5 for IA
HTML5概要、コードサンプル
HTML5概要、コードサンプル
Attractive HTML5
Attractive HTML5
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
GDG Women DevfestW
GDG Women DevfestW
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
パンダの会 Html5概説
パンダの会 Html5概説
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
JavaScript 研修
JavaScript 研修
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
テスト
テスト
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
HTML5での制作、いつから始める?
1.
HTML5での制作、いつから始める?
1
2.
目次 •自己紹介 •現状どうですか? •HTML5を知ろう! •HTML5のマークアップを知ろう! •HTML5 & Wordpress
のメリット・デメリット 2
3.
自己紹介 (1/3) 名前 森 史憲(もり ふみのり) 出身 鹿児島市 容姿 丸メガネ、丸ぼうず
3
4.
自己紹介 (2/3) フリーランスのコーダー (Wordpress歴は1年くらい…) 雑誌記事 /
書籍執筆 ★HTML5マークアップ入門 技術評論社 ★HTML5&CSS3 ポケットリファレンス 技術評論社(執筆中) Webサイト制作技術講師 ★森さんコーディングの会 4
5.
自己紹介 (3/3) カレーLOVE! カレー屋 匠
★匠盛 (和牛・黒豚あいがけ) ビールLOVE! 城山観光ホテルの地ビール ★ベルギーホワイト ★スタウトエール黒糖 チョコレートLOVE! パティスリー・ヤナギムラ ★ 摩チョコチップス 5
6.
現状どうですか?
6
7.
モバイル端末向け Webサイトは すでにHTML5 iOSもAndroidも HTML5を取り込むのが早かった
7
8.
レスポンシブWeb デザインで制作する ならHTML5 link要素のmedia属性で ページの表示幅によって読み込む スタイルを変更できる
8
9.
電子書籍を作るとき ePub3.0を利用するなら HTML5 iOS, Androidアプリ:Kinoppy 電子書籍リーダー:kobo touch、 Sony
Reader Webアプリ:Yahooブックストア Google Chrome拡張機能:Readium はePub3対応。 9
10.
いつから始める?
10
11.
すでに始まってる!
11
12.
アタヽ(д`ヽ彡ノ´д)ノフタ
12
13.
… 13
14.
で、HTML5って何? (
゚д゚)ポカーン 14
15.
HTML5を知ろう!
15
16.
HTML5を知ろう! •なりたち •マークアップと関連仕様 •注目される理由 •HTML5の可能性
16
17.
なりたち • W3C:データ XHTML
2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は 別の仕様書として独立) 17
18.
なりたち • W3C:データ XHTML
2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は 別の仕様書として独立) 17
19.
なりたち • W3C:データ XHTML
2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は 別の仕様書として独立) 17
20.
なりたち • W3C:データ XHTML
2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は 別の仕様書として独立) 17
21.
マークアップと関連仕様 • HTML5だと考えられているマーク アップは全体の一部 •
Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん 18
22.
マークアップと関連仕様 • HTML5だと考えられているマーク アップは全体の一部 •
Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん 18
23.
注目される理由 • アプリを開発する言語を標準化 •
iOS - Objective-C • Android - Java • PC, iOS, Android - HTML, CSS, Javascript 19
24.
HTML5の可能性 • ブラウザのOS化 ★Firefox
OS (モバイル、タブレット) • 電子書籍の軽量化 ★ePub3.0 • アプリ配布手数料を抑える ★App StoreやGoogle Playを 通さない 20
25.
HTML5はすごいけど…
21
26.
仕様が多すぎ! ヽ(`Д´)ノウワァァァン!!
22
27.
無理せずマークアップから はじめましょう。
23
28.
HTML5のマークアップを知ろう!
24
29.
HTML5のマークアップを知ろう! •DOCTYPE宣言を変える •HTML、XHTMLどちらの書き方でもOK •セクションでグループ化する •ヘッダ/フッタはセクションの中に
25
30.
【その1】DOCTYPE宣言を変える HTML4.01 Transitional <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 <!DOCTYPE html> 26
31.
【その1】DOCTYPE宣言を変える HTML4.01 Transitional <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 <!DOCTYPE html> 26
32.
【その2】 HTML、XHTMLどちらの書き方でもOK • HTML4.01やXHTML1.0の文法を引き継いでます
★<br>、<BR>、<br />のいずれでもOK ★終了タグの省略も可能 ★制作メンバー内で混乱しないように統一したほうがいいですよ 27
33.
【その3】 セクションでグループ化する • HTML4やXHTML1ではdivでグループ化する •
HTML5ではセクション周りの要素でグループ化する ★divは意味を持たないグループの枠。意味を持つグループの枠には article, aside, section, navを利用。 article ページの主題として独立している内容 aside ページの主題に関連する内容 section 一般的なセクション nav 主要なリンク集 28
34.
【その3】 セクションでグループ化する <div id=”header”>ヘッダ</div> <div
id=”nav”>グローバルナビゲーション</div> <h1>ページタイトル</h1> <p>本文</p> <h2>見出し</h2> <p>本文</p> <div id=”nav_sub”>サブナビゲーション</div> <div id=”related_information”>関連情報</div> <div id=”footer”>フッタ</div> 29
35.
【その3】 セクションでグループ化する <div id=”header”>ヘッダ</div> <nav
id=”nav”>グローバルナビゲーション</nav> <article> <h1>ページタイトル</h1> <p>本文本文本文本文</p> <h2>見出し</h2> <p>本文</p> </article> <nav id=”nav_sub”>サブナビゲーション</nav> <aside id=”related_information”>関連情報</aside> <div id=”footer”>フッタ</div> 30
36.
【その4】 ヘッダ/フッタはセクションの中に <div id=”header”>ヘッダ</div> <nav
id=”nav”>グローバルナビゲーション</nav> <article> <h1>ページタイトル</h1> <p>本文本文本文本文</p> <h2>見出し</h2> <p>本文</p> </article> <nav id=”nav_sub”>サブナビゲーション</nav> <aside id=”related_information”>関連情報</aside> <div id=”footer”>フッタ</div> 31
37.
【その4】 ヘッダ/フッタはセクションの中に <header id=”header”>ヘッダ</header> <nav
id=”nav”>グローバルナビゲーション</nav> <article> <header class=”header_contents”> <h1>ページタイトル</h1> <p>本文本文本文本文</p> </header> <h2>見出し</h2> <p>本文</p> </article> <nav id=”nav_sub”>サブナビゲーション</nav> <aside id=”related_information”>関連情報</aside> <footer id=”footer”>フッタ</footer> 32
38.
【その他】IE対応 • IE6∼IE8はHTML5の新しい要素を認識しないので以下の対応が必要です。 ★Javascriptで新要素をつくる
http://code.google.com/p/html5shiv/ からダウンロードして 印刷対応済みのhtml5shiv-printshiv.jsをhtmlファイルに読み込む ★CSSでデフォルトのスタイルづけをする http://necolas.github.com/normalize.css/ からダウンロードして normalize.cssをhtmlファイルに読み込む • いろいろノウハウの詰まったテンプレートを落とすのもよいです。 http://www.initializr.com/ 33
39.
____
/͡ ͡\ /( ●) (●)\ /::::::͡(__人__)͡:::::\ HTML5のマー クアップは 34
40.
HTML5 & Wordpressの
メリット・デメリット 35
41.
メリット • Wordpress 3.4はデフォルトテーマ
がHTML5 & レスポンシブWebデザ イン! • ネット上にHTML5で作られた Wordpressのテーマがたくさん! 36
42.
デメリット • コンテンツ領域にはセクション周 りの要素を使わないほうがいい ★WYSIWYGエディタのボタンで
はセクション周りの要素は使用 できない 37
43.
Wordpressは生きたHTML5を
勉強できる! キタ━━━━(゚ ゚)━━━━ !!!!! 38
44.
まとめ! • HTML5はすでに使えるし、使われているよ! • HTML5関連の仕様は多い! •
まず始めるならマークアップ! • WordpressはHTML5の使い方を知るのに便利! 39
45.
Webはいつも未完成。
40
46.
手を動かして楽しみましょう!
41
47.
ご清聴どうもありがとうございました!
42
Editor's Notes
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Download now