SlideShare a Scribd company logo
HTML5, きちんと。
masataka yakura
こんばんは。
矢倉といいます。
http://www.mitsue.co.jp/
Web 標準 Blog
http://standards.mitsue.co.jp/
Opera
Web標準カリキュラム
http://dev.opera.com/articles/view/801
Web Designing
2009年11月号
(10月17日発売)
「HTML5 & CSS3 で
 Web は変わるのか?」
監修しました →
(11月21日発売)
「プロクリエイターの作例に学ぶ
 XHTML+CSS 達人テクニック」
本日のテーマ:HTML5
まだまだ情報が少ない。
背景や目的についても
ある程度は知ってて欲しい。
HTML5とは?    HTML5のセクション
XHTMLはどうなる? 勧告はいつごろ?
もうひとつの目的    どう使っていくか
HTML5の新機能
HTML5 とは?
「Web プラットフォーム」
その中核をなす仕様。
HTML4 や XHTML1 は
「文書」の作成が目的だった。
HTML5 では新たに
「アプリケーション」が加わる。
これまでのあゆみ
1998 年 2 月
XML 1.0 が勧告。
W3C は XML への移行を計画。
HTML は段階を経て
XML に移行するプランに。
XHTML 1.0 ― HTML4 を XML 化
XHTML 1.1 ― 機能を細分化
XHTML 2.0 ― 新しく作り直し
2002 年~
ブログが普及しだす。
「XHTML+CSS」が広まる。
ほとんどが text/html
XMLとして使われなかった。
Web アプリが台頭し
今の HTML では機能不足に。
新しい機能の実現に
XML の普及を待つ必要がある?
2004 年 6 月
W3C のワークショップにて
ベンダー「HTML の拡張を!」
W3C「うちではやりませんが
   お好きにどうぞ。」
Apple, Mozilla, Opera
WHATWG を立ち上げる。
ベンダーによって
HTML の拡張が始められた。
ベンダーが関わった仕様は
開発者から評価を得ていく。
2006 年 10 月
Tim Berners-Lee のブログにて
It is necessary to evolve 
HTML incrementally. The 
attempt to get the world to 
switch to XML […] all at once 
didn’t work.
― Tim Berners‐Lee: “Reinventing HTML”
「XML への移行は
 いっせいには進まなかった。」
2007 年 3 月
新 HTML WG 設立。
WHATWG と協力して
HTML5 の策定をスタート。
2009 年 5 月
Google I/O で大プッシュ。
少しずつ実装も進んでいる。
XHTML はどうなる?
XHTML2 WG が
2009 年末で活動終了と発表。
XHTML 2.0 は終了。
でも、XHTML はなくならない。
HTML5 は XML として
扱うことも可能(XHTML5)
HTML5 の HTML 構文でも
「XMLっぽく」書けるように。
<img>   ← 今までの HTML
<img /> ← こっちも OK に!
※ 混在もできます。
というわけで、ご心配なく。
Misunderstanding Markup
http://standards.mitsue.co.jp/resources/mm_comic/
もうひとつの目的
「機能の拡張」もあるけれど
「互換性」も重要なテーマ。
1. ブラウザーの互換性
Web アプリの開発には
JavaScript や DOM が不可欠。
クロスブラウザー対応は厄介。
互換性に問題がある。
非互換を生む 2 つの「ない」
実装 がない。
→ 対応状況が異なる
仕様 がない。
→ 実装に違いが生まれる
実装はベンダー依存だが
仕様は定義して対応できる。
HTML5 では
詳細な処理規則を定義。
2. 既存の実装との互換性
今のブラウザーやサイトとも
互換性をある程度は保つ。
大きな変更はできないが
今の環境を捨てずに済む。
互換性を持つことで
Webを段階的に進化させられる。
HTML5 の新機能
APIの追加や
マークアップの拡張など。
<canvas>
スクリプトから画像を扱う。
応用はさまざま。
Bespin
https://bespin.mozilla.com/
<canvas> で作られたエディタ。
Chrome Experiments
http://www.chromeexperiments.com/
最新技術のショーケース。
<video> & <audio>
<img> みたく、簡単に
動画・音声を扱えるように。
<video src=“intro_html5.vid”>
   <a …> ダウンロード </a>
