Movatterモバイル変換

[0]ホーム
URL:

圭輔 大曽根, profile picture
Uploaded by圭輔 大曽根
1,910 views

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

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

Embed presentation

Download to read offline
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とは？ • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
発表の流れ • 自己紹介 • HTML5とは？ • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
ここで一旦質問 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アプリを = もっと標準化された技術で もっと扱いやすく （互換性, 有用性, 相互運用性, ユニバーサル・アクセス） これらを実現するための仕様12年12月14日金曜日
もっとセマンティックな文書を もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく （互換性, 有用性, 相互運用性, ユニバーサル・アクセス） これらを実現するための仕様12年12月14日金曜日
もっとセマンティックな文書を！12年12月14日金曜日
発表の流れ • 自己紹介 • HTML5とは？ • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
セマンティック データの意味, 意味規則 つまり・・・ HTML5では、文書が持つデータの意味をよ り明確に表すことができるようになる12年12月14日金曜日
セマンティック HTML5では、文書が持つデータの意味を より明確に表すことができるようになる 逆に言うと 「文書の中身」を理解しないといけない 「表現の方法」を理解しないといけない ということ12年12月14日金曜日
今まで(HTML4) <div>ヘッダー</div> <div> <div> <div> ナビゲーシ サイドバー 記事 ョン 広告 </div> </div> </div> <div>フッター</div>12年12月14日金曜日
これから(HTML5) <header>ヘッダー</header> <nav> <article> <aside> ナビゲー サイドバー 記事 ション 広告 </nav> </article> </aside> <footer>フッター</footer>12年12月14日金曜日
これから(HTML5) <header>ヘッダー</header> <nav> <article> <aside> ナビゲー サイドバー 記事 ション 広告 </nav> </article> </aside> <footer>フッター</footer>12年12月14日金曜日
これから(HTML5) <header>ヘッダー</header> <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer>12年12月14日金曜日
メインコンテンツを これから(HTML5) 機械的に抽出できる ＝ <header>ヘッダー</header> SEO対策になる <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer>12年12月14日金曜日
メインコンテンツを これから(HTML5) 機械的に抽出できる 音声読み上げ機能 ＝ <header>ヘッダー</header> SEO対策になる <nav> <article> <aside> ナビゲー ション 記事 サイドバー 広告 </nav> </aside> </article> <footer>フッター</footer>12年12月14日金曜日
リッチな表現に注目がいきがちな (広義の)HTML512年12月14日金曜日
見た目も重要(HTML5+CSS3)12年12月14日金曜日
「セマンティック」 にマークアップすることも 大事にしませんか？12年12月14日金曜日
発表の流れ • 自己紹介 • HTML5とは？ • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
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>� ����水くくるとは<br> </p>12年12月14日金曜日
正しくマークアップすれば文章の内容を正しく伝えることができるように http://www.flickr.com/12年12月14日金曜日
発表の流れ • 自己紹介 • HTML5とは？ • セマンティックとは • テキストレベルの意味付け • アウトラインの構造化 • まとめ12年12月14日金曜日
articleとsectionの 違いって？12年12月14日金曜日
HTML5 <article>, 今まで <section>, <div> <nav>, <header>, <footer>...12年12月14日金曜日
<article> 文書やサイトの独立して完結する部分 内容だけ抜き出しても違和感がないもの ブログやニュースの記事など12年12月14日金曜日
<section> 文書内の章や節を表す 意味や機能のひとまとまりの区切り12年12月14日金曜日
• 或阿呆の一生 芥川龍之介 一 時代  それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、＜中略＞彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二  母  狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 ＜中略＞しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。12年12月14日金曜日
• 或阿呆の一生 <article> 芥川龍之介 一 時代  それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、＜中略＞彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二  母  狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 ＜中略＞しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。12年12月14日金曜日
• 或阿呆の一生 <article> 芥川龍之介 一 時代 <section>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた 西洋風の梯子に登り、＜中略＞彼は暫く梯子の上からかう 云ふ彼等を見渡してゐた。…… 二  母 <section>  狂人たちは皆同じやうに鼠色の着物を着せられてゐた。 ＜中略＞しかしそれは薄い苔をまだらにぼんやりと白しら ませてゐた。12年12月14日金曜日
• 一 時代  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、……  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
• 一 時代 <section>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、……  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
• 一 時代 <section> <p>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… <p>  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
あくまで一例 人の主観による場合も12年12月14日金曜日
• 一 時代 それは或本屋の二階だつた。二十歳の彼は書 棚にかけた西洋風の梯子に登り、新らしい本を探してゐ た。モオパスサン、ボオドレエル、ストリントベリイ、 イブセン、シヨウ、トルストイ、……そのうちに日の暮 は迫り出した。しかし彼は熱心に本の背文字を読みつづ けた。そこに並んでゐるのは本といふよりも寧ろ世紀末 それ自身だつた。ニイチエ、ヴエルレエン、ゴンクウル 兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
• 一 時代 <section> <p>  それは或本屋の二階だつた。二十歳の彼は書棚にかけた西 洋風の梯子に登り、新らしい本を探してゐた。モオパスサ ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、 トルストイ、…… <p>  そのうちに日の暮は迫り出した。しかし彼は熱心に本の背 文字を読みつづけた。そこに並んでゐるのは本といふよりも 寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ ル、……12年12月14日金曜日
機械(ブラウザ)からみてわかりやすい ソースコードをみれば人間もわかりやすい12年12月14日金曜日
12年12月14日金曜日
<article> • 河童・或阿呆の一生 大導寺信輔の半生 玄鶴山房 蜃気楼 河童 或阿呆の一生 歯車12年12月14日金曜日
<article> • 河童・或阿呆の一生 大導寺信輔の半生 玄鶴山房 蜃気楼 河童 或阿呆の一生 歯車12年12月14日金曜日
<article> • 河童・或阿呆の一生 大導寺信輔の半生 <article> 玄鶴山房 <article> 蜃気楼 <article> 河童 <article> 或阿呆の一生 <article> 歯車 <article>12年12月14日金曜日
きちんと構造化するとわかりやすい12年12月14日金曜日
発表の流れ • 自己紹介 • HTML5とは？ • セマンティックとは • アウトラインの構造化 • テキストレベルの意味付け • まとめ12年12月14日金曜日
もっとセマンティックな文書を もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく （互換性, 有用性, 相互運用性, ユニバーサル・アクセス） これらを実現するための仕様12年12月14日金曜日
もっとセマンティックな文書を もっとリッチなWebアプリを = もっと標準化された技術で もっと扱いやすく （互換性, 有用性, 相互運用性, ユニバーサル・アクセス） これらを実現するための仕様12年12月14日金曜日
もっとセマンティックな文書を！12年12月14日金曜日
正しくマークアップすれば文章の内容を正しく伝えることができるように http://www.flickr.com/12年12月14日金曜日
「セマンティック」 にマークアップすることも 大事にしませんか？12年12月14日金曜日
ご清聴ありがとうございました。12年12月14日金曜日
参考文献 • HTML5マークアップガイドブック • html5.jp • 理系発想の文章術 • 20歳の自分に受けさせたい文章講座12年12月14日金曜日

