Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5を用いた   セマンティックな文書作成               株式会社サイバード                   大曽根圭輔12年12月14日金曜日
自己紹介    • 氏名        大曽根圭輔    • 経歴        茨城県に生まれる        筑波大学大学院を卒業        2012年度に新卒として(株)サイバードに入社12年12月14日金曜日
自己紹介    • 学生時代の研究         HAI、人工知能、感性工学、人間中心システム    • Twitter         @dr_paradi    • Facebook         本名12年12月14日金曜日
現在の業務               • スマホ向けのWebサイトを作ったり               • iOSのアプリ作ったり               • Facebookアプリ作ったり。。。12年12月14日金曜日
現在の業務               •               業務でもHTML5!               -> スマートフォン対応12年12月14日金曜日
はじめての外部発表!12年12月14日金曜日
発表の流れ               • 自己紹介               • HTML5とは?               • セマンティックとは               • テキストレベルの意味付け               •...
発表の流れ               • 自己紹介               • HTML5とは?               • セマンティックとは               • テキストレベルの意味付け               •...
ここで一旦質問                         http://www.flickr.com/12年12月14日金曜日
HTML5といえば?12年12月14日金曜日
ググってみた12年12月14日金曜日
12年12月14日金曜日
12年12月14日金曜日
12年12月14日金曜日
12年12月14日金曜日
HTML5とは12年12月14日金曜日
もっとセマンティックな文書を                   もっとリッチなWebアプリを               =   もっと標準化された技術で                   もっと扱いやすく                 ...
もっとセマンティックな文書を                   もっとリッチなWebアプリを               =   もっと標準化された技術で                   もっと扱いやすく                 ...
もっとセマンティックな文書を!12年12月14日金曜日
発表の流れ               • 自己紹介               • HTML5とは?               • セマンティックとは               • テキストレベルの意味付け               •...
セマンティック   データの意味, 意味規則   つまり・・・   HTML5では、文書が持つデータの意味をよ   り明確に表すことができるようになる12年12月14日金曜日
セマンティック   HTML5では、文書が持つデータの意味を   より明確に表すことができるようになる   逆に言うと       「文書の中身」を理解しないといけない       「表現の方法」を理解しないといけない             ...
今まで(HTML4)                    <div>ヘッダー</div>           <div>       <div>           <div>          ナビゲーシ                  ...
これから(HTML5)                        <header>ヘッダー</header>                <nav>        <article>       <aside>              ...
これから(HTML5)                        <header>ヘッダー</header>                <nav>        <article>       <aside>              ...
これから(HTML5)                        <header>ヘッダー</header>                <nav>                          <article>          ...
メインコンテンツを                  これから(HTML5)               機械的に抽出できる                    =                    <header>ヘッダー</heade...
メインコンテンツを                  これから(HTML5)               機械的に抽出できる                                音声読み上げ機能                    ...
リッチな表現に注目がいきがちな      (広義の)HTML512年12月14日金曜日
見た目も重要(HTML5+CSS3)12年12月14日金曜日
「セマンティック」               にマークアップすることも                大事にしませんか?12年12月14日金曜日
発表の流れ               • 自己紹介               • HTML5とは?               • セマンティックとは               • テキストレベルの意味付け               •...
HTML (というかWorld Wide Web)は      もともと学術的な情報交換のために      開発された                           http://www.flickr.com/12年12月14日金曜日
環境に左右されることなく文章の内容を  読者に「正しく」伝えることが重要12年12月14日金曜日
テキストの意味を正しく伝える                http://www.flickr.com/12年12月14日金曜日
いくつかを紹介               • <em>               • <b>               • <cite>               • <q>               • <br>12年12月14日金曜日
<em>          ・emphasisの略          ・そのコンテンツの強調         ・重要であることを表現したい場合12年12月14日金曜日
突然ですが12年12月14日金曜日
剛力彩芽はかわいい12年12月14日金曜日
<em>剛力彩芽</em>はかわいい    剛力彩芽は<em>かわいい</em>12年12月14日金曜日
文章の内容(意図)を正しく伝えられる12年12月14日金曜日
<b>        ・通常の文章や言葉との区別を表す        ・記事のリード文        ・レビューの中での商品名        ・文章内のキーワード12年12月14日金曜日
剛力彩芽の写真集    <b>『 AYAME GOURIKI 』</b>    が発売しました。12年12月14日金曜日
<q>   ・quotationの略   ・他のソースから引用された短文   ・ダブルクォーテーションが自動的に表示12年12月14日金曜日
<cite>   ・作品(小説、新聞、ゲーム等)のタイトル   ・人の名前をcite要素で囲んではいけない   ・人の名前を装飾する場合span要素で囲み   CSSを使用12年12月14日金曜日
私は、ノルウェイの森に出てくる  春の熊くらいに好きだよ  という表現が好きです12年12月14日金曜日
私は、ノルウェイの森に出てくる  春の熊くらいに好きだよ  という表現が好きです12年12月14日金曜日
<p>   私は、   <cite> ノルウェイの森 </cite>  に出てくる   <q> 春の熊くらいに好きだよ </q>  という表現が好きです</p>12年12月14日金曜日
間違った例12年12月14日金曜日
<p>   私は,   <cite> スティーブ・ジョブズ </cite> の   <q> STAY HUNGRY. STAY FOOLISH. </q>   という言葉が好きです。</p>12年12月14日金曜日
<p>   私は,   <cite> スティーブ・ジョブズ </cite> の   <q> STAY HUNGRY. STAY FOOLISH. </q>   という言葉が好きです。</p>12年12月14日金曜日
<br>         ・breakの略         ・改行を表す12年12月14日金曜日
見た目を整えるためには使わない12年12月14日金曜日
どういうときに使うかというと12年12月14日金曜日
<p>                ちはやぶる<br>               ����神代も聞かず<br>               ����龍田川<br>               ����からくれなゐに<br>�        ...
正しくマークアップすれば文章の内容を正しく伝えることができるように                         http://www.flickr.com/12年12月14日金曜日
発表の流れ               • 自己紹介               • HTML5とは?               • セマンティックとは               • テキストレベルの意味付け               •...
articleとsectionの      違いって?12年12月14日金曜日
HTML5                        <article>,               今まで     <section>,               <div>     <nav>,                   ...
<article>    文書やサイトの独立して完結する部分    内容だけ抜き出しても違和感がないもの   ブログやニュースの記事など12年12月14日金曜日
<section>      文書内の章や節を表す     意味や機能のひとまとまりの区切り12年12月14日金曜日
• 或阿呆の一生  芥川龍之介  一 時代   それは或本屋の二階だつた。二十歳の彼は書棚にかけた  西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう  云ふ彼等を見渡してゐた。……  二  母   狂人たちは皆同じやうに鼠色の着物を着せら...
• 或阿呆の一生   <article>  芥川龍之介  一 時代   それは或本屋の二階だつた。二十歳の彼は書棚にかけた  西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう  云ふ彼等を見渡してゐた。……  二  母   狂人たちは皆同じ...
• 或阿呆の一生   <article>  芥川龍之介  一 時代             <section>   それは或本屋の二階だつた。二十歳の彼は書棚にかけた  西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう  云ふ彼等を見渡して...
• 一 時代   それは或本屋の二階だつた。二十歳の彼は書棚にかけた西  洋風の梯子に登り、新らしい本を探してゐた。モオパスサ  ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、  トルストイ、……   そのうちに日の暮は迫り出した。しか...
• 一 時代      <section>   それは或本屋の二階だつた。二十歳の彼は書棚にかけた西  洋風の梯子に登り、新らしい本を探してゐた。モオパスサ  ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、  トルストイ、……   その...
• 一 時代      <section>                      <p>   それは或本屋の二階だつた。二十歳の彼は書棚にかけた西  洋風の梯子に登り、新らしい本を探してゐた。モオパスサ  ン、ボオドレエル、ストリントベリイ...
あくまで一例               人の主観による場合も12年12月14日金曜日
• 一 時代 それは或本屋の二階だつた。二十歳の彼は書       棚にかけた西洋風の梯子に登り、新らしい本を探してゐ       た。モオパスサン、ボオドレエル、ストリントベリイ、       イブセン、シヨウ、トルストイ、……そのうちに日の...
• 一 時代      <section>                      <p>   それは或本屋の二階だつた。二十歳の彼は書棚にかけた西  洋風の梯子に登り、新らしい本を探してゐた。モオパスサ  ン、ボオドレエル、ストリントベリイ...
機械(ブラウザ)からみてわかりやすい     ソースコードをみれば人間もわかりやすい12年12月14日金曜日
12年12月14日金曜日
<article>       • 河童・或阿呆の一生    大導寺信輔の半生    玄鶴山房    蜃気楼    河童    或阿呆の一生    歯車12年12月14日金曜日
<article>       • 河童・或阿呆の一生    大導寺信輔の半生    玄鶴山房    蜃気楼    河童    或阿呆の一生    歯車12年12月14日金曜日
<article>       • 河童・或阿呆の一生    大導寺信輔の半生            <article>    玄鶴山房                <article>    蜃気楼                 <arti...
きちんと構造化するとわかりやすい12年12月14日金曜日
発表の流れ               • 自己紹介               • HTML5とは?               • セマンティックとは               • アウトラインの構造化               • テ...
もっとセマンティックな文書を                   もっとリッチなWebアプリを               =   もっと標準化された技術で                   もっと扱いやすく                 ...
もっとセマンティックな文書を                   もっとリッチなWebアプリを               =   もっと標準化された技術で                   もっと扱いやすく                 ...
もっとセマンティックな文書を!12年12月14日金曜日
正しくマークアップすれば文章の内容を正しく伝えることができるように                         http://www.flickr.com/12年12月14日金曜日
「セマンティック」               にマークアップすることも                大事にしませんか?12年12月14日金曜日
ご清聴ありがとうございました。12年12月14日金曜日
参考文献               • HTML5マークアップガイドブック               • html5.jp               • 理系発想の文章術               • 20歳の自分に受けさせたい文章講座...
Upcoming SlideShare
Loading in …5
×

HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜

2,277 views

Published on

2012年12月13日に開催された【TechBuzz】第8回HTML5開発技術勉強会での発表資料です。

  • Be the first to comment

HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜

  1. 1. HTML5を用いた セマンティックな文書作成 株式会社サイバード 大曽根圭輔12年12月14日金曜日
  2. 2. 自己紹介 • 氏名 大曽根圭輔 • 経歴 茨城県に生まれる 筑波大学大学院を卒業 2012年度に新卒として(株)サイバードに入社12年12月14日金曜日
  3. 3. 自己紹介 • 学生時代の研究 HAI、人工知能、感性工学、人間中心システム • Twitter @dr_paradi • Facebook 本名12年12月14日金曜日
  4. 4. 現在の業務 • スマホ向けのWebサイトを作ったり • iOSのアプリ作ったり • Facebookアプリ作ったり。。。12年12月14日金曜日
  5. 5. 現在の業務 • 業務でもHTML5! -> スマートフォン対応12年12月14日金曜日
  6. 6. はじめての外部発表!12年12月14日金曜日
  7. 7. 発表の流れ • 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
  8. 8. 発表の流れ • 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
  9. 9. ここで一旦質問 http://www.flickr.com/12年12月14日金曜日
  10. 10. HTML5といえば?12年12月14日金曜日
  11. 11. ググってみた12年12月14日金曜日
  12. 12. 12年12月14日金曜日
  13. 13. 12年12月14日金曜日
  14. 14. 12年12月14日金曜日
  15. 15. 12年12月14日金曜日
  16. 16. HTML5とは12年12月14日金曜日
  17. 17. もっとセマンティックな文書を もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様12年12月14日金曜日
  18. 18. もっとセマンティックな文書を もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様12年12月14日金曜日
  19. 19. もっとセマンティックな文書を!12年12月14日金曜日
  20. 20. 発表の流れ • 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
  21. 21. セマンティック データの意味, 意味規則 つまり・・・ HTML5では、文書が持つデータの意味をよ り明確に表すことができるようになる12年12月14日金曜日
  22. 22. セマンティック HTML5では、文書が持つデータの意味を より明確に表すことができるようになる 逆に言うと 「文書の中身」を理解しないといけない 「表現の方法」を理解しないといけない ということ12年12月14日金曜日
  23. 23. 今まで(HTML4) <div>ヘッダー</div> <div> <div> <div> ナビゲーシ サイドバー 記事 ョン 広告 </div> </div> </div> <div>フッター</div>12年12月14日金曜日
  24. 24. これから(HTML5) <header>ヘッダー</header> <nav> <article> <aside> ナビゲー サイドバー 記事 ション 広告 </nav> </article> </aside> <footer>フッター</footer>12年12月14日金曜日
  25. 25. これから(HTML5) <header>ヘッダー</header> <nav> <article> <aside> ナビゲー サイドバー 記事 ション 広告 </nav> </article> </aside> <footer>フッター</footer>12年12月14日金曜日
  26. 26. これから(HTML5) <header>ヘッダー</header> <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer>12年12月14日金曜日
  27. 27. メインコンテンツを これから(HTML5) 機械的に抽出できる = <header>ヘッダー</header> SEO対策になる <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer>12年12月14日金曜日
  28. 28. メインコンテンツを これから(HTML5) 機械的に抽出できる 音声読み上げ機能 = <header>ヘッダー</header> SEO対策になる <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer>12年12月14日金曜日
  29. 29. リッチな表現に注目がいきがちな (広義の)HTML512年12月14日金曜日
  30. 30. 見た目も重要(HTML5+CSS3)12年12月14日金曜日
  31. 31. 「セマンティック」 にマークアップすることも 大事にしませんか?12年12月14日金曜日
  32. 32. 発表の流れ • 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
  33. 33. HTML (というかWorld Wide Web)は もともと学術的な情報交換のために 開発された http://www.flickr.com/12年12月14日金曜日
  34. 34. 環境に左右されることなく文章の内容を 読者に「正しく」伝えることが重要12年12月14日金曜日
  35. 35. テキストの意味を正しく伝える http://www.flickr.com/12年12月14日金曜日
  36. 36. いくつかを紹介 • <em> • <b> • <cite> • <q> • <br>12年12月14日金曜日
  37. 37. <em> ・emphasisの略 ・そのコンテンツの強調 ・重要であることを表現したい場合12年12月14日金曜日
  38. 38. 突然ですが12年12月14日金曜日
  39. 39. 剛力彩芽はかわいい12年12月14日金曜日
  40. 40. <em>剛力彩芽</em>はかわいい 剛力彩芽は<em>かわいい</em>12年12月14日金曜日
  41. 41. 文章の内容(意図)を正しく伝えられる12年12月14日金曜日
  42. 42. <b> ・通常の文章や言葉との区別を表す ・記事のリード文 ・レビューの中での商品名 ・文章内のキーワード12年12月14日金曜日
  43. 43. 剛力彩芽の写真集 <b>『 AYAME GOURIKI 』</b> が発売しました。12年12月14日金曜日
  44. 44. <q> ・quotationの略 ・他のソースから引用された短文 ・ダブルクォーテーションが自動的に表示12年12月14日金曜日
  45. 45. <cite> ・作品(小説、新聞、ゲーム等)のタイトル ・人の名前をcite要素で囲んではいけない ・人の名前を装飾する場合span要素で囲み CSSを使用12年12月14日金曜日
  46. 46. 私は、ノルウェイの森に出てくる 春の熊くらいに好きだよ という表現が好きです12年12月14日金曜日
  47. 47. 私は、ノルウェイの森に出てくる 春の熊くらいに好きだよ という表現が好きです12年12月14日金曜日
  48. 48. <p> 私は、 <cite> ノルウェイの森 </cite> に出てくる <q> 春の熊くらいに好きだよ </q> という表現が好きです</p>12年12月14日金曜日
  49. 49. 間違った例12年12月14日金曜日
  50. 50. <p> 私は, <cite> スティーブ・ジョブズ </cite> の <q> STAY HUNGRY. STAY FOOLISH. </q> という言葉が好きです。</p>12年12月14日金曜日
  51. 51. <p> 私は, <cite> スティーブ・ジョブズ </cite> の <q> STAY HUNGRY. STAY FOOLISH. </q> という言葉が好きです。</p>12年12月14日金曜日
  52. 52. <br> ・breakの略 ・改行を表す12年12月14日金曜日
  53. 53. 見た目を整えるためには使わない12年12月14日金曜日
  54. 54. どういうときに使うかというと12年12月14日金曜日
  55. 55. <p>  ちはやぶる<br> ����神代も聞かず<br> ����龍田川<br> ����からくれなゐに<br>� ����水くくるとは<br> </p>12年12月14日金曜日
  56. 56. 正しくマークアップすれば文章の内容を正しく伝えることができるように http://www.flickr.com/12年12月14日金曜日
  57. 57. 発表の流れ • 自己紹介 • HTML5とは? • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
  58. 58. articleとsectionの 違いって?12年12月14日金曜日
  59. 59. HTML5 <article>, 今まで <section>, <div> <nav>, <header>, <footer>...12年12月14日金曜日
  60. 60. <article> 文書やサイトの独立して完結する部分 内容だけ抜き出しても違和感がないもの ブログやニュースの記事など12年12月14日金曜日
  61. 61. <section> 文書内の章や節を表す 意味や機能のひとまとまりの区切り12年12月14日金曜日
  62. 62. • 或阿呆の一生 芥川龍之介 一 時代  それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二  母  狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 <中略>しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。12年12月14日金曜日
  63. 63. • 或阿呆の一生 <article> 芥川龍之介 一 時代  それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二  母  狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 <中略>しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。12年12月14日金曜日
  64. 64. • 或阿呆の一生 <article> 芥川龍之介 一 時代 <section>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、<中略>彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二  母 <section>  狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 <中略>しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。12年12月14日金曜日
  65. 65. • 一 時代  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、……  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
  66. 66. • 一 時代 <section>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、……  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
  67. 67. • 一 時代 <section> <p>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… <p>  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
  68. 68. あくまで一例 人の主観による場合も12年12月14日金曜日
  69. 69. • 一 時代 それは或本屋の二階だつた。二十歳の彼は書 棚にかけた西洋風の梯子に登り、新らしい本を探してゐ た。モオパスサン、ボオドレエル、ストリントベリイ、 イブセン、シヨウ、トルストイ、……そのうちに日の暮 は迫り出した。しかし彼は熱心に本の背文字を読みつづ けた。そこに並んでゐるのは本といふよりも寧ろ世紀末 それ自身だつた。ニイチエ、ヴエルレエン、ゴンクウル 兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
  70. 70. • 一 時代 <section> <p>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… <p>  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
  71. 71. 機械(ブラウザ)からみてわかりやすい ソースコードをみれば人間もわかりやすい12年12月14日金曜日
  72. 72. 12年12月14日金曜日
  73. 73. <article> • 河童・或阿呆の一生 大導寺信輔の半生 玄鶴山房 蜃気楼 河童 或阿呆の一生 歯車12年12月14日金曜日
  74. 74. <article> • 河童・或阿呆の一生 大導寺信輔の半生 玄鶴山房 蜃気楼 河童 或阿呆の一生 歯車12年12月14日金曜日
  75. 75. <article> • 河童・或阿呆の一生 大導寺信輔の半生 <article> 玄鶴山房 <article> 蜃気楼 <article> 河童 <article> 或阿呆の一生 <article> 歯車 <article>12年12月14日金曜日
  76. 76. きちんと構造化するとわかりやすい12年12月14日金曜日
  77. 77. 発表の流れ • 自己紹介 • HTML5とは? • セマンティックとは • アウトラインの構造化 • テキストレベルの意味付け • まとめ12年12月14日金曜日
  78. 78. もっとセマンティックな文書を もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様12年12月14日金曜日
  79. 79. もっとセマンティックな文書を もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性, ユニバーサル・アクセス) これらを実現するための仕様12年12月14日金曜日
  80. 80. もっとセマンティックな文書を!12年12月14日金曜日
  81. 81. 正しくマークアップすれば文章の内容を正しく伝えることができるように http://www.flickr.com/12年12月14日金曜日
  82. 82. 「セマンティック」 にマークアップすることも 大事にしませんか?12年12月14日金曜日
  83. 83. ご清聴ありがとうございました。12年12月14日金曜日
  84. 84. 参考文献 • HTML5マークアップガイドブック • html5.jp • 理系発想の文章術 • 20歳の自分に受けさせたい文章講座12年12月14日金曜日

×