<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>marketingblog.jp</title>
	<atom:link href="http://www.marketingblog.jp/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.marketingblog.jp</link>
	<description>世界のインターネット企業の動向とソーシャルメディア、スマートフォン関連のブログ情報サイト</description>
	<lastBuildDate>Wed, 21 Dec 2011 12:37:59 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/feed/" />
		<item>
		<title>【第7回】HTML5とHTML4,XHTMLの違いその6:セクションとアウトライン</title>
		<link>http://www.marketingblog.jp/html5/2011/331/</link>
		<comments>http://www.marketingblog.jp/html5/2011/331/#comments</comments>
		<pubDate>Wed, 21 Dec 2011 12:31:35 +0000</pubDate>
		<dc:creator>寺西 裕紀</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=331</guid>
		<description><![CDATA[HTML5とHTML4,XHTMLの違いについて最後となるこの回ではセクションとアウトラインという概念について説明する。 セクション セクションとは文章の一区分のことである。文章は複数の章から成り、各章はそれぞれ見出しと [...]]]></description>
			<content:encoded><![CDATA[<p>HTML5とHTML4,XHTMLの違いについて最後となるこの回ではセクションとアウトラインという概念について説明する。</p>
<h2 style="margin-top:5px;">セクション</h2>
<p>セクションとは文章の一区分のことである。文章は複数の章から成り、各章はそれぞれ見出しと内容を持つ。各章の内容にはさらに細分化された節という区切りが存在し、章と同様に節もそれぞれが見出しと内容を持つ。このような見出しと内容のひとまとまりをセクションという。本は章という複数のセクションに分かれ、それぞれの章は節というセクションを持っている。本自体が「本」という一つのセクションを成しているとも言える。文章は同じ大きさのセクションの集合が成す階層によって構造化されている。</p>
<pre>
パーフェクトJavaScript
├■Part1　JavaScript~overview
│└1章　JavaScriptの概要
├■Part2　JavaScript言語仕様
│├2章　JavaScriptの基礎
│├3章　JavaScriptの型
│├4章　文、式、演算子
│├5章　変数とオブジェクト
│├6章　関数とクロージャ
│└7章　データ処理
├■Part3　クライアントサイドJavaScript
│├8章　クライアントサイドJavaScriptとHTML
│├9章　DOM
《省略》
</pre>
<p>ウェブページも例外ではない。文書量や見出しの数の違いはあるが、多かれ少なかれHTML文書も階層を持つ。</p>
<p>旧来のHTMLでは、文書を階層化するために見出しの大きさに応じてh1～h6要素が使われてきた。</p>
<pre>
&lt;h1&gt;表題&lt;/h1&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;h2&gt;第1章&lt;/h2&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;h3&gt;1.1.節&lt;/h3&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;h3&gt;1.2.節&lt;/h3&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;h2&gt;第2章&lt;/h2&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;h3&gt;2.1.節&lt;/h3&gt;
</pre>
<p>階層の深さは見出し要素の数字によって暗黙的に表されていたが、上の例のように見出し要素で区切られた章や節の内容はマークアップ上では同じ階層に位置することになる。章という大きなセクションと節という小さなセクションが階層関係でなく並列な関係を表しているのだ。</p>
<p>HTML5では明示的に文書構造をマークアップできる要素が新たに規定された。sectionやarticleなどといったセクショニング・コンテンツに属する要素を使うことで、セクションを明示的に囲い込み、文書の階層構造を示すことができる。</p>
<pre>
&lt;h1&gt;表題&lt;/h1&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;section&gt;
  &lt;h2&gt;第1章&lt;/h2&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;section&gt;
    &lt;h3&gt;1.1.節&lt;/h3&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h3&gt;1.2.節&lt;/h3&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/section&gt;
&lt;/section&gt;
&lt;section&gt;
  &lt;h2&gt;第2章&lt;/h2&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;section&gt;
    &lt;h3&gt;2.1.節&lt;/h3&gt;
</pre>
<h2>アウトライン</h2>
<p>このようにHTML5ではマークアップ上でもコンテンツの階層構造を示すことができるようになった。人間だけが理解できる暗黙的な階層構造でなく、マークアップによってコンピュータでも理解することができるように明示的に表された階層構造のことをアウトラインという。</p>
<p>HTML5でマークアップする場合、コンピュータでも理解することができる階層構造を意識する必要がある。そのためにはまず、マークアップが構造化（アウトライン化）されるアルゴリズム（アウトライン・アルゴリズム）を理解しなければならない。以下アウトライン・アルゴリズムを簡単に説明する。</p>
<p>まずセクショニング・コンテンツに属する要素が使われていないマークアップの場合、見出し要素が現れるたびにその数字の大きさによってアウトライン化が行われる。アウトラインにおける階層の深さをアウトライン・レベルというが、以前に現れたセクションの見出しと比較して数字が大きい場合アウトライン・レベルが1段階下がり（より深い階層となり）、小さい場合はアウトライン・レベルが上がる（より浅い階層となる）。<br />次にセクショニング・コンテンツの属する要素を用いたマークアップの場合だが、この場合はセクショニング要素が現れるたびにアウトライン・レベルが1段階下がり新たなセクションが開始されたという解釈がなされる。この要素の中で最初に現れる見出し要素がそのセクションにおける見出しとなり、セクショニング要素の閉じタグが現れた時点でそのセクションが終了したと解釈される。ただしセクショニング・ルートというカテゴリーに属する要素はアウトライン・アルゴリズムにおいて独立したコンテンツとしてみなされるため、これらの要素の中にセクションが存在していてもアウトライン化はされない。</p>
<p>詳しい説明・例は参考URLを見ていただきたい。またマークアップされたHTML文書のアウトラインを確認する場合は<a href="http://gsnedders.html5.org/outliner/" target="_blank">HTML 5 Outliner</a>というツールを利用するとよい。</p>
<p style="margin-top:20px; padding-top: 20px; border-top: dashed 1px gray;">
以上6回に渡りHTML5と旧来のマークアップとの違いを説明してきた。この違いは一言で&#8221;よりセマンティックになった&#8221;と言えるだろう。セマンティックなHTML5が持つもう一つの特徴であるAPI群については、今後メインで解説していく。各要素の使い方は必要に応じて追加で解説するが、全ての要素については網羅することはおそらくできないのでご了承いただきたい。要素の属性などの細かな違いはその属性に関連した要素を用いる場合に解説していきたいと思う。
</p>
<hr />
<p>■参考URL:</p>
<ul>
<li><a href="http://www.html5-memo.com/basic/rule-003/" target="_blank">http://www.html5-memo.com/basic/rule-003/</a></li>
<li><a href="http://codezine.jp/article/detail/5600?p=2" target="_blank">http://codezine.jp/article/detail/5600?p=2</a></li>
<li><a href="" target="_blank"></a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/html5/2011/331/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/html5/2011/331/" />
	</item>
		<item>
		<title>【第6回】HTML5とHTML4,XHTMLの違いその5:廃止になった要素</title>
		<link>http://www.marketingblog.jp/html5/2011/291/</link>
		<comments>http://www.marketingblog.jp/html5/2011/291/#comments</comments>
		<pubDate>Mon, 19 Dec 2011 12:29:32 +0000</pubDate>
		<dc:creator>寺西 裕紀</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=291</guid>
		<description><![CDATA[dt{font-weight: 600;} dd{margin-bottom: 5px;} HTML5では、見た目しか表さずCSSで対処すべき要素、フレーム関連の要素、これまでほとんど使われなかった要素が廃止となった。こ [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css">
dt{font-weight: 600;}
dd{margin-bottom: 5px;}
</style>
<p>HTML5では、見た目しか表さずCSSで対処すべき要素、フレーム関連の要素、これまでほとんど使われなかった要素が廃止となった。この中の多くの要素は、HTML4.01やXHTML1.0では非推奨や廃止とされた要素だ。<br />これらの廃止となった要素を代替手段の一例とともに紹介する。</p>
<h2>見た目しか表さずCSSで対処できる要素</h2>
<p>これらの要素は見た目しか表さず、HTML文書内で構造的な意味を持たないため、CSSで代替することが可能であり廃止対象となった。</p>
<dl>
<dt>basefont</dt>
<dd>この要素は文書の基準フォントサイズを表す要素だがCSSで代用することができる。書体の指定にはfont-familyプロパティを、文字サイズの指定にはfont-sizeプロパティを、文字色の指定にはcolorプロパティを用いればよい。</dd>
<dt>big</dt>
<dd>この要素はテキストを一回り大きく表示する要素だがCSSのfont-sizeプロパティで代用することができる。</dd>
<dt>center</dt>
<dd>この要素は要素およびテキストをセンタリングする要素だがCSSで代用することができる。要素のセンタリングにはmagin-left:auto, margin-right:autoとし(IEの場合はさらにtext-align:center)、テキストのセンタリングにはtext-align:centerとすればよい。</dd>
<dt>font</dt>
<dd>この要素はフォントのサイズ・色・種類を指定するのに使用する要素だがCSSで代用することができる。書体の指定にはfont-familyプロパティを、文字サイズの指定にはfont-sizeプロパティを、文字色の指定にはcolorプロパティを用いればよい。</dd>
<dt>strike</dt>
<dd>この要素は削除されたテキストであることを表し、一般的なブラウザではテキストに打ち消し線がひかれて表示される。この要素を代替する場合、削除という訂正を表すならdel要素、関連が無くなったことを表すならs要素、単に取り消し線をレンダリングしたい場合はCSSのtext-decorationプロパティを用いればよい。</dd>
<dt>tt</dt>
<dd>この要素はテキストを等幅フォントで表示する要素だがCSSのfont-family:monospaceで代用することができる。</dd>
</dl>
<h2>フレーム</h2>
<p>フレーム分割はユーザビリティやアクセシビリティに悪影響があるために、それに関する要素が廃止されることになった。</p>
<dl>
<dt>frame, frameset, noframes</dt>
<dd>これらの要素が廃止になったことでページをフレームで分割することができなくなった。ただ単に特定の領域にスクロールが必要なのであればCSSで対処し、複数のページで共通部分を表示させたい場合はiframe要素を使うか、またはSSIを使ってサーバー側でインクルードする方法が考えられる。</dd>
</dl>
<h2>ほとんど使われていない要素</h2>
<p>これらの要素はこれまで規定されていたものの、使用例が少ない、混乱の元になる、また他の要素でよりよく処理できることからウェブ制作の現場ではあまり使われておらず、HTML5では廃止対象となった。これらの要素は他の要素で代用することができる。</p>
<dl>
<dt>acronym</dt>
<dd>この要素は、「Ajax（エイジャックス）」のように単語の先頭の頭文字を組み合わせてつづり読みにし、1つの単語として発音する省略語を表すために使用される要素であった。しかしabbr要素との違いが明確でないためこの要素は廃止され、略語にはabbr要素を用いることになった。</dd>
<dt>applet</dt>
<dd>この要素はJavaアプレットを埋め込むための要素であったが、HTML4.01, XHTML1.0では非推奨とされ、object要素の使用が推奨されていた。HTML5では廃止となり、その代替にはobject要素を用いることになった。</dd>
<dt>isindex</dt>
<dd>この要素はキーワード検索入力欄の埋め込みを表す要素であるが一般的に使われることはなく、キーワード検索入力欄の埋め込みには、通常form要素が使用されている。HTML4.01, XHTML1.0で非推奨だったこの要素はHTML5では廃止され、代替としてform(input)要素を用いることになった。
</dd>
<dt>dir</dt>
<dd>この要素は複数の段からなるディレクトリ（一覧）を示すリストを表す要素であるが、実際にはどのブラウザにおいてもul要素と同じ表示である。HTML5ではこの要素は廃止され、代替としてはul要素を用いることになった。</dd>
</dl>
<p style="margin-top: 20px;">最後に、noscript要素は HTML 構文でのみ適合されるようになった。これは noscript 要素の利用が HTML パーサーに依存するからであり、そのため XML 構文では使用することができなくなった。</p>
<hr />
<p>■参考URL:</p>
<ul>
<li><a href="http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/" target="_blank">http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/</a></li>
<li><a href="http://www.htmq.com/html5/002.shtml" target="_blank">http://www.htmq.com/html5/002.shtml</a></li>
<li><a href="http://phpjavascriptroom.com/?t=html5&#038;p=deprecate" target="_blank">http://phpjavascriptroom.com/?t=html5&#038;p=deprecate</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/html5/2011/291/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/html5/2011/291/" />
	</item>
		<item>
		<title>【第5回】HTML5とHTML4,XHTMLの違いその4:変更された要素</title>
		<link>http://www.marketingblog.jp/html5/2011/289/</link>
		<comments>http://www.marketingblog.jp/html5/2011/289/#comments</comments>
		<pubDate>Mon, 19 Dec 2011 09:56:59 +0000</pubDate>
		<dc:creator>寺西 裕紀</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=289</guid>
		<description><![CDATA[dt{font-weight: 600;} dd{margin-bottom: 5px;} 今回はHTML5で再定義された要素についてその変更点を説明する。これらの要素を使う場合、これまでの使用方法と区別してマークアップ [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css">
dt{font-weight: 600;}
dd{margin-bottom: 5px;}
</style>
<p>今回はHTML5で再定義された要素についてその変更点を説明する。これらの要素を使う場合、これまでの使用方法と区別してマークアップすることが大切だ。</p>
<dl>
<dt>a</dt>
<dd>HTML4ではhref属性を使わずにname属性によってコンテンツの位置を示すアンカーを表していた。HTML5ではname属性は廃止され、href属性のないa要素はid属性などを伴ってリンクが設定される可能性を示すプレースホルダを表すようになった。またこれまでフレーズ内容 (インライン要素またはテキスト) のみに限定された内容モデルが変更され、フロー内容 (ブロック要素) も含むことができるように変更された。</dd>
<dt>address</dt>
<dd>HTML4ではaddress要素が表す連絡先情報がどのコンテンツに関連しているかについては規定されていなかったが、HTML5では新しいセクショニングの概念により、適用範囲が限定されるようになった。</dd>
<dt>b</dt>
<dd>HTML4では単に太字でレンダリングするだけの見た目に特化した要素だった。HTML5では文書の概要におけるキーワードや、レビューにおける製品名、対話的なテキストベースのソフトウェアにおける実行可能箇所、記事のリード文などといった注意を引きつけたい箇所を示す場合に用いられるようになった。</dd>
<dt>cite</dt>
<dd>HTML4では引用元や参照元の情報を表すことになっていたが、HTML5では作品 (例: 本、新聞、小論、詩、楽譜、楽曲、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇、戯曲、オペラ、ミュージカル、展示、訴状、判決書、etc.) のタイトルのみを表すようになった。</dd>
<dt>dl</dt>
<dd>HTML4では定義リストとして規定されていたが、HTML5では名前と値のグループからなる連想(関連)リストを表すようになり、より汎用的なリストとして使用できるようになった。</dd>
<dt>head</dt>
<dd>子要素としてobject をもつことができなくなった。</dd>
<dt>hr</dt>
<dd>HTML4では単に水平線をレンダリングするだけの見た目に特化した要素であったが、HTML5では段落（テーマ・話題）の区切りを表すようになった。</dd>
<dt>i</dt>
<dd>HTML4では単にイタリック体でレンダリングするだけの見た目に特化した要素だったが、HTML5では文章のなかで、異なったトーンや雰囲気、もしくは他のテキストと性質が異なる箇所を表すようになった。たとえば分類、専門用語、他言語での慣用句、考え（心の中で思ったこと）、アルファベットでの船舶名表記など印刷時にイタリック体となるような部分を他と区別する場合に用いる。</dd>
<dt>label</dt>
<dd>HTML4ではラベルをクリックするとlabel要素と関連づけられたフォームコントロールがフォーカスされていたが、HTML5ではそのような挙動はプラットフォーム側の基準に従うことになった。</dd>
<dt>menu</dt>
<dd>HTML4ではリストを表す要素であった（ただしリストを表す場合ul要素を用いることが推奨され、menu要素は非推奨な要素であった）。HTML5ではツールバーやコンテキストメニューを表すよう再定義された。</dd>
<dt>s</dt>
<dd>HTML4では単に取り消し線をレンダリングするだけの見た目に特化した要素であった。HTML5では正しくなくなった、もしくは関係のなくなった内容を表すようになった。</dd>
<dt>small</dt>
<dd>HTML4では単に小さい文字をレンダリングするだけの見た目に特化した要素であった。HTML5では細則などの補足的な注釈を表すようになった。</dd>
<dt>strong</dt>
<dd>HTML4では強調を表していたが基本的にはem要素との区別がされていなかった。HTML5では文章の一部を部分的に強調するものではなく、文章の重要度を示すものとなった。</dd>
<dt>u</dt>
<dd>HTML4では下線をレンダリングするだけの見た目に特化した要素であった。HTML5では音声では明示化されることはないものの明示的に区別して表示される、文意に影響しない注釈を表す。たとえば、中国語での固有名詞や、スペルミスのある単語の指示などに利用される。</dd>
</dl>
<hr />
<p>■参考URL:</p>
<ul>
<li><a href="http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/" target="_blank">http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/</a></li>
<li><a href="http://www.html5-memo.com/mdn/mdn02/" target="_blank">http://www.html5-memo.com/mdn/mdn02/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/html5/2011/289/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/html5/2011/289/" />
	</item>
		<item>
		<title>【第4回】HTML5とHTML4,XHTMLの違いその3:新たに追加された要素</title>
		<link>http://www.marketingblog.jp/html5/2011/286/</link>
		<comments>http://www.marketingblog.jp/html5/2011/286/#comments</comments>
		<pubDate>Mon, 12 Dec 2011 10:18:13 +0000</pubDate>
		<dc:creator>寺西 裕紀</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=286</guid>
		<description><![CDATA[dt{font-weight: 600;} dd{margin-bottom: 5px;} 今回はHTML5で新たに追加された要素についてその概要を説明する。 section 文書やアプリケーションにおける一般的なセクシ [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css">
dt{font-weight: 600;}
dd{margin-bottom: 5px;}
</style>
<p>今回はHTML5で新たに追加された要素についてその概要を説明する。</p>
<dl>
<dt>section</dt>
<dd>文書やアプリケーションにおける一般的なセクションを表す。h1~h6と共に使用することで、文書構造を表すことができる。</dd>
<dt>article</dt>
<dd>ブログのエントリや新聞記事など、文書内の単独で成り立つ独立のコンテンツを示す。</dd>
<dt>aside</dt>
<dd>ページ内にあるその他の内容と、関連性が薄いコンテンツを表す。補足記事やサイドバーに用いる。</dd>
<dt>hgroup</dt>
<dd>セクションの見出し（h1~h6）をグループ化する。</dd>
<dt>header</dt>
<dd>導入部やナビゲーションをグループ化する。</dd>
<dt>footer</dt>
<dd>セクションのフッタを表す。フッタは主に作者に関する情報や、著作権情報などを含む。</dd>
<dt>nav</dt>
<dd>ナビゲーションとなるセクションを表示する。</dd>
<dt>fugure, figcaption</dt>
<dd>figure要素は本文から単独で参照されることが多い自己完結するフロー・コンテンツ（イメージ、ビデオなど）とそのキャプションをグループ化する。キャプションにはfigcaption要素を用いる。</dd>
<dt>video, audio, source</dt>
<dd>audio要素とvideo要素はマルチメディアコンテンツに用意された要素であり、ユーザーエージェントが自動的に（プラグインを用いることなく）インターフェースを用意する仕組みが提供される。どちらの要素にも API が提供され、製作者がスクリプトを利用し独自のユーザーインターフェースを開発することもできる。source要素を使うことで異なるマルチメディアファイルのURL,MIME-Typeを複数指定できる。</dd>
<dt>track</dt>
<dd>video要素にテキストトラック（字幕）を提供する。</dd>
<dt>embed</dt>
<dd>プラグインを利用するコンテンツに使われる。これまで一般に使われてきたがHTML5で正式に規定された。</dd>
<dt>mark</dt>
<dd>他の文脈との関連性から言及目的で印付けられたテキストを表します。著者が読者に注意を促したい部分に用いる。</dd>
<dt>progress</dt>
<dd>ダウンロードや負荷の高い処理など、実行中のタスクの進捗度を表す。</dd>
<dt>meter</dt>
<dd>下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用する。ディスク使用率などの計測結果を表す。</dd>
<dt>time</dt>
<dd>日付や時刻などの時間情報を表す。</dd>
<dt>ruby, rt, rp</dt>
<dd>ルビ（ふりがな）をマークアップする。</dd>
<dt>bdi</dt>
<dd>マークアップしたテキストが周辺の文字における双方向テキスト書式制御の影響を受けないようにする。</dd>
<dt>wbr</dt>
<dd>長いテキストに改行機会 (line break opportunity) を与える。</dd>
<dt>canvas</dt>
<dd>グラフやゲームなど、動的に描画・更新が行われるビットマップグラフィックスをレンダリングするために用いられる。</dd>
<dt>command</dt>
<dd>ユーザーが呼び出すことができるコマンドを表す。menu要素の中でツールバーなどのメニューの項目として使う。</dd>
<dt>details, summary</dt>
<dd>ユーザーの要求に応じて付加的な情報やコントロールを表す。summary要素がその概要や説明、キャプションを提供する。</dd>
<dt>datalist</dt>
<dd>input要素の新しいlist属性と組み合わせ、コンボボックス作成し入力候補を構成する。</dd>
<dt>keygen</dt>
<dd>キーのペア（秘密鍵・公開鍵）を生成するためのフォームコントロールを表す。</dd>
<dt>output</dt>
<dd>スクリプトによる計算結果など、何らかの出力結果を表す。</dd>
</dl>
<hr />
<p>■参考URL:</p>
<ul>
<li><a href="http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/" target="_blank">http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/</a></li>
<li><a href="http://www.htmq.com/html5/002.shtml" target="_blank">http://www.htmq.com/html5/002.shtml</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/html5/2011/286/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/html5/2011/286/" />
	</item>
		<item>
		<title>【第3回】HTML5とHTML4,XHTMLの違いその2:コンテンツ・モデル</title>
		<link>http://www.marketingblog.jp/html5/2011/189/</link>
		<comments>http://www.marketingblog.jp/html5/2011/189/#comments</comments>
		<pubDate>Sun, 11 Dec 2011 11:54:02 +0000</pubDate>
		<dc:creator>寺西 裕紀</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=189</guid>
		<description><![CDATA[新しい概念:コンテンツ・モデル HTML5では新たに「コンテンツ・モデル」という概念が加えれられた。これまでの(X)HTMLでは要素ごとにブロック要素・インライン要素が定義され、「インライン要素の中にはブロック要素を入れ [...]]]></description>
			<content:encoded><![CDATA[<h2 style="margin-top:5px;">新しい概念:コンテンツ・モデル</h2>
<p>HTML5では新たに「コンテンツ・モデル」という概念が加えれられた。これまでの(X)HTMLでは要素ごとにブロック要素・インライン要素が定義され、「インライン要素の中にはブロック要素を入れてはいけない」というルールが規定されていた。HTML5ではそれに付け加え、要素の使用目的に応じてカテゴリー分けがされている。</p>
<p>HTML5の要素のほとんどは以下のカテゴリーのどれかに属す(ただし複数のカテゴリーに属す要素も、どのカテゴリーにも属さない要素も存在する)。</p>
<ul class="normal">
<li>メタデータ・コンテンツ</li>
<li>フロー・コンテンツ</li>
<li>セクショニング・コンテンツ</li>
<li>ヘッディング・コンテンツ</li>
<li>フレージング・コンテンツ</li>
<li>エンベッディッド・コンテンツ</li>
<li>インタラクティブ・コンテンツ</li>
</ul>
<p>要素がカテゴリーに分けられることで、「〇〇という要素には△△というカテゴリーをふくむことができる」という厳格な指定ができるようになった。このように「どの要素にどんなカテゴリーを入れてよいのか」を定義したものをコンテンツ・モデルという。<br />（※正確に言えばコンテンツ・モデルが指定するものはカテゴリーに限らず、特定の要素であったり、子孫の要素であったり、”空”や”トランスペアレント”であったりする。）</p>
<p>例をいくつか挙げよう。p要素のカテゴリーはフロー・コンテンツであり、コンテンツ・モデルはフレージング・コンテンツである。これはp要素自身はフロー・コンテンツに属し、p要素の中に含むことが出来るものはフレージング・コンテンツであるという意味だ。hr要素のカテゴリーはフロー・コンテンツでコンテンツ・モデルは&#8221;空&#8221;だ。つまりhr要素自身はフロー・コンテンツを含むことができる要素の中で用いられ、hr要素の中には何も含むことができない（すなわち空要素であり&lt;hr /&gt;と記述できる）。ul要素のコンテンツ・モデルは&#8221;li要素&#8221;なのでul要素の中にはli要素以外は入り得ない（ただしul要素に何も含めず空とすることは可）。このようにHTML5では要素ごとに「どんな種類の要素を含むことができるのか、また自身はどんな種類の要素なのか」と定義されている。これは要素間の相互関係とも言えるだろう。</p>
<hr />
<p>■参考URL:</p>
<ul>
<li><a href="http://w3g.jp/html5/content_models" target="_blank">http://w3g.jp/html5/content_models</a></li>
<li><a href="http://www.html5.jp/tag/models/index.html" target="_blank">http://www.html5.jp/tag/models/index.html</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/html5/2011/189/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/html5/2011/189/" />
	</item>
		<item>
		<title>【第2回】HTML5とHTML4,XHTMLの違いその1:構文</title>
		<link>http://www.marketingblog.jp/html5/2011/205/</link>
		<comments>http://www.marketingblog.jp/html5/2011/205/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 14:05:49 +0000</pubDate>
		<dc:creator>寺西 裕紀</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=205</guid>
		<description><![CDATA[HTML5を始めるにあたり最初に覚えておくべきことはこれまでのマークアップ言語、すなわちHTML4,XHTML1.0との違いだ。HTML5とHTML4,XHTMLとの違いを知ることでHTML5の理想的な設計に沿ったマーク [...]]]></description>
			<content:encoded><![CDATA[<p>HTML5を始めるにあたり最初に覚えておくべきことはこれまでのマークアップ言語、すなわちHTML4,XHTML1.0との違いだ。HTML5とHTML4,XHTMLとの違いを知ることでHTML5の理想的な設計に沿ったマークアップをすることができる。今回は構文の違いについて説明する。</p>
<h2 style="margin-top:5px;">DOCTYPE</h2>
<p>HTML5ではDOCTYPEが非常にシンプルになった。これまではHTMLのバージョンやDTDへの参照のためDOCTYPE宣言は非常に長かったが、HTML5ではブラウザで標準モードでレンダリングされるためだけに使用される。</p>
<pre>
&lt;!DOCTYPE html&gt;
</pre>
<h2>HTML構文とXML構文</h2>
<p>HTML5ではHTML構文とXML構文のどちらかの構文に準拠した記述をするか選択できる。</p>
<p>HTMLドキュメントの例:</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;ドキュメントの例&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;段落の例&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>XMLドキュメントの例:</p>
<pre>
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;title&gt;ドキュメントの例&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;段落の例&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>HTML構文に準拠した記述であってもXHTMLのように空要素br,hrなどを&lt;br /&gt;,&lt;hr /&gt;と記述することができる。</p>
<h2>文字エンコーディング</h2>
<p>HTML5では文字エンコーディングの指定もシンプルになった。</p>
<pre>
&lt;meta charset="UTF-8" &gt;
</pre>
<p>HTML構文に準拠した記述の場合に限り以下の旧来の記述方法も許容される(XML構文では不可)。</p>
<pre>
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" &gt;
</pre>
<p>なおHTML5仕様では&#8221;UTF-8&#8243;を強く推奨している。&#8221;Shift-JIS&#8221;,&#8221;EUC-JP&#8221;は非推奨なので特に理由がない場合UTF-8を指定するべきだ。</p>
<h2>MathMLとSVG</h2>
<p>MathMLやSVGはXMLベースの仕様であるので基本的にXHTMLでしか利用することができなかったが、HTML5では直接マークアップすることが可能となった。</p>
<p>緑色の円:</p>
<pre>
&lt;svg&gt;&lt;circle r="50" cx="50" cy="50" fill="green"/&gt;&lt;/svg&gt;
</pre>
<p><svg style="height:100px;"><circle r="50" cx="50" cy="50" fill="green"/></svg></p>
<h2>構文チェック</h2>
<p>最後にHTML5マークアップが仕様に準拠しているかどうかチェックしてくれるバリデータの紹介をする。</p>
<ul style="margin-bottom: 20px;">
<li><a href="http://validator.w3.org/" target="_blank">The W3C Markup Validation Service</a></li>
<li><a href="http://html5.validator.nu/" target="_blank">Validator.nu</a></li>
</ul>
<hr />
<p>■参考URL:</p>
<ul>
<li><a href="http://www.html5.jp/trans/w3c_differences.html" target="_blank">http://www.html5.jp/trans/w3c_differences.html</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/html5/2011/205/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/html5/2011/205/" />
	</item>
		<item>
		<title>新連載：これから始めるHTML5【第1回】HTML5とは</title>
		<link>http://www.marketingblog.jp/html5/2011/162/</link>
		<comments>http://www.marketingblog.jp/html5/2011/162/#comments</comments>
		<pubDate>Mon, 05 Dec 2011 11:52:25 +0000</pubDate>
		<dc:creator>寺西 裕紀</dc:creator>
				<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=162</guid>
		<description><![CDATA[昨今ますます注目を浴びているHTML5。2011年5月にHTML5の仕様はW3Cにて最終草案の段階に至り、現在急速な広がりを見せている。HTML5のテクノロジーはこれまでのHTMLとは大きく異なり、CSSやJavascr [...]]]></description>
			<content:encoded><![CDATA[<p>昨今ますます注目を浴びているHTML5。2011年5月にHTML5の仕様はW3Cにて最終草案の段階に至り、現在急速な広がりを見せている。HTML5のテクノロジーはこれまでのHTMLとは大きく異なり、CSSやJavascriptとともに使用することでiPhoneやAndroid向けのネイティブ・アプリケーションも作ることができる。これからはHTML5をはじめとするウェブのテクノロジーが様々なデバイスのアプリケーションの基盤になることだろう。</p>
<p>しかしHTML5と呼ばれる技術が扱う対象が広がる一方で、「一体何から手をつけていいのか？」という声もよく聞く。本連載を執筆する寺西も今まではXHTML1.0でマークアップしていたが、最新のウェブ技術を活かしたアプリケーションを開発するために新たにHTML5を学ぶことにした。そこで本連載では私がHTML5について新たに学んだことを、「(X)HTMLでマークアップでしたことはあるがHTML5に関してはまだ何も手をつけていない、これから勉強したい」という方を対象にアウトプットしようと思う。本連載が何らかの形でみなさんの役に立つことを願っている。</p>
<p>さて本連載が扱うHTML5の全体像をざっくりと説明しよう。もともとHTML5はWeb Applications 1.0という名前でウェブ制作者の意向を反映した新たなHTMLとしてWHATWG(Web Hypertext Application Technology Working Group)により仕様が作成されていた。しかしWebApplications1.0にはテキスト・マークアップ言語としてのHTMLの側面と、WebアプリケーションプラットフォームのためのAPIが混在していた。そこで2007年3月にW3Cが正式にこの新たなHTMLの策定に加わることになり、マークアップ言語としてのHTML5とWebアプリケーションの基礎となるAPIとを分離して仕様の策定が進められることになった。HTML5は厳密にはマークアップに関する仕様ではあるが、こういった経緯のため現在ではHTML5は「マークアップ+API群」という広義の意味を指す場合が多いようだ。本連載ではこの広義の意味であるHTML5、すなわちWeb Applications 1.0全体を扱っていこうと思う。</p>
<hr />
<p>■参考URL:</p>
<ul>
<li><a href="http://www.atmarkit.co.jp/news/200910/28/html5.html" target="_blank">http://www.atmarkit.co.jp/news/200910/28/html5.html</a></li>
<li><a href="http://www.atmarkit.co.jp/fwcr/design/benkyo/html5appli01/01.html" target="_blank">http://www.atmarkit.co.jp/fwcr/design/benkyo/html5appli01/01.html</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/html5/2011/162/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/html5/2011/162/" />
	</item>
		<item>
		<title>日本でのフェースブックの利用ユーザー300万人の謎</title>
		<link>http://www.marketingblog.jp/socialmedia/facebook/2011/140/</link>
		<comments>http://www.marketingblog.jp/socialmedia/facebook/2011/140/#comments</comments>
		<pubDate>Wed, 19 Jan 2011 03:12:20 +0000</pubDate>
		<dc:creator>i3design</dc:creator>
				<category><![CDATA[facebook]]></category>
		<category><![CDATA[ソーシャルメディア]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=140</guid>
		<description><![CDATA[映画「ソーシャル・ネットワーク」が公開されたこともあり、日本でも俄にフェースブックの注目が集まってきたが、日本での利用ユーザー数が分からない。多くのメディアでは日本での利用ユーザー数は300万人と報じられているが、このブ [...]]]></description>
			<content:encoded><![CDATA[<p>映画「ソーシャル・ネットワーク」が公開されたこともあり、日本でも俄にフェースブックの注目が集まってきたが、日本での利用ユーザー数が分からない。多くのメディアでは日本での利用ユーザー数は300万人と報じられているが、この<a href="http://www.marketingblog.jp/marketing/2011/106/">ブログでも紹介した</a>ように日本での利用ユーザー数は、まだ180万人台なのではないだろうか。</p>
<p>下の図はフェースブックの広告管理を行う画面だが、これで広告配信対象地域を日本に設定すると、先日より4万人増えて（10日ちょっとで4万人も増えているのはやはり凄いが）185万人となっている。</p>
<p style="text-align: center;"><a href="http://www.marketingblog.jp/wp-content/uploads/2011/01/facebook-1.png"><img class="aligncenter" style="margin: 20px; vertical-align: baseline;" title="facebook-1" src="http://www.marketingblog.jp/wp-content/uploads/2011/01/facebook-1-300x194.png" alt="" width="414" height="268" /></a></p>
<p style="text-align: center;">
<p>そこで疑問に思って、フェースブックの利用ユーザーの多い、米国、イギリス、カナダ、インドネシア等を対象地域にして、言語設定を日本語にしても300万人には到達しない。むしろ日本での日本語利用ユーザーは半数の90万人だから、国を増やしてもそりゃ。180万人より増える訳はない。</p>
<p>この300万人という公表の数字は一体どこから着ているのだろうか。。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/socialmedia/facebook/2011/140/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/socialmedia/facebook/2011/140/" />
	</item>
		<item>
		<title>ロシアのソフトバンク &#8220;Mail.ru Group&#8221;</title>
		<link>http://www.marketingblog.jp/marketing/2011/135/</link>
		<comments>http://www.marketingblog.jp/marketing/2011/135/#comments</comments>
		<pubDate>Fri, 14 Jan 2011 02:00:02 +0000</pubDate>
		<dc:creator>i3design</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[ソーシャルメディア]]></category>
		<category><![CDATA[マーケティング]]></category>
		<category><![CDATA[groupon]]></category>
		<category><![CDATA[Naspers]]></category>
		<category><![CDATA[Tencent]]></category>
		<category><![CDATA[グローバル]]></category>
		<category><![CDATA[ソフトバンク]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=135</guid>
		<description><![CDATA[グルーポンの増資引き受けにも名前を連ねているMail.ruグループは、新興国の巨大ネット・ポートフォリオ・カンパニーだが、日本ではあまり知られていないので、この会社について紹介しよう。 Mail.ruとは、メール、ソーシ [...]]]></description>
			<content:encoded><![CDATA[<p>グルーポンの増資引き受けにも名前を連ねているMail.ruグループは、新興国の巨大ネット・ポートフォリオ・カンパニーだが、日本ではあまり知られていないので、この会社について紹介しよう。</p>
<p>Mail.ruとは、メール、ソーシャルネットワーキング、およびゲームサイトを運営しているロシアで最大のポータルサイトのことだ（ちなみにロシア最大の検索エンジンはyandex.ru）。</p>
<p>Mairu.ruグループは以前は、ロシアとロンドンを拠点とするインターネット投資会社デジタル・スカイテクノロージー(DST Group)と呼ばれていた。この会社は、現在、時価総額 $4.78-5.63 billionと評価されており、内16％の8億7600万ドル(約718億円：82円換算)を新規公開によって調達しようとしている。</p>
<p>このDST Groupを一躍有名にしたのはオンラインゲームで有名なZynga（ジンガ）とFacebook（フェースブック）の投資だ。同社はFacebookの2.38%とZyngaの1.47%のシェアを所有するとされている。ちなみにGrouponの株式は5.13%保有とされている。</p>
<p>Mail.ru Groupは、1GDR（Global Depositary Receipt[国際預託証書]）23.70ドルから27.70ドルで現在の株主によって所有されており、この株式公開によって303万の新株と2,859万の既存の株式を市場に放出と予想されている。</p>
<p>これらの株式は、ロンドン証券取引所でティッカーメール形式での記載を予定している。公開される株式の大部分は現株主によって所有されているため、IPOによる調達額8億7600万ドルの大半は現株主のものとなる。</p>
<p>現在のMail.ru Groupの株主構成は、ロシアの億万長者「 Alisher Usmanov」が34％、南アフリカのNaspers（ナスパース）が28.7％。その他中国のインターネット会社Tencent、ゴールドマン・サックス、Tiger Global Management、およびDST創設者ユリミルナーとなっている。</p>
<p>同社はまた同時に、IPOによる株式の放出にともない約6,680万ドルの調達を予定しており、この資金によってロシアで最も人気があるソーシャルネットワーク(vKontakte.ru)の7.5%の追加株式を買い増しを予定している。</p>
<p>Mail.ru Groupには、既にロシアのソーシャルネットワーク「Odnoklassniki.ru」とかつてのIMサービスICQがあり、Mail.ru Groupが「vKontakte.ru」の株式を追加で買取った場合には、同社はロシアのソーシャルネットワークの32.49%の企業の株式を保持する形になる。</p>
<p>この公開が実現すると、Mail.ruグループ大株主は得た資金で更なる投資を加速することが予想されるため、新興国を取り巻くこの巨大インターネット企業の動向が気になるところだ。</p>
<p>■参考記事URL<br />
<a href="http://www.engagedigital.com/2010/10/25/dsts-mailru-group-files-for-876m-ipo/" target="_blank">http://www.engagedigital.com/2010/10/25/dsts-mailru-group-files-for-876m-ipo/<br />
</a><br />
<a href="http://www.reuters.com/article/idUSTRE69O2IX20101025?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed:+reuters/technologyNews+(News+/+US+/+Technology)" target="_blank">http://www.reuters.com/article/idUSTRE69O2IX20101025?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed:+reuters/technologyNews+(News+/+US+/+Technology)</p>
<p></a><a href="http://internet.watch.impress.co.jp/cda/news/2009/05/27/23576.html" target="_blank">http://internet.watch.impress.co.jp/cda/news/2009/05/27/23576.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/marketing/2011/135/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/marketing/2011/135/" />
	</item>
		<item>
		<title>グルーポン：950億ドルを調達し世界展開を加速</title>
		<link>http://www.marketingblog.jp/socialmedia/2011/125/</link>
		<comments>http://www.marketingblog.jp/socialmedia/2011/125/#comments</comments>
		<pubDate>Tue, 11 Jan 2011 08:59:47 +0000</pubDate>
		<dc:creator>i3design</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[ソーシャルメディア]]></category>
		<category><![CDATA[groupon]]></category>

		<guid isPermaLink="false">http://www.marketingblog.jp/?p=125</guid>
		<description><![CDATA[米情報サイト(mashable.com)によると共同クーポン購入サイトを展開するGrouponは、950MillionUSD（約780億：82円換算）を複数のベンチャーキャピタルからの資金調達に成功したと報じられている。 [...]]]></description>
			<content:encoded><![CDATA[<p>米情報サイト(mashable.com)によると共同クーポン購入サイトを展開するGrouponは、<span style="font-size: medium;"><strong>950MillionUSD（約780億：82円換算）</strong></span>を複数のベンチャーキャピタルからの資金調達に成功したと報じられている。</p>
<p>Grouponは、昨年Googleから６ billionUSD(約４92０億円：82円換算）での買収を拒否したことで有名だが、今回の増資によってGrouponの時価総額は4.75Billion USD（約3895億：82円換算）となった計算になる。</p>
<p>増資に応じたベンチャーキャピタルならびに投資家は以下と報じられている。</p>
<ul>
<li>Andressen Horowitz</li>
<li>Battery Ventures</li>
<li>Greylock Partners</li>
<li>kleiner Perkins Caufiield &amp; Buyers</li>
<li><a href="http://www.marketingblog.jp/marketing/2011/135/">Mail.ru Group (DST)</a></li>
<li>Maverick Capital</li>
<li>SilverLake</li>
<li>Technology Crossover Ventures</li>
</ul>
<p>Grouponは、今回の増資資金を世界展開の拡充、技術投資等へのの資金と位置付けている。今回の増資に伴って創業者のAndrew Masonは次のように語っている。</p>
<p>”世界でも有数の敬意を払うべき投資家から投資を受けたことは身の引き締まる思いだ。彼らのサポートと共に我々のミッションでもある世界中のローカルの小売業、サービス業のビジネスの在り方を変えていきたい”</p>
<p>参考URL：</p>
<p><a href="http://mashable.com/2011/01/10/confirmed-groupon-raises-950-million/" target="_blank">http://mashable.com/2011/01/10/confirmed-groupon-raises-950-million/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.marketingblog.jp/socialmedia/2011/125/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.marketingblog.jp/socialmedia/2011/125/" />
	</item>
	</channel>
</rss>