</video>
プラグインじゃないので
CSS や SVG と組み合わせが可能。
マークアップ
マークアップにも
数多くの拡張や変更が。
<canvas> <audio> <video> <header>
<footer> <section> <article> <nav>
<aside> <hgroup> <figure> <details>
<datalist> <meter> <progress>
<time> <mark> <ruby> etc...
よく使われる class/id を
要素として採用する。
<div id=“header”>
→ <header>

<div class=“section”>
→ <section>
定型句はよりシンプルに。
<!DOCTYPE html>
<meta charset=“UTF-8”>
古いブラウザーでも機能する。
フォームの拡張も。
<input type=text ...>
<input type=password ...>
<input   type=email ...>
<input   type=range ...>
<input   type=color ...>
<input   type=datetime ...>
...
名   前 (必須):

メール (必須):
<input type=“text” ... required>
<input type=“email” ... required>
サイト内検索:   キーワードを入力
<input type=“search”
   placeholder=“キーワードを入力”>
HTML5 のセクション
文書構造をより明示的に表せる。
<section>
章や節などの、ひとまとまり
<section>
 <h3> section 要素 </h3>
 <p> 章や節などを表す。</p>
 ...
</section>

<section>
 <h3> nav 要素 </h3>
 <p> 主要なナビゲーションを表す。</p>
 ...
</section>
<section>
 <h3> article 要素 </h3>
 <p> 自己完結するセクションを表す。</p>

 <section>
  <h4> サンプル </h4>
  ...
 </section>

</section>
<nav>
主要なナビゲーション
<nav class=“global”>
 <ul>
  <li> <a ...> ホーム </a>
  <li> <a ...> お知らせ </a>
  <li> <a ...> HTML5 Niteって? </a>
  <li> <a ...> これまでのNite </a>
  <li> <a ...> お問い合わせ </a>
 </ul>
</nav>
UA が <nav> を利用することで
アクセシビリティも高まる?
<article>
記事など、自己完結するセクション
<article class=“entry” id=“vol40”>

 <h2> CSS Nite in Ginza, Vol. 40 </h2>
 <p> 4周年記念となるVol.40では… </p>

 <section>
    <h3> 事前登録について </h3>
    ...
 </section>
 ...
</article>
フィードの <item> や
<entry> などをイメージ。
<aside>
補足的な情報や、サイドバー
<section>
 <h2> nav 要素 </h2>
 <p> 主要なナビゲーションを表します。 </p>

 <aside>
  <p> 海外では「navi」よりも
      「nav」の方が多いみたいです。</p>
 </aside>

</section>
<header> ... </header>
<div class=wrap>
 <div class=main>
   ...
 </div>

 <aside class=sidebar>
   ...
 </aside>
</div>
<footer> ... </footer>
セクションと見出しから
アウトラインができる。
<article>
   <h1> HTML5 のセクション </h1>
   <nav> ... </nav>
   ...
   <section>
      <h2> nav 要素 </h2>
      ...
      <aside>
         <h3>「navi」ではなく「nav」</h3>
         ...
      </aside>
      ...
   </section>
...
HTML5 のセクション
 (見出しなしの目次)
 section 要素
 nav 要素
  「navi」ではなく「nav」
 article 要素
 aside 要素
見出しだけでも
アウトラインはできる。
<h1> HTML5 のセクション </h1>

<h2> section 要素 </h2>

<h2> nav 要素 </h2>

<h3>「navi」ではなく「nav」</h3>

<h2> article 要素 </h2>

...
HTML5 のセクション
 section 要素
 nav 要素
  「navi」ではなく「nav」
 article 要素
 aside 要素
注意!
使い方を間違えると
アウトラインが壊れてしまう。
特に <section> は気をつけて。
<article class=“entry”>
 <header>
   <h2> タイトル </h2>
 </header>

 <section class=“body”>
  <p> 本文 </p>
  <p> テキストテキスト </p>
 </section>

 <footer> ... </footer>
</article>
<header id=logo>
 <section>
   <h1> <img src=logo ...> </h1>
 </section>
