HTML5での制作、いつから始める？

HTML5での制作、いつから始める？

1

目次

•自己紹介

•現状どうですか？

•HTML5を知ろう！

•HTML5のマークアップを知ろう！

•HTML5 & Wordpress のメリット・デメリット

2

自己紹介 (1/3)

名前
森史憲（もりふみのり）

出身
鹿児島市

容姿
丸メガネ、丸ぼうず

3

自己紹介 (2/3)

フリーランスのコーダー
（Wordpress歴は1年くらい…）

雑誌記事 / 書籍執筆
★HTML5マークアップ入門
技術評論社
★HTML5&CSS3
ポケットリファレンス
技術評論社（執筆中）

Webサイト制作技術講師
★森さんコーディングの会

4

自己紹介 (3/3)

カレーLOVE!
カレー屋匠
★匠盛
（和牛・黒豚あいがけ）

ビールLOVE!
城山観光ホテルの地ビール
★ベルギーホワイト
★スタウトエール黒糖

チョコレートLOVE!
パティスリー・ヤナギムラ
★ 摩チョコチップス

5

現状どうですか？

6

モバイル端末向け
Webサイトは
すでにHTML5

iOSもAndroidも
HTML5を取り込むのが早かった

7

レスポンシブWeb
デザインで制作する
ならHTML5

link要素のmedia属性で
ページの表示幅によって読み込む
スタイルを変更できる

8

電子書籍を作るとき
ePub3.0を利用するなら
HTML5

iOS, Androidアプリ：Kinoppy
電子書籍リーダー：kobo touch、
Sony Reader
Webアプリ：Yahooブックストア
Google Chrome拡張機能：Readium
はePub3対応。

9

いつから始める？

10

すでに始まってる！

11

ｱﾀヽ(д｀ヽ彡ノ´д)ノﾌﾀ

12

で、HTML5って何？
( ﾟдﾟ)ﾎﾟｶｰﾝ

14

HTML5を知ろう！

15

HTML5を知ろう！

•なりたち

•マークアップと関連仕様

•注目される理由

•HTML5の可能性

16

なりたち

• W3C：データ
XHTML 2.0を策定
実際の用途にあわない

• WHATWG：アプリケーション
Web Applications 1.0を策定
（現在はHTMLに改名）
ブラウザベンダーが望む用途の仕様

• W3CがWeb Applications 1.0を
HTML5として採用
（マークアップ以外は
別の仕様書として独立）

17

マークアップと関連仕様

• HTML5だと考えられているマーク
アップは全体の一部

• Javascriptで実装するAPI群、
その他の様々な仕様が盛りだくさん

18

注目される理由

• アプリを開発する言語を標準化

• iOS - Objective-C

• Android - Java

• PC, iOS, Android
- HTML, CSS, Javascript

19

HTML5の可能性

• ブラウザのOS化
★Firefox OS
（モバイル、タブレット）

• 電子書籍の軽量化
★ePub3.0

• アプリ配布手数料を抑える
★App StoreやGoogle Playを
通さない

20

HTML5はすごいけど…

21

仕様が多すぎ！
ヽ(`Д´)ﾉｳﾜｧｧｧﾝ!!

22

無理せずマークアップから
はじめましょう。

23

HTML5のマークアップを知ろう！

24

HTML5のマークアップを知ろう！

•DOCTYPE宣言を変える

•HTML、XHTMLどちらの書き方でもOK

•セクションでグループ化する

•ヘッダ/フッタはセクションの中に

25

【その１】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

【その２】 HTML、XHTMLどちらの書き方でもOK

• HTML4.01やXHTML1.0の文法を引き継いでます

★<br>、<BR>、<br />のいずれでもOK

★終了タグの省略も可能

★制作メンバー内で混乱しないように統一したほうがいいですよ

27

【その３】セクションでグループ化する

• HTML4やXHTML1ではdivでグループ化する
• HTML5ではセクション周りの要素でグループ化する

★divは意味を持たないグループの枠。意味を持つグループの枠には

article, aside, section, navを利用。
article ページの主題として独立している内容
aside ページの主題に関連する内容
section 一般的なセクション
nav 主要なリンク集

28


<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


<nav id=”nav”>グローバルナビゲーション</nav>
<article>
<p>本文本文本文本文</p>
<h2>見出し</h2>
<p>本文</p>
</article>
<nav id=”nav_sub”>サブナビゲーション</nav>
<aside id=”related_information”>関連情報</aside>

30

【その４】ヘッダ/フッタはセクションの中に

<article>
<h2>見出し</h2>
<p>本文</p>
</article>

31

【その４】ヘッダ/フッタはセクションの中に

<header id=”header”>ヘッダ</header>
<article>
<header class=”header_contents”>
</header>
<h2>見出し</h2>
<p>本文</p>
</article>
<footer id=”footer”>フッタ</footer>

32

【その他】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

＿＿＿_
／͡ ͡＼
／（ ●）（●）＼
／::::::͡（__人__）͡:::::＼ HTML5のマー
クアップは

34

HTML5 & Wordpressの
メリット・デメリット

35

メリット
• Wordpress 3.4はデフォルトテーマ
がHTML5 & レスポンシブWebデザ
イン！

• ネット上にHTML5で作られた
Wordpressのテーマがたくさん！

36

デメリット
• コンテンツ領域にはセクション周
りの要素を使わないほうがいい

★WYSIWYGエディタのボタンで
はセクション周りの要素は使用
できない

37

Wordpressは生きたHTML5を
勉強できる！
ｷﾀ━━━━(ﾟﾟ)━━━━ !!!!!

38

まとめ！

• HTML5はすでに使えるし、使われているよ！

• HTML5関連の仕様は多い！

• まず始めるならマークアップ！

• WordpressはHTML5の使い方を知るのに便利！

39

Webはいつも未完成。

40

手を動かして楽しみましょう！

41

ご清聴どうもありがとうございました！

42

HTML5での制作、いつから始める？

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à HTML5での制作、いつから始める？

Similaire à HTML5での制作、いつから始める？ (20)

HTML5での制作、いつから始める？

Notes de l'éditeur