Recommended

PDF
HTML5, きちんと。
PDF
HTML/CSS/JS基础
 
PDF
Htmlの書き方入門編
 
PDF
HTML5マークアップの心得と作法
PDF
HTML5 for IA
PDF
Html&cssの書き方入門編
 
PPTX
バレンタイン直前開催Web勉強会
PDF
はじめよう！Visual Studio 2010 で HTML5 プログラミング ～ Internet Explorer 9 のリリースに向けて～
PDF
今からハジメるHTML5マークアップ
PDF
HTML/CSSの基礎
PDF
.インストールをやってみよう
PDF
Html5でword pressテーマを作るよ！
PDF
The return of Mobile5 #mobile5
PDF
GDG Women DevfestW
PDF
130107html5
KEY
HTML5での制作、いつから始める？
PDF
Concentrated HTML5 & Attractive HTML5
PPTX
Webコーディングの基本+α
PDF
今日からはじめるHTML5 ver.2012
PDF
HTML5
PDF
HTML5 in Firefox4
PDF
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
ODP
webを飾る技術
PDF
マークアップ講座 01b HTML
PDF
Html1
PDF
To write a better HTML
 
PPTX
Html noise reduction
PDF
芸術情報演習デザイン(web) 第2回：HTML入門
PDF
論文紹介@ Gunosyデータマイニング研究会 #97
PDF
マイクロサービスとABテスト

