HTMLを、ちゃんと書く ―アウトライン編

814 views

Published on

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

Published in: Technology, Design

HTMLを、ちゃんと書く ―アウトライン編

  1. 1. 大竹孔明 HTMLを、ちゃんと書く 第7回 Creators Meetup : ― アウトライン編 Saturday, 24 August 13
  2. 2. 大竹 孔明 こうめ コーディングを中心に Web制作をしています Twitter : @Bamboo_C Facebook : komei.otake photo by susipaku at PAKUTASO Saturday, 24 August 13
  3. 3. GCSS http://gcss.info Saturday, 24 August 13
  4. 4. 共著 http://amzn.to/179krhH Saturday, 24 August 13
  5. 5. ASCII.jp連載 http://ascii.jp/elem/000/000/818/818527/ Saturday, 24 August 13
  6. 6. 本日の内容 •HTMLとは •マークアップとは •アウトラインとは 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  7. 7. 本日の内容 •HTMLとは •マークアップとは •アウトラインとは 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  8. 8. 本日の内容 •HTMLとは •マークアップとは •アウトラインとは 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  9. 9. 本日の内容 •HTMLとは •マークアップとは •アウトラインとは 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  10. 10. HTMLとは Saturday, 24 August 13
  11. 11. HTML is easy? Saturday, 24 August 13
  12. 12. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Accessibility Architecture Structuring 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  13. 13. ちゃんと、書きましょう 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 HTMLは全ての根幹。 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  14. 14. What is HTML? Saturday, 24 August 13
  15. 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. 16. はい 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  17. 17. Web上の文書を マークアップするための言語である 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  18. 18. マークアップとは Saturday, 24 August 13
  19. 19. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 "マークアップとは、普通の文書に目印を付 ける(マークアップする)ことで、その部分 が文書中でどんな働きをしているか(見出し なのか、段落なのかなど)をはっきりさせよ うという考えです。" 出展 - The Web KANZAKI 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  20. 20. 文書をコンピューターにも わかりやすくする印付け 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  21. 21. もう一度HTMLの話 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  22. 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. 23. HTMLは、ウェブページの構造を 説明するための言語である。 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  24. 24. HTMLは、ウェブページの構造を 説明するための言語である。 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  25. 25. アウトラインとは Saturday, 24 August 13
  26. 26. What is Outline? Saturday, 24 August 13
  27. 27. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 level1 level2 level3 level3 第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  28. 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. 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. 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. 31. section, article, nav, aside 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  32. 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. 33. 正しいアウトライン生成に 必要なこととは 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  34. 34. Untitled section 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  35. 35. Visualize how? Saturday, 24 August 13
  36. 36. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  37. 37. DEMO demo Saturday, 24 August 13
  38. 38. default heading 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」第7回 Creators MeetUp 「HTMLを、ちゃんと書く ―アウトライン編」 Saturday, 24 August 13
  39. 39. ありがとうございました! 大竹孔明 Saturday, 24 August 13

×