</header>
<section id=wrapper>
 <section id=main>
    <article>
     <section>
       <header> ... </header>
       ...
     </section>
    </article>
 </section>
 ...
</section>
セクションは意味的なもの。
アウトラインを意識して。
レイアウト目的なら <div> で。
勧告はいつごろ?
「2010 年 9 月」とある。
でも、むりです。
「勧告」とは?
仕様がすべて実装され
すぐに使える状態。
実装が終わるのは?
「2022 年」と……
「使えないじゃん!」
そんなことはないです。
たとえば、CSS 2.1 は
まだ「勧告候補」です。
勧告されていませんが
広く使われてます。
実装されている機能から
使っていけばいい。
実装の本格的なスタートは
「勧告候補」になった時。
2012 年あたりになる?
実装状況を知るには?
1. 開発者向けサイト
Mozilla Developer Center
https://developer.mozilla.org/ja
Safari Dev Center
http://developer.apple.com/safari/
2. 仕様書のステータス表示
どう使っていくか
「実装されてる機能から使え」
とは言ったものの……
対応しないブラウザーは
どう対処すればよいのか?
1. JavaScript で対処
ExplorerCanvas
http://excanvas.sourceforge.net/
IE に <canvas> を。
Modernizr
http://www.modernizr.com/
対応状況をチェックする。
classもつけてくれたりする。
2. 対応度合いにあわせて利用
最低限なものは、全ての環境で。
できる子には、高機能なものを。
Progressive Enhancement
って言われてるやつです。
placeholder 属性
無くても不都合はない。
難しいことは確か。
HTML5 や CSS3 は
勧告までとても時間がかかる。
今までと異なる考え方で
取り組んでいく必要がある。
今は何をすれば?
実装も出てきたけれど
仕様はまだまだ策定中。
「<article> と <section> を
 区別する必要はあるのか。」
「<section> の誤用が多い。
 いっそのこと削除しては?」
仕様がドラスティックに
変更される可能性も……
使う際には、リスクの認識を。
おわりに
「情報が少ない」といいました。
みんなが使っていく仕様
情報はみんなで共有したい。
調べたことをまとめて
情報を増やしていって欲しい。
ありがとうございました。
Contact:
yakura-masataka@mitsue.co.jp

More Related Content

What's hot

Cesiumマニアックス― Revenge ―
Cesiumマニアックス― Revenge ―Cesiumマニアックス― Revenge ―
Cesiumマニアックス― Revenge ―
Ryousuke Wayama
 
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDayマイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
都元ダイスケ Miyamoto
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 
すごい配列楽しく学ぼう
すごい配列楽しく学ぼうすごい配列楽しく学ぼう
すごい配列楽しく学ぼう
xenophobia__
 
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのかC#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
Yoshifumi Kawai
 
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターンFluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
Kentaro Yoshida
 
Marp Tutorial
Marp TutorialMarp Tutorial
Marp Tutorial
Rui Watanabe
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
 
UXにもの申す (黒須正明さん)
UXにもの申す (黒須正明さん)UXにもの申す (黒須正明さん)
UXにもの申す (黒須正明さん)
DevLOVE
 
kintone & AWSサーバレスアーキテクチャのベストプラクティス
kintone & AWSサーバレスアーキテクチャのベストプラクティスkintone & AWSサーバレスアーキテクチャのベストプラクティス
kintone & AWSサーバレスアーキテクチャのベストプラクティス
JOYZO
 
Tune Up AWS Lambda
Tune Up AWS LambdaTune Up AWS Lambda
Tune Up AWS Lambda
Keisuke Nishitani
 
自動テスト知識体系TABOKのご紹介
自動テスト知識体系TABOKのご紹介自動テスト知識体系TABOKのご紹介
自動テスト知識体系TABOKのご紹介
Shinsuke Matsuki
 
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
 
WayOfNoTrouble.pptx
WayOfNoTrouble.pptxWayOfNoTrouble.pptx
WayOfNoTrouble.pptx
Daisuke Yamazaki
 
Cesiumを動かしてみよう
Cesiumを動かしてみようCesiumを動かしてみよう
Cesiumを動かしてみよう
Kazutaka ishizaki
 
