Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

マークアップ講座 01b HTML

1.039 Aufrufe

Veröffentlicht am

Mu seminor2014 01b

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

マークアップ講座 01b HTML

  1. 1. マークアップ講座
  2. 2. HTML
  3. 3. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  4. 4. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  5. 5. 1. HTMLとは 1. 世界初・最古のHTML 2. 歴史 3. W3C 4. JavaScript 5. JSON 6. HTMLの基本構造
  6. 6. 1. HTMLとは 世界初・最古のHTML 『The World Wide Web project』 http://info.cern.ch/hypertext/WWW/ TheProject.html
  7. 7. 1. HTMLとは 世界初・最古のHTML 1991年8月6日 Sir Timothy John Berners-Lee (ティム・バーナーズ=リー) ! CERN : 欧州原子核研究機構 数千人に効率よく情報を行き渡らせるための システム開発の一貫
  8. 8. 1. HTMLとは 歴史 • 1991年8月6日 : 初公開 • 1993年4月30日 :  WWW技術の無償化 • 1994年 :  World Wide Web  Consortium(W3C)設立
  9. 9. 1. HTMLとは W3C Webで使用される各種技術 の標準化を推進 !『W3C』 http://www.w3.org/
  10. 10. 1. HTMLとは W3C • HTML • CSS • DOM : JavaScriptのInterface ※ 日本ホスト : 慶応SFC 萩野達也 環境情報学部教授
  11. 11. 1. HTMLとは JavaScript Ecma International(ECMAScript - ECMA-262) : JavaScriptのObjectやMethod ! Mozilla Foundation : DOMとEcmaを結合、とりまとめ役的 ! ※ ステークホルダーが複数
  12. 12. 1. HTMLとは JSON IETF(Internet Engineering Task Force) RFC 4627 ! W3Cの親組織
  13. 13. 1. HTMLとは HTMLの基本構造 ! <span id="id-name">text</span> ! <start-tag attribute="value">content</end-tag> ! <開始タグ 属性="属性値">コンテンツ</終了タグ> ! <!--コメント-->
  14. 14. 1. HTMLとは HTMLの基本構造 Empty-Element Tags (空要素、空要素タグ) ! <img type="path"> ! (<img src="path" />)
  15. 15. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  16. 16. 2. 『HTML5』とはなにか HTMLマークアップの仕様のみにとど まらずWeb全体の枠組みを刷新する新 しい規格群を表す用語 HTMLのメジャーアップデート第5版 2014年正式勧告目標(現在未勧告)
  17. 17. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  18. 18. 3. HTML5規格 HTML5規格 • セマンティック ・・・ ① • CSS3 ・・・ ② • メディア、グラフィック、ストレージ、 API、通信、パフォーマンス
  19. 19. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  20. 20. 4. HTML5要素の役割 HTML5要素の役割 セマンティックWebに則ったHTML5要素 ! 『HTML5』 http://www.w3.org/TR/html5/
  21. 21. 4. HTML5要素の役割 要素分類 1. コンテンツモデルによる要素分類 2. 要素タイプによる分類 • ブロックレベル、インラインという観点は抹消
  22. 22. 4-1. コンテンツモデルによる要素分類 コンテンツモデル(Content models) による要素分類 1. メタデータ・コンテンツ(Metadata content) 2. フロー・コンテンツ(Flow content) 3. セクショニング・コンテンツ(Sectioning content) 4. ヘッディング・コンテンツ(Heading content) 5. フレージング・コンテンツ(Phrasing content) 6. エンベッディッド・コンテンツ(Embedded content) 7. インタラクティブ・コンテンツ(Interactive content)
  23. 23. 4-1. コンテンツモデルによる要素分類 1. メタデータ・コンテンツ (Metadata content) http://www.w3.org/TR/html5/dom.html#metadata-content http://www.html5.jp/tag/models/index.html#metadata-content-0 設定系要素 ! base link meta noscript script style template title
  24. 24. 4-1. コンテンツモデルによる要素分類 2. フロー・コンテンツ (Flow content) http://www.w3.org/TR/html5/dom.html#flow-content http://www.html5.jp/tag/models/index.html#flow-content-1 本文格納系 a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text
  25. 25. 4-1. コンテンツモデルによる要素分類 3. セクショニング・コンテンツ (Sectioning content) http://www.w3.org/TR/html5/dom.html#sectioning-content http://www.html5.jp/tag/models/index.html#sectioning-content-0 構成系 ! article aside nav section
  26. 26. 4-1. コンテンツモデルによる要素分類 4. ヘッディング・コンテンツ (Heading content) http://www.w3.org/TR/html5/dom.html#heading-content http://www.html5.jp/tag/models/index.html#heading-content-0 見出し系 ! h1 h2 h3 h4 h5 h6 hgroup
  27. 27. 4-1. コンテンツモデルによる要素分類 5. フレージング・コンテンツ (Phrasing content) http://www.w3.org/TR/html5/dom.html#phrasing-content http://www.html5.jp/tag/models/index.html#phrasing-content-1 文章系 ! a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text
  28. 28. 4-1. コンテンツモデルによる要素分類 6. エンベッデッド・コンテンツ (Embedded content) http://www.w3.org/TR/html5/dom.html#embedded-content http://www.html5.jp/tag/models/index.html#embedded-content-2 外部リソース系 ! audio canvas embed iframe img math object svg video
  29. 29. 4-1. コンテンツモデルによる要素分類 7. インタラクティブ・コンテンツ (Interactive content) http://www.w3.org/TR/html5/dom.html#interactive-content http://www.html5.jp/tag/models/index.html#interactive-content-0 インタラクション系 ! a audio (if the controls attribute is present) button embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the hidden state) keygen label object (if the usemap attribute is present) select textarea video (if the controls attribute is present)
  30. 30. 4-2. 要素タイプによる分類 要素タイプによる要素分類 http://www.html5.jp/tag/elements/index.html 1. ルート要素 (The root element) 2. メタデータ要素 (Document metadata) 3. セクション要素 (Sections) 4. グルーピング要素 (Grouping content) 5. セマンティックテキスト要素 (Text-level semantics) 6. エディット要素 (Edits) 7. 組み込み要素 (Embedded content) 8. テーブル要素 (Tabular data) 9. フォーム要素 (Forms) 10. スクリプト要素 (Scripting) 11. インタラクティブ要素 (Details content)
  31. 31. 4-2. 要素タイプによる分類 1. ルート要素 (The root element) html 2. メタデータ要素 (Document metadata) head title base link meta style
  32. 32. 4-2. 要素タイプによる分類 3. セクション要素 (Sections) body article section nav aside h1~h6 header footer address 4. グルーピング要素 (Grouping content) p hr pre blockquote ol ul li dl dt dd figure figcaption div main
  33. 33. 4-2. 要素タイプによる分類 5. セマンティックテキスト要素 (Text-level semantics) a em strong small s cite q dfn abbr data time code var samp kbd sub sup i b u mark ruby rb rt rtc rp bdi bdo span br wbr
  34. 34. 4-2. 要素タイプによる分類 6. エディット要素 (Edits) ins del 7. 組み込み要素 (Embedded content) img iframe embed object param video audio source track map area
  35. 35. 4-2. 要素タイプによる分類 8. テーブル要素 (Tabular data) table caption colgroup col tbody thead tfoot tr td th 9. フォーム要素 (Forms) form label input button select datalist optgroup option textarea keygen output progress meter fieldset legend
  36. 36. 4-2. 要素タイプによる分類 10. スクリプト要素 (Scripting) script noscript template canvas 11. インタラクティブ要素 (Details content) details summary dialog
  37. 37. 4. HTML5要素の役割 HTML属性 グローバル属性 (Grobal attributes) accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title
  38. 38. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  39. 39. 5. HTML5実装 xhtml1.0のコード ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[title値]</title> <meta name="copyright" content="[コピーライト]" /> <meta name="description" content="[ページ概要]" /> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="canonical" href="[正規化フルパス URL]" /> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]" /> <!--/css--> </head> <body>
  40. 40. 5. HTML5実装 xhtml1.0のコード ! <p>contents here.</p> ! <!--JavaScript--> <script src="[JavaScriptパス]"></script> <script> /*[ローカル JavaScript]*/ </script> <!--/JavaScript--> </body> </html> http://codepen.io/sekiyaeiji/pen/Kryxm?editors=100 変化
  41. 41. html5のコード 5. HTML5実装 ! <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>[title値]</title> <meta name="author" content="[コピーライト]"> <meta name="description" content="[ページ概要]"> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="canonical" href="[正規化フルパス URL]"> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]"> <!--/css--> </head> <body>
  42. 42. html5のコード ! <p>contents here.</p> ! <!--JavaScript--> <script src="[JavaScriptパス]"></script> <script> /*[ローカル JavaScript]*/ </script> <!--/JavaScript--> </body> </html> 5. HTML5実装 http://codepen.io/sekiyaeiji/pen/CarpA?editors=100
  43. 43. 5. HTML5実装 html5のコード 解説 ! <!DOCTYPE html> : HTML5にて「DOCTYPE」の役割は薄い、DTDなどのスキーマは設定されない ! <html lang=“ja"> : 一般的には「lang属性」のみ指定 (※ manifest属性 : アプリオフライン動作向け) ! <meta charset=“utf-8"> :「charset属性」が新設 ! <meta name="author" content=“[コピーライト]"> : 「meta name="copyright"」は廃止
  44. 44. コード比較 5. HTML5実装 ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[title値]</title> <meta name="copyright" content="[コピーライト]" /> <meta name="description" content="[ページ概要]" /> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="canonical" href="[正規化フルパス URL]" /> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]" /> <!--/css--> </head> <body>
  45. 45. コード比較 5. HTML5実装 ! <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>[title値]</title> <meta name="author" content="[コピーライト]"> <meta name="description" content="[ページ概要]"> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="canonical" href="[正規化フルパス URL]"> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]"> <!--/css--> </head> <body> !
  46. 46. 5. HTML5実装 利用頻度の高い要素 要素役割 div − (汎用ブロック) division span − (汎用インライン) span p 段落 paragraph a ハイパーリンク anchor img 画像 image br 改行 breake hr 水平線 horizontal rule ul 順序なしリスト unordered list li リスト list dl 定義リスト difinition list dt 定義リストタイトル difinition list title dd 定義リストデータ difinition list data h1〜6 見出し heading ※ 上記以外にtable、form系要素など機能的な要素群
  47. 47. 5. HTML5実装 利用頻度の高いhtml5新設要素 要素役割 header ヘッダー header footer フッター footer nav ナビゲーション navigation article 記事 article section 章 section aside その他 aside main メイン main
  48. 48. 要素利用サンプル 5. HTML5実装 http://codepen.io/sekiyaeiji/pen/gGcHs?editors=100
  49. 49. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  50. 50. 6. Microdataの役割と実装 『HTML Microdata』 http://www.w3.org/TR/microdata/ ! 『microdata について - ウェブマス ター ツール ヘルプ』 https://support.google.com/ webmasters/answer/176035?hl=ja
  51. 51. 6. Microdataの役割と実装 Microdataでなにができる? 『Google検索 : iPad Air Wi-Fiモデ ル 16GB』 http://goo.gl/LHjUrr
  52. 52. 6. Microdataの役割と実装 Microdataでなにができる?
  53. 53. 6. Microdataの役割と実装 Microdata属性 itemscope itemprop itemtype itemref itemid
  54. 54. 6. Microdataの役割と実装 Microdataのサンプルコード 『価格.com - APPLE iPad Air Wi-Fi モデル 16GB MD788J/A [シルバー] 価格比較』 http://kakaku.com/item/ K0000587933/
  55. 55. 6. Microdataの役割と実装 Microdataのサンプルコード ! <div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">iPad Air Wi-Fiモデル 16GB</span></a> <span itemprop="name">iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー]</span> <img itemprop="image" alt="iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー] 製品画像"> ! <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> <span itemprop="lowPrice">&yen;46,190</span> <span itemprop="highPrice">&yen;65,664</span> <span itemprop="offerCount">24</span> <meta itemprop="priceCurrency" content="JPY" /> </div> <li itemprop="aggregateRating" itemscope itemtype="http://schema.org/ AggregateRating"> <span itemprop="ratingValue">4.52</span> <span itemprop="reviewCount">47</span> </li> <span itemprop="name">iPad Air Wi-Fiモデル 16GB</span> </div>
  56. 56. 6. Microdataの役割と実装 itemscope 包含する要素がitemであることを定義
  57. 57. 6. Microdataの役割と実装 itemtype itemtypeで囲まれた情報が「何を」表す情報のグループかを定義 ! microformats.org Facebookが一部利用歴あり   data-vocabulary.org Googleの検索エンジンが一部利用   schema.org Google、Microsoft、Yahoo!の検索大手3社が策定中
  58. 58. 6. Microdataの役割と実装 itemtype schema.orgの例 ! 『Full Hierarchy - schema.org』 http://schema.org/docs/full.html ! 大量なtype定義あり
  59. 59. 6. Microdataの役割と実装 itemprop 情報1つ1つの意味属性を定義 ! 『Article - schema.org』 http://schema.org/docs/schemas.html ! 膨大(!!)なproperty定義あり
  60. 60. 6. Microdataの役割と実装 itemのネスト 上記の例の通り、itemはネストすることができる ! ネストすると、情報の親子関係を明確にし、情報 階層をより詳細に表現することができる
  61. 61. 6. Microdataの役割と実装 itemのネスト ! <div itemscope itemtype="http://schema.org/Product"> <div itemprop="offers" itemscope itemtype="http:// schema.org/AggregateOffer"></div> <li itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"></li> </div>
  62. 62. 5. HTML5実装 ここで振り返り なぜ ”セマンティック”?
  63. 63. 5. HTML5実装 なぜ ”セマンティック”? • どこに何が書いてある? • 意味を伝達できる文書にする • データ伝達、交換、収集・分析を効 率化したり標準化できる
  64. 64. 1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
  65. 65. 7. HTML運用の効率化 1. モジュール指向マークアップ 2. ループオブジェクト 3. id属性とclass属性 4. id属性やclass属性の役割分離 5. a要素の指定範囲 6. 本文ブロックの定常テスト
  66. 66. 7-1. モジュール指向マークアップ
  67. 67. 7-1. モジュール指向マークアップ Sample http://codepen.io/sekiyaeiji/pen/mlBon? editors=100 ! ✕ Anti-pattern http://codepen.io/sekiyaeiji/pen/jbvil? editors=100 
  68. 68. 7-2. ループオブジェクト 『レディースファッション通販トップ - Yahoo!ショッピング - Tポイントが 貯まる!使える!ネット通販』 ! http://goo.gl/tq71p5 ! 「カテゴリグリッド」
  69. 69. 7-2. ループオブジェクト ! <ul id="pc02_cr_2494" class="exCfx"> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="pc02_cr_2494" class="exCfx"> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="pc02_cr_2494" class="exCfx"> <li></li> <li></li> <li></li> <li></li> </ul>
  70. 70. 7-2. ループオブジェクト 『トップスファッション通販 - ZOZOTOWN』 ! http://zozo.jp/category/tops/ ! 「商品グリッド」
  71. 71. 7-2. ループオブジェクト ! <ul id="searchResultList" class="goodsResult clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
  72. 72. 7-2. ループオブジェクト 上記の例の場合、汎用性が高いのは ZOZOTOWNのコード ! マルチカラムグリッドレイアウトは、 inline-blockやfloatを利用して、 同型のマークアップのループになるよ うに設計する
  73. 73. 7-3. id属性とclass属性 id属性の特長 • 1文書に1箇所のみ記述できる • JSセレクタにおいて高パフォーマンス
  74. 74. 7-3. id属性とclass属性 class属性の特長 • 1文書に複数記述できる • JSセレクタにおいて低パフォーマンス
  75. 75. 7-3. id属性とclass属性 CSS要件におけるid属性と class属性の使い分け HTML要素のセマンティック性が向上した影響もあ り、 CSSセレクタとしての、id属性の役割はあまりなく なった現状では、 スタイル定義はなるべくclassのみで設定すべきで ある
  76. 76. 7-3. id属性とclass属性 JavaSdript要件における id属性とclass属性の使い分け JSセレクタとしてのid属性は、パフォーマンスにお いて存在価値が高い "文書に一意"という特性により、DOM走査におい て発見次第処理を中断する仕様になっているためで ある
  77. 77. 7-4. id属性やclass属性の役割分離 ! <style> #sample {} </style> ! <div id="sample">sampleを一意に定義</div> ! <a href="#sample">sample</a> ! <script> $('#sample'); </script>
  78. 78. 7-4. id属性やclass属性の役割分離 この例では、 「sample」idにかかる役割が CSS、JS、idアンカーにまたがり、 id「sample」を変更した場合の影響範囲が大きい ! このようなコードは、 運用コストの上昇とバグのリスクを招く
  79. 79. 7-4. id属性やclass属性の役割分離 ! <style> #sample {} </style> ! <div id="sample js-sample link-sample">役割毎に sample、js-sample、link-sampleのようにidを分離する</div> ! <a href="#link-sample">sample</a> ! <script> $('#js-sample'); </script>
  80. 80. 7-4. id属性やclass属性の役割分離 上記はJSセレクタとアンカー用のidに それぞれ命名規則「js-」「link-」を付与した例 ! 「sample」、 「js-sample」、 「link-sample」の 機能的な役割が分離されており、 修正時に他機能への影響がなく シンプルな運用が可能
  81. 81. 7-4. id属性やclass属性の役割分離 class属性においても、以下の通り分離する ! <style> .sample {} </style> ! <div class="sample js-sample">役割毎にsample、js-sample のようにclassを分離する</div> ! <script> $('.js-sample'); </script>
  82. 82. 7-5. a要素の指定範囲 Sample http://codepen.io/sekiyaeiji/pen/DlHsA?editors=100 どちらにも対応できるようにしておく
  83. 83. 7-6. 本文ブロックの定常テスト 以下を挿入して レイアウトが崩れないことを確認 ! テキストテキスト10テキストテキスト20テキストテキスト3 0テキストテキスト40テキストテキスト50テキストテキスト 60テキストテキスト70テキストテキスト80テキストテキス ト90テキストテキスト00 ! texttext10texttext20texttext30texttext40texttext50textte xt60texttext70texttext80texttext90texttext00
  84. 84. ※ インデントのお話 現在のコード内の集計結果 ! 『Popular Coding Convention on Github』 http://sideeffect.kr/popularconvention#javascript
  85. 85. ※ インデントのお話 さまざまな役割のメンバーが さまざまなエディタを通して 編集を行う ! → より汎用的な可読性が求められている

×