第7回 Creators Meetup でお話したHTMLのアウトラインについてのスライドです

1. 大竹孔明
HTMLを、ちゃんと書く
第7回 Creators Meetup :
― アウトライン編
Saturday, 24 August 13

2. 大竹 孔明 こうめ
コーディングを中心に
Web制作をしています
Twitter : @Bamboo_C
Facebook : komei.otake
photo by susipaku at PAKUTASO
Saturday, 24 August 13

3. GCSS
http://gcss.info
Saturday, 24 August 13

4. 共著
http://amzn.to/179krhH
Saturday, 24 August 13

5. ASCII.jp連載
http://ascii.jp/elem/000/000/818/818527/
Saturday, 24 August 13

6. 本日の内容
•HTMLとは
•マークアップとは
•アウトラインとは
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

7. 本日の内容
•HTMLとは
•マークアップとは
•アウトラインとは
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

8. 本日の内容
•HTMLとは
•マークアップとは
•アウトラインとは
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

9. 本日の内容
•HTMLとは
•マークアップとは
•アウトラインとは
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

10. HTMLとは
Saturday, 24 August 13

11. HTML is easy?
Saturday, 24 August 13

12. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
Accessibility
Architecture
Structuring
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

13. ちゃんと、書きましょう
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
HTMLは全ての根幹。
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

14. What is HTML?
Saturday, 24 August 13

15. "（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイ
チティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語
である。文章の中に記述することでさまざまな機能を記述設定することができ
る。
ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメ
ントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキスト
であり、画像・リスト・表などの高度な表現力を持つ。
W3Cは、XMLベースの規格であるXHTMLの勧告も行っている。また2012年
12月現在、HTML5も策定中である。"
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
出展 - wikipedia
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

16. はい
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

17. Web上の文書を
マークアップするための言語である
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

18. マークアップとは
Saturday, 24 August 13

19. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
"マークアップとは、普通の文書に目印を付
ける（マークアップする）ことで、その部分
が文書中でどんな働きをしているか（見出し
なのか、段落なのかなど）をはっきりさせよ
うという考えです。"
出展 - The Web KANZAKI
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

20. 文書をコンピューターにも
わかりやすくする印付け
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

21. もう一度HTMLの話
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

22. “HTML is the language for describing
the structure of Web pages.”
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
出展 - W3C
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

23. HTMLは、ウェブページの構造を
説明するための言語である。
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

24. HTMLは、ウェブページの構造を
説明するための言語である。
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

25. アウトラインとは
Saturday, 24 August 13

26. What is Outline?
Saturday, 24 August 13

27. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
level1
level2
level3 level3
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

28. Why!?
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim ven</p>
<h3>見出しレベル3</h3>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim ven</p>
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

29. 1. 見出しレベル1
1.1 見出しレベル2
1.1.1 見出しレベル3
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

30. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
<div>
<h1>見出しレベル1</h1>
<div>
<h2>見出しレベル2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim ven</p>
<div>
<h3>見出しレベル3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim ven</p>
</div>
</div>
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

31. section, article, nav, aside
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

32. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
<article>
<h1>見出しレベル1</h1>
<section>
<h1>見出しレベル2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim ven</p>
<section>
<h1>見出しレベル3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim ven</p>
</section>
</section>
</article>
第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

33. 正しいアウトライン生成に
必要なこととは
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

34. Untitled section
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

35. Visualize how?
Saturday, 24 August 13

36. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

37. DEMO
demo
Saturday, 24 August 13

38. default heading
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」
Saturday, 24 August 13

39. ありがとうございました！
大竹孔明
Saturday, 24 August 13