More Related Content

PDF
HTML5, きちんと。
PDF
HTML/CSS/JS基础
 
PDF
Htmlの書き方入門編
 
PDF
HTML5マークアップの心得と作法
PDF
HTML5 for IA
PDF
Html&cssの書き方入門編
 
PPTX
バレンタイン直前開催Web勉強会
PDF
はじめよう！Visual Studio 2010 で HTML5 プログラミング ～ Internet Explorer 9 のリリースに向けて～
HTML5, きちんと。
HTML/CSS/JS基础
 
Htmlの書き方入門編
 
HTML5マークアップの心得と作法
HTML5 for IA
Html&cssの書き方入門編
 
バレンタイン直前開催Web勉強会
はじめよう！Visual Studio 2010 で HTML5 プログラミング ～ Internet Explorer 9 のリリースに向けて～

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

PDF
今からハジメるHTML5マークアップ
PDF
HTML/CSSの基礎
PDF
.インストールをやってみよう
PDF
Html5でword pressテーマを作るよ！
PDF
The return of Mobile5 #mobile5
PDF
GDG Women DevfestW
PDF
130107html5
KEY
HTML5での制作、いつから始める？
PDF
Concentrated HTML5 & Attractive HTML5
PPTX
Webコーディングの基本+α
PDF
今日からはじめるHTML5 ver.2012
PDF
HTML5
PDF
HTML5 in Firefox4
PDF
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
ODP
webを飾る技術
PDF
マークアップ講座 01b HTML
PDF
Html1
PDF
To write a better HTML
 
PPTX
Html noise reduction
PDF
芸術情報演習デザイン(web) 第2回：HTML入門
今からハジメるHTML5マークアップ
HTML/CSSの基礎
.インストールをやってみよう
Html5でword pressテーマを作るよ！
The return of Mobile5 #mobile5
GDG Women DevfestW
130107html5
HTML5での制作、いつから始める？
Concentrated HTML5 & Attractive HTML5
Webコーディングの基本+α
今日からはじめるHTML5 ver.2012
HTML5
HTML5 in Firefox4
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
webを飾る技術
マークアップ講座 01b HTML
Html1
To write a better HTML
 
Html noise reduction
芸術情報演習デザイン(web) 第2回：HTML入門

More from 圭輔 大曽根

PDF
論文紹介@ Gunosyデータマイニング研究会 #97
PDF
マイクロサービスとABテスト
PDF
いまさら聞けない機械学習の評価指標
PDF
Gunosyデータマイニング研究会 #118 これからの強化学習
PDF
第一回チキチキ秋のデータサイエンスアイデアソン＆ハッカソン』開催報告会 アプリ名: 守備視え〜る
PDF
d3jsハンズオン @E2D3ハッカソン
PDF
5分で分かった気になるリーンスタートアップ(用語編)
PDF
2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話」
PDF
記事分類における教師データおよびモデルの管理
PDF
Gunosy における AWS 上での自然言語処理・機械学習の活用事例
PDF
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
PDF
累計DL数3,600万のアプリを成長させ続けるためのピボット
論文紹介@ Gunosyデータマイニング研究会 #97
マイクロサービスとABテスト
いまさら聞けない機械学習の評価指標
Gunosyデータマイニング研究会 #118 これからの強化学習
第一回チキチキ秋のデータサイエンスアイデアソン＆ハッカソン』開催報告会 アプリ名: 守備視え〜る
d3jsハンズオン @E2D3ハッカソン
5分で分かった気になるリーンスタートアップ(用語編)
2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話」
記事分類における教師データおよびモデルの管理
Gunosy における AWS 上での自然言語処理・機械学習の活用事例
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
累計DL数3,600万のアプリを成長させ続けるためのピボット

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

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