Linked Open Data(LOD)を用いた オープンデータの活用事例と今後の展望
Linked Open Data(LOD)を用いたオープンデータの活用事例と今後の展望Linked Open Data(LOD)を用いたオープンデータの活用事例と今後の展望
Linked Open Data(LOD)を用いた オープンデータの活用事例と今後の展望
Kouji Kozaki
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Yoshiki Hayama
 
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
 
Embulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loaderEmbulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loader
Sadayuki Furuhashi
 

What's hot (20)

Cesiumマニアックス― Revenge ―
Cesiumマニアックス― Revenge ―Cesiumマニアックス― Revenge ―
Cesiumマニアックス― Revenge ―
 
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDayマイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
すごい配列楽しく学ぼう
すごい配列楽しく学ぼうすごい配列楽しく学ぼう
すごい配列楽しく学ぼう
 
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのかC#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
 
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターンFluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
 
Marp Tutorial
Marp TutorialMarp Tutorial
Marp Tutorial
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
 
UXにもの申す (黒須正明さん)
UXにもの申す (黒須正明さん)UXにもの申す (黒須正明さん)
UXにもの申す (黒須正明さん)
 
kintone & AWSサーバレスアーキテクチャのベストプラクティス
kintone & AWSサーバレスアーキテクチャのベストプラクティスkintone & AWSサーバレスアーキテクチャのベストプラクティス
kintone & AWSサーバレスアーキテクチャのベストプラクティス
 
Tune Up AWS Lambda
Tune Up AWS LambdaTune Up AWS Lambda
Tune Up AWS Lambda
 
自動テスト知識体系TABOKのご紹介
自動テスト知識体系TABOKのご紹介自動テスト知識体系TABOKのご紹介
自動テスト知識体系TABOKのご紹介
 
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
 
WayOfNoTrouble.pptx
WayOfNoTrouble.pptxWayOfNoTrouble.pptx
WayOfNoTrouble.pptx
 
Cesiumを動かしてみよう
Cesiumを動かしてみようCesiumを動かしてみよう
Cesiumを動かしてみよう
 
Linked Open Data(LOD)を用いた オープンデータの活用事例と今後の展望
Linked Open Data(LOD)を用いたオープンデータの活用事例と今後の展望Linked Open Data(LOD)を用いたオープンデータの活用事例と今後の展望
Linked Open Data(LOD)を用いた オープンデータの活用事例と今後の展望
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
 
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
Embulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loaderEmbulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loader
 

Viewers also liked

今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
 
HTML5 入門
HTML5 入門HTML5 入門
HTML5 入門
NOAN
 
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
Shinji Semba
 
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
 
Sass 超入門
Sass 超入門Sass 超入門
Sass 超入門
Michinari Odajima
 
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのかデータビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
清水 正行
 
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
 
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
 

Viewers also liked (18)

今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
 
HTML5 入門
HTML5 入門HTML5 入門
HTML5 入門
 
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
【14-E-5】現場で役立つUX ~エンタープライズUXの現在とこれから~
 
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
 
Sass 超入門
Sass 超入門Sass 超入門
Sass 超入門
 
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのかデータビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
 
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
 
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 

Similar to HTML5, きちんと。

GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Muyuu Fujita
 
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Relations Team
 
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
Shuyo Nakatani
 
HTML5 in Firefox4
HTML5 in Firefox4HTML5 in Firefox4
HTML5 in Firefox4
dynamis
 
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩Atsushi Tadokoro
 
HTML5 for IA
HTML5 for IAHTML5 for IA
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolistShinichiro Kumeuchi
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Hideki Hashizume
 
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiPinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoyatamotsu toyoda
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
youku
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
 

Similar to HTML5, きちんと。 (20)

GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestW
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
 
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
 
HTML5 in Firefox4
HTML5 in Firefox4HTML5 in Firefox4
HTML5 in Firefox4
 
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
 
HTML5 for IA
HTML5 for IAHTML5 for IA
HTML5 for IA
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
 
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiPinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 

Recently uploaded

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 

Recently uploaded (8)

LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 

HTML5, きちんと。