SVGとCSS3でできる筆記体のアニメーションをやってみる

CSSのぼかしフィルターを利用した、フォーカスによる遠近表現

HTML5のCanvasの画像処理に挑戦(透過率の変更)

<p>私がHTMLについて勉強を始めた頃はXHTML1.0が主流として使われており、</p>
<p>XHTMLでは要素（タグ）がインライン要素とブロック要素の2種類だけに分かれていて、</p>
<p>「インライン要素の中にブロック要素を入れてはいけない」「インライン要素は意味を持つブロック要素で囲む必要がある」といったことを念頭に入れていればコーディングで大きな間違いはなかったのですが、</p>
<p>&nbsp;</p>
<p>HTML5でコンテンツモデルという新たな要素の分類基準が設けられてからは、</p>
<p>a要素でブロック要素と呼ばれていたグループの要素を囲むことが可能になったりするなど、</p>
<p>要素の囲み方のルールが複雑になりました。</p>
<p>&nbsp;</p>
<p>tableの直下にはtbody, thead, trのいずれかしか配置してはいけないなど、</p>
<p>基本的な各要素の囲み方のルールはXHTMLと替わらないのですが、</p>
<p>「a要素で囲むことができるのはどこまで？」「spanやstrongのルールは変わったの？」</p>
<p>といった、HTML5からの新たなルールがどのようなものかわからないと、</p>
<p>間違ったコーディングをしてしまうことは避けられないので、</p>
<p>今回具体的に調べてみることにしました。</p>
<p>&nbsp;</p>
<p>参考サイト</p>
<p><a class="link" href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">浜 俊太朗のHTML5マークアップ移行ガイド</a></p>
<p><a class="link" href="http://www.htmq.com/html5/007.shtml" target="_blank">HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス</a></p>
<p><a class="link" href="http://www.w3.org/TR/2010/WD-html5-20101019/content-models.html" target="_blank">3.2.5 Content models — HTML5 </a></p>
<p>&nbsp;</p>
<p>参考図書</p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4048660705" target="_blank">『HTML5マークアップ 現場で使える最短攻略ガイド』 浜俊太朗(著) 2013.12</a></p>
<p>&nbsp;</p>
<h2>HTML5のコンテンツモデルとは？</h2>
<p>コンテンツモデルとは、簡単に言うと、</p>
<p>「どの分類の要素が、どの分類の要素を含むことができるのか」というルールのことです。</p>
<p>HTML5では要素が14種類に分類されています。</p>
<p>&nbsp;</p>
<p>とはいえ、それぞれの要素が1つずつ分類を持っているのではなく、複数の分類を持ちます。</p>
<p>たとえば、h1要素は「フレージングコンテンツ」という<strong>コンテンツモデル</strong>に分類されており、</p>
<p>「フローコンテンツ」、「ヘッディングコンテンツ」という<strong>カテゴリー</strong>に属します。</p>
<p>&nbsp;</p>
<p>h1要素の場合、フレージングコンテンツというコンテンツモデルであり、</p>
<p>フレージングコンテンツのカテゴリーに属する要素のみを含むことができます。</p>
<p>&nbsp;</p>
<p>つまり、「どのコンテンツモデルが、どのカテゴリーの要素を含むことができるか」というルールが、</p>
<p>コンテンツモデルの基本になります。</p>
<p>&nbsp;</p>
<p>しかしながら、HTML5のコンテンツモデルはこの限りではなく、全部で次の７つのパターンがあります。</p>
<ol>
<li>カテゴリー単位で定義: h1, span etc.</li>
<li>カテゴリー単位で定義(条件つき): header, button etc.</li>
<li>特定の内容のみ入れられる: table, ul etc.</li>
<li>特定の内容のみ入れられる(条件つき): dl etc.</li>
<li>他の要素を入れられない: img, br etc.</li>
<li>親要素の条件を引き継ぐ: del, ins etc.</li>
<li>親要素の条件を引き継ぐ(条件付き): a, iframe etc.</li>
</ol>
<p>つまり、ある程度の基本的なルールはあるが、</p>
<p>各要素の特性によって含むことができる要素がそれぞれ限られているということのようです。</p>
<p>&nbsp;</p>
<p>とはいっても、この特性は、</p>
<p>「tableの直下にはtrやtbodyのようなテーブル関係の要素しか入れられない」</p>
<p>「dlには最低1つのdtとそれに続く１つ以上のddを入れなければならない」</p>
<p>「フレージングコンテンツのコンテンツモデルであるbuttonのような操作できる要素(インタラクティブコンテンツ)には、</p>
<p>フレージングコンテンツのカテゴリであってもaやiframeのような同じく操作できる要素を含むことはできない」</p>
<p>といった、</p>
<p>それぞれの要素の意味や基本的な使い方が理解できていれば迷うことのないものばかりですので、</p>
<p>そこまで複雑に考える必要はないと言えます。</p>
<p>&nbsp;</p>
<p>それでは、コンテンツモデルの基本になるカテゴリーとコンテンツモデルについて、具体的にご紹介いたします。</p>
<h2>カテゴリーと要素</h2>
<h3>メタデータコンテンツ(Metadata content)</h3>
<p>おもにhead要素に入る、メタデータやスタイル・スクリプトといった、基本的に描画されない要素です。</p>
<p>このカテゴリの要素: base, link, meta, noscript, script, style, title</p>
<p>&nbsp;</p>
<h3>フローコンテンツ(Flow content)</h3>
<p>文書に使われるほとんどの要素です。</p>
<p>このカテゴリーの要素: <em>a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, ul, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>セクショニングコンテンツ(Sectioning content)</h3>
<p>セクションの範囲を定義する要素です。</p>
<p>このカテゴリの要素: <em>article, aside, nav, section</em></p>
<p>&nbsp;</p>
<h3>ヘッディングコンテンツ(Heading content)</h3>
<p>セクションのヘッダー(見出し)を表す要素です</p>
<p>このカテゴリの要素:<em> h1, h2, h3, h4, h5, h6 (hgroupは廃止)</em></p>
<p>&nbsp;</p>
<h3>フレージングコンテンツ(Phrasing content)</h3>
<p>文書のテキストを表す要素です。この要素の多くがフレージングコンテンツのコンテンツモデルとなります。</p>
<p>以前インライン要素と呼ばれていた要素の多くがこの要素にあたります。</p>
<p>このカテゴリの要素: <em>a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>エンベッディッドコンテンツ(Embedded content)</h3>
<p>文書に他のリソース(画像や動画)を埋め込んだり、他の語彙(svgなど)を挿入したりする要素です。</p>
<p>このカテゴリの要素: <em>audio, canvas, embed, iframe, img, math, object, svg, video</em></p>
<p>&nbsp;</p>
<h3>インタラクティブコンテンツ(Iteractive content)</h3>
<p>ユーザーが操作できる要素です。</p>
<p>このカテゴリの要素: <em>a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video</em></p>
<p>&nbsp;</p>
<h3>パルパブルコンテンツ(Palpable content)</h3>
<p>具体的な意味を持つ要素のことです。</p>
<p>br要素やhr要素のような、具体的な意味を持たない要素はこのコンテンツから省かれます。</p>
<p>フローティングコンテンツやフレージングコンテンツのコンテンツモデルをもつ要素は、</p>
<p>hidden属性の指定されていないパルパブルコンテンツを含まなければならないと定義されています。</p>
<p>このカテゴリの要素: <em>a, abbr, address, article, aside, audio(controls属性を持つ場合), b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl(dtとddが一組以上ある場合), em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input(type属性の値がhiddenでない場合), ins, kbd, keygen, label, map, mark, math, menu(type属性の値がtoolbarかlistの場合), meter, nav, object, ol(子要素に一つ以上のli要素を持つ場合), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul(子要素に一つ以上のli要素を持つ場合), var, video, テキスト(半角スペースのみは除く)</em></p>
<p>&nbsp;</p>
<p><a href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">こちら</a>のサイトで、それぞれの要素の具体的なルールが紹介されていますので、</p>
<p>是非、参考になされてください。</p>


インライン要素・ブロック要素に替わるHTML5のコンテンツモデルとは？

HTML5のCanvasで画像をリサイズ＆トリミングして中央表示する方法

<p>CSS2では、:first-childを使って最初の要素を選択することができますが、</p>
<p>CSS3では、:nth-child(n)を使って、特定の順番にある要素を選択することができます。</p>
<p>ただ、この:nth-child(n)は指定した要素の親要素からみた子要素が、<strong>要素の種類(タイプ)に関係なくカウントの対象となる</strong>ため、</p>
<p>例えば</p>

		<div id="crayon-649540157d5a6692001151" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div&gt;
	&lt;h2&gt;h2の要素&lt;/h2&gt;
	&lt;h3&gt;h3の要素&lt;/h3&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
	&lt;p&gt;3&lt;/p&gt;
	&lt;p&gt;4&lt;/p&gt;
	&lt;p&gt;5&lt;/p&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157d5a6692001151-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-2">2</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-4">4</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-6">6</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-8">8</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157d5a6692001151-1"><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">h2の要素</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h3&gt;</span><span class="crayon-i ">h3の要素</span><span class="crayon-r ">&lt;/h3&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-9"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このようなHTMLで2番目の&lt;p&gt;を選択したいと思って、</p>
<p>「p:nth-child(2)」</p>
<p>としてしまった場合、pの親要素である&lt;div&gt;の子要素にはpの前に&lt;h2&gt;と&lt;h3&gt;があり、</p>
<p>この親要素の&lt;div&gt;の2番目の子要素はh3になるので、</p>
<p>p:nth-child(2)という要素は存在しないことになり、この指定は無効になってしまいます。</p>
<p>&nbsp;</p>
<p>そのため、2番目の要素の&lt;p&gt;を選ぶ場合は、</p>
<p>「p:nth-child(4)」</p>
<p>としなければならず、少しわかりづらいだけでなく、以後の更新作業において要素の位置がずれてしまい、</p>
<p>意図しない崩れが起きてしまう可能性も出てきてしまします。</p>
<p>&nbsp;</p>
<p>こんな場合に便利なのが、nth-childと同様にCSS3で使うことができるようになった、<strong>nth-of-type</strong>です。</p>
<p>nth-of-typeでは、先ほどと同じ</p>

		<div id="crayon-649540157d5aa568033988" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div&gt;
	&lt;h2&gt;h2の要素&lt;/h2&gt;
	&lt;h3&gt;h3の要素&lt;/h3&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
	&lt;p&gt;3&lt;/p&gt;
	&lt;p&gt;4&lt;/p&gt;
	&lt;p&gt;5&lt;/p&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157d5aa568033988-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-2">2</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-4">4</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-6">6</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-8">8</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157d5aa568033988-1"><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">h2の要素</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h3&gt;</span><span class="crayon-i ">h3の要素</span><span class="crayon-r ">&lt;/h3&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-9"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のようはHTMLにおいて、</p>
<p>「p:nth-of-type(2)」</p>
<p>と指定した場合、&lt;p&gt;以外の要素が同じ親要素内に子要素として存在する場合でも、それらはカウントされず、</p>
<p><strong>指定した要素と同じタイプの要素だけを対象にカウントが行われる</strong>ため、</p>
<p>2番目にある&lt;p&gt;を選択することができます。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/53/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<p>ちなみにこの:nth-of-typeは:nth-childと同じく、スマホのブラウザやChrome, FIreFox, Opera, IE9以上のブラウザで利用できます。</p>
<p>:nth-of-type(n)の類似の要素として、:first-of-type、:last-of-type、:nth-last-of-type(n)があります。</p>
<p>特定の種類の要素を対象にカウントするか、種類に関係なくカウントするかで、</p>
<p>使い分けするといいと思います。</p>

CSS3の:nth-child(n)と:nth-of-type(n)

<p>レスポンシブデザインでのコーディングをする際、PCとSPで同じ画像にするのが理想なのですが、<br />
やはり別の画像にしないと行けなくなるときがあります。</p>
<p>その際は、背景画像であれば、cssで変更できますが、<br />
通常の画像は,javascriptで横の幅のサイズを取得してそれにより、imgを変更したりしていますが、<br />
便利なsrcsetというタグがあるようです。<br />
srcsetは必要のない画像はロードしないので、いいですね。</p>
<p>以下のような使い方になるようです。</p>
<p></p>

		<div id="crayon-649540157d3b6527202210" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;img src="img/sample.jpg"
     srcset="img/sample.jpg 1x,
             img/sample2.jpg 2x"&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157d3b6527202210-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d3b6527202210-2">2</div><div class="crayon-num" data-line="crayon-649540157d3b6527202210-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157d3b6527202210-1"><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"img/sample.jpg"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d3b6527202210-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e ">srcset</span>=<span class="crayon-s ">"img/sample.jpg 1x,</span></div><div class="crayon-line" id="crayon-649540157d3b6527202210-3"><span class="crayon-s ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img/sample2.jpg 2x"</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>srcsetに対応していないブラウザの場合は、srcを読み込んで、<br />
srcsetを読み込む場合、通常の場合はsample.jpgが読み込まれ、Retinaディスプレイではsample2.jpgを読み込むようです。</p>
<p>また、</p>
<p></p>

		<div id="crayon-649540157d3ba756041532" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;img src="img/sample.jpg"
     srcset="img/sample_sp.jpg 320w,
             img/sample2.jpg 640w"</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157d3ba756041532-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d3ba756041532-2">2</div><div class="crayon-num" data-line="crayon-649540157d3ba756041532-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157d3ba756041532-1"><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"img/sample.jpg"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d3ba756041532-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e ">srcset</span>=<span class="crayon-s ">"img/sample_sp.jpg 320w,</span></div><div class="crayon-line" id="crayon-649540157d3ba756041532-3"><span class="crayon-s ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img/sample2.jpg 640w"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このように記述すると、<br />
ウィンドウサイズが320px以下ならsample_sp.jpgが、640px以下かそれ以上ならsample2.jpgが読み込まれます。</p>
<p>まだ全てのブラウザで対応している訳じゃないとのことですが、<br />
<a href="http://scottjehl.github.io/picturefill/" target="_blank">Picturefill</a>を使えば対応出来るとのことです。</p>
<p>これがしっかり使えるようであれば便利ですね〜・・・<br />
とも思いますが、PCとSPで画像が簡単に変更が出来るという点では、作業量がちょっと増えるのかなとも思います。</p>
<p>ここでは書いてませんが、pictureというタグも同じように使用可能なようで、<br />
レスポンシブサイトの要望に対応したタグができているようです。。。</p>
<p>参考にさせていただいたサイトは以下になります。<br />
<a href="http://kia-king.com/blog/tutorial/responsive-images-with-srcset/" target="_blank">HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう</a><br />
<a href="http://havelog.ayumusato.com/develop/html/e617-picture_element_and_srcset_attribute.html">picture要素の関連仕様って今どうなってるんだっけ？を調べたメモ ::ハブろぐ</a></p>

レスポンシブデザインのコーディングには、srcsetを使う!?

<p>HTML5のCanvasではCanvas以外のHTML要素とCSSだけではできないような、</p>
<p>複雑な効果を使ったアニメーションのビジュアルなども、Canvasに対応したブラウザであれば表示することができるというメリットがありますが、</p>
<p>それを実現するためには、高度なJavaScriptや画像処理の知識が必要であったりして、</p>
<p>実際に制作するには若干ハードルが高かったり、</p>
<p>制作のために多くのコードを書かなければならなかったりといった問題があります。</p>
<p>&nbsp;</p>
<p>CanvasなどのHTML5の技術をより扱いやすくするためのJavaScriptのライブラリの一つに、</p>
<p>Adobeの制作したCreateJSがありますが、</p>
<p>FlashのCS6ではFlash上で制作したアニメーションなどを、</p>
<p>CreateJSを使ったHTML5の形式で書き出す拡張機能があります。</p>
<p>さらにFlash CCでは、拡張機能ではなく、HTML5での書き出しを前提とした制作も可能になっているようです。</p>
<p>&nbsp;</p>
<p>この機能を使えば、Flashを通してより簡単にCanvasアニメーション等を制作することができます。</p>
<p>今回はこのFlash CS6で、実際にCanvasアニメーションを作ってみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/51/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<h3>1.Flash CS6に「Toolkit for CreateJS」が入っているか確認する。</h4>
<p>Flash CS6を最新の状態にアップデートしていれば、今回のHTML5の書き出しに必要な</p>
<p>「Toolkit for CreateJS」という拡張機能が入っているはずなのですが、</p>
<p>入っていない場合は↓<a href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">こちら</a>よりダウンロードして拡張機能をインストールする必要があります。</p>
<p><a class="link" href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">Flash Professional Toolkit for CreateJSの使用</a></p>
<p><a href="/uploads-archive/2014/09/ss01.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5775" src="/uploads-archive/2014/09/ss01-300x190.jpg" alt="ss01" width="300" height="190" srcset="/uploads-archive/2014/09/ss01-300x190.jpg 300w, /uploads-archive/2014/09/ss01-1024x651.jpg 1024w, /uploads-archive/2014/09/ss01-228x145.jpg 228w, /uploads-archive/2014/09/ss01.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>「ウィンドウ」&gt;「Toolkit for CreateJS」</p>
<p>&nbsp;</p>
<h3>2.Flashアニメーションの制作</h4>
<p>Flash CS6でモーショントゥイーンやActionScript3などを駆使してFlashアニメーションを制作します。</p>
<p>今回DEMOで作ってみたのは、Canvasでないと再現が困難になる、パスのマスクを使ったアニメーションです。</p>
<p><a href="/uploads-archive/2014/09/ss02.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5776" src="/uploads-archive/2014/09/ss02-300x190.jpg" alt="ss02" width="300" height="190" srcset="/uploads-archive/2014/09/ss02-300x190.jpg 300w, /uploads-archive/2014/09/ss02-1024x651.jpg 1024w, /uploads-archive/2014/09/ss02-228x145.jpg 228w, /uploads-archive/2014/09/ss02.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<h3>3.「Toolkit for CreateJS」でHTML5を書き出し</h4>
<p>「ウィンドウ」&gt;「Toolkit for CreateJS」でToolkit for CreateJSを開き、</p>
<p>パブリッシュをクリックして書き出します。</p>
<p>これで書き出しは完了です。</p>
<p><a href="/uploads-archive/2014/09/ss03.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5778" src="/uploads-archive/2014/09/ss03-300x190.jpg" alt="ss03" width="300" height="190" srcset="/uploads-archive/2014/09/ss03-300x190.jpg 300w, /uploads-archive/2014/09/ss03-1024x651.jpg 1024w, /uploads-archive/2014/09/ss03-228x145.jpg 228w, /uploads-archive/2014/09/ss03.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Toolkit for CreateJS似寄る書き出しでは「ぼかし」などのフィルターに対応していなかったり、</p>
<p>半透明のマスクはActionScript3を理解していなければ制作ができなかったりするなど、新たな壁も見つかりましたが、</p>
<p>Canvas制作への道が少し開けたような気がします。</p>
<p>&nbsp;</p>


Flash CS6でHTML5のCanvasを書き出す方法

HTML5のCanvasでレスポンシブなリンク – 多角形編

HTML5のCanvasでレスポンシブなリンク – 円弧編

HTML5のCanvasでレスポンシブなリンク &#8211; 矩形(四角)編

<p>今回ご紹介するのは、</p>
<p>HTML5のスライドアニメーションが作れるサイトです。</p>
<p>サインアップの必要なく作れますが、登録して、プランも色々あるようですが、</p>
<p>出来る事が増えて行く感じです。</p>
<p>&nbsp;</p>
<p>作る画面は、以下のような感じです。</p>
<p><a href="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-5325" alt="HTML5 MAKER Editor  html5maker.com" src="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-1024x582.jpg" width="643" height="365" srcset="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-1024x582.jpg 1024w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-300x170.jpg 300w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-228x129.jpg 228w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_.jpg 1249w" sizes="(max-width: 643px) 100vw, 643px" /></a></p>
<p>直感的にできますね。</p>
<p>写真を追加して、アニメーションの設定を右側で好きなようにできます。</p>
<p>最後、右上の「PUBLISH」を押すと、html一式がダウンロードできます。</p>
<p>&nbsp;</p>
<p>こんなサービスがどんどんできてきてますね。</p>
<p>HTMLに詳しくない人でもwebサイトを作れてしまう環境がどんどん出来上がりつつありますね・・・</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://html5maker.com/" class="link">Create HTML5 Animation | Free Banner Maker </a></p>
<p>&nbsp;</p>


HTML5のスライドアニメーションを直感的に作れるサイト「HTML5 MAKER」

canvasで日本地図を表示してくれるjQueryプラグインのJapanMap

Webフォント×CSS3でロングシャドウアイコンを作ってみよう

<h2>レスポンシブコーディングの手順</h3>
<p>コーディングする際に焦りがちの私、結局修正が山ほど出てきて、より遅くなる。<br />
「急がば回れ」のどおり、今回は落ち着いて、コーディング作業に入る前に、<br />
以下の手順を心がけて行うようにした。<br />
&nbsp;<br />
&nbsp;<br />
・コーディングに入る前に、PCデザインとスマホデザインを比べてコーディング手順を考える<br />
&nbsp;<br />
・どの部分が共通できて、どこが要素ごと入れ替えないといけないかを決める<br />
&nbsp;<br />
・PCデザインがスマホデザインで共通できる部分があれば、<br />
  どの要素をどのような順番で作れば、スマホの場合うまくいくかを考える。<br />
&nbsp;<br />
・画像スライドする際もスマホ用の画像とpc用の画像の名前を分かるようにルールを決める。<br />
&nbsp;<br />
後、実際にコーディングに入るときには、<br />
・子要素を出来るだけwidthを指定しないでpaddingやmarginで指定する<br />
&nbsp;<br />
&nbsp;<br />
以前はどこの要素でもwidthを指定しがちですが、<br />
必要でないところで指定しているとスマホの場合うまくいかない事がよくありました。</p>


レスポンシブコーディングの手順

<p>最近、HTML5とCSS3を本格的に勉強し始めましたので、<br />
自分なりにHTML5について思ったことを書いていきます。<br />
今までのHTMLから大きくは変わりましたが、基本は一緒なので早く習得できると思います。</p>
<p>&nbsp;</p>
<h3>&lt;header&gt;や&lt;nav&gt;、&lt;footer&gt;等のタグ</h4>
<p>1番大きく変わり便利になった点は、&lt;header&gt;や&lt;nav&gt;、<br />
&lt;footer&gt;等のタグの追加だと思います。<br />
それと、&lt;section&gt;や&lt;artical&gt;等のタグも使いこなせれば、<br />
コードも見やすく管理しやすくなります。</p>
<p>今までは、&lt;div&gt;で囲んでIDを付けていましたが、<br />
&lt;div&gt;をこれらのタグに変えるだけで一瞬にしてHTML5の土台は出来上がりです。</p>
<p>&nbsp;</p>
<h3>&lt;animation&gt;について</h4>
<p>基本的なことを覚えるのも大事ですが、自分の興味があることを見つけ<br />
それにどのタグが必要なのか考えるのもおもしろいので、<br />
今回は私が使いこなしたいと思った&lt;animation&gt;タグについて<br />
ちょっとした説明をしていきます。</p>
<p>この&lt;animation&gt;タグは使えると静的なサイトが動的になり、<br />
見栄えもよくなるのですが、cssに少し付け加えないといけない要素があります。</p>
<p>&lt;animation&gt;タグをそのまま使うと、ブラウザによっては動かないということが起きます。</p>
<p>&lt;animation&gt;タグに前に</p>

		<div id="crayon-64953fd591ff4046261068" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
-moz-animation: anime1 4s ease -1s infinite normal; 
-webkit-animation: anime1 4s ease -1s infinite normal; 
-o-animation: anime1 4s ease -1s infinite normal; 
-ms-animation: anime1 4s ease -1s infinite normal;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd591ff4046261068-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591ff4046261068-2">2</div><div class="crayon-num" data-line="crayon-64953fd591ff4046261068-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591ff4046261068-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd591ff4046261068-1">-moz-animation<span class="crayon-sy">:</span><span class="crayon-h"> </span>anime1<span class="crayon-h"> </span>4s<span class="crayon-h"> </span>ease<span class="crayon-h"> </span>-1s<span class="crayon-h"> </span>infinite<span class="crayon-h"> </span>normal<span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591ff4046261068-2">-webkit-animation<span class="crayon-sy">:</span><span class="crayon-h"> </span>anime1<span class="crayon-h"> </span>4s<span class="crayon-h"> </span>ease<span class="crayon-h"> </span>-1s<span class="crayon-h"> </span>infinite<span class="crayon-h"> </span>normal<span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64953fd591ff4046261068-3">-o-animation<span class="crayon-sy">:</span><span class="crayon-h"> </span>anime1<span class="crayon-h"> </span>4s<span class="crayon-h"> </span>ease<span class="crayon-h"> </span>-1s<span class="crayon-h"> </span>infinite<span class="crayon-h"> </span>normal<span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591ff4046261068-4">-ms-animation<span class="crayon-sy">:</span><span class="crayon-h"> </span>anime1<span class="crayon-h"> </span>4s<span class="crayon-h"> </span>ease<span class="crayon-h"> </span>-1s<span class="crayon-h"> </span>infinite<span class="crayon-h"> </span>normal<span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これらを付け加えることによって、ほぼどのブラウザでも動きます。<br />
そしてもう一つ気を付けたいのは、動きを指定する際にも</p>

		<div id="crayon-64953fd591ff8991970386" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
@-webkit-keyframes anime1{0%{width: 50%}　100%{width: 100%}}
@-moz-keyframes anime1{0%{width: 50%}　100%{width: 100%}}
@-o-keyframes anime1{0%{width: 50%}　100%{width: 100%}}
@-ms-keyframes anime1{0%{width: 50%}　100%{width: 100%}}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd591ff8991970386-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591ff8991970386-2">2</div><div class="crayon-num" data-line="crayon-64953fd591ff8991970386-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd591ff8991970386-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd591ff8991970386-1"><span class="crayon-sy">@</span>-webkit-keyframes<span class="crayon-h"> </span>anime1<span class="crayon-sy">{</span>0<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>50<span class="crayon-sy">%</span><span class="crayon-sy">}</span>　100<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>100<span class="crayon-sy">%</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591ff8991970386-2"><span class="crayon-sy">@</span>-moz-keyframes<span class="crayon-h"> </span>anime1<span class="crayon-sy">{</span>0<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>50<span class="crayon-sy">%</span><span class="crayon-sy">}</span>　100<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>100<span class="crayon-sy">%</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd591ff8991970386-3"><span class="crayon-sy">@</span>-o-keyframes<span class="crayon-h"> </span>anime1<span class="crayon-sy">{</span>0<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>50<span class="crayon-sy">%</span><span class="crayon-sy">}</span>　100<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>100<span class="crayon-sy">%</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd591ff8991970386-4"><span class="crayon-sy">@</span>-ms-keyframes<span class="crayon-h"> </span>anime1<span class="crayon-sy">{</span>0<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>50<span class="crayon-sy">%</span><span class="crayon-sy">}</span>　100<span class="crayon-sy">%</span><span class="crayon-sy">{</span>width<span class="crayon-sy">:</span><span class="crayon-h"> </span>100<span class="crayon-sy">%</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>この記述を忘れないことです。</p>
<p>私はまだ&lt;animation&gt;の可能性を把握しきれていないので<br />
これからも、勉強してHTML5やCSS3のみでどこまでできるか考えていきたいです。</p>
<p>&nbsp;</p>
<h3>まとめ</h4>
<p>今回はHTML5について簡単なことにしか触れませんでしたが<br />
もっと深く勉強して、ブログを見ていただいた方の力になれればと思っています。<br />
引き続きこれからも、HTML５について書いていこうと考えています。</p>
<p>最後まで、読んでいただき、ありがとうございました。</p>
<header></header>

HTML5とCSS3の勉強を始めました。

WebGLのJSライブラリー「Three.js」を使ってみた

<p>ブラウザ上でFlashを使わずに3Dのグラフィック描画を可能にする<strong>HTML5</strong>での新技術の<strong>WebGL</strong>ですが、</p>
<p>動作環境が限定されているのが現状です。</p>
<p>&nbsp;</p>
<p>とはいえど、今後利用範囲が拡大していくことは確実ですので、</p>
<p>まずは利用できる環境を知りたいと思ったので、まとめてみました。</p>
<p>&nbsp;</p>
<p><strong>WebGL</strong>の動作環境として特徴的なのは、</p>
<p>他のHTML5技術ではブラウザ環境だけが制限の要因となることが多いですが、</p>
<p><strong>WebGL</strong>ではグラフィックボードを利用しているため、</p>
<p>グラフィックボードの<strong>OpenGL</strong>への対応状況が制限の要因となってきます。</p>
<p>つまり、ブラウザが最新でもPCが古い場合は利用できないこともあるということです。</p>
<p><strong>※追記→最新のChromeでは、グラフィックボードが対応していなくても、ブラウザ側で再現してしまうので、</strong></p>
<p><strong>問題なく使えるようです。</strong></p>
<p>&nbsp;</p>
<h3>OpenGLの対応状況</h4>
<table>
<tbody>
<tr>
<th>OpenGL 1.x</th>
<th>OpenGL 2.x</th>
<th>OpenGL 3.x</th>
<th>OpenGl ES 2.0</th>
<th>OpenGl ES 3.0</th>
</tr>
<tr>
<td style="text-align: center;">×</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<h3>PCブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th>Firefox 4 以降</th>
<th>Chrome 9 以降</th>
<th>Safari 5.1以降</th>
<th>Opera 12以降</th>
<th>IE 11以降</th>
</tr>
<tr>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○になりそう</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<h3>スマホのブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th colspan="4">Android</th>
<th rowspan="2">iOS</th>
</tr>
<tr>
<th>Firefox for Mobile 以降</th>
<th>Opera Mobile 12 以降</th>
<th>Google Chrome for Android 25 以降</th>
<th>Android ブラウザ 以降</th>
</tr>
<tr>
<td style="text-align: center;">○(android 4以降)</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△(iAdのみ)</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<p>スマホの場合、「Enable WebGL」というアプリをスマホに導入することで、</p>
<p>非対応のブラウザでも<strong>WebGL</strong>を利用可能になるようです。</p>
<p>&nbsp;</p>
<p>ユーザーが<strong>WebGL</strong>を有効にすれば利用可能になるブラウザも多くあるので、</p>
<p>クッキーの説明のように、<strong>WebGL</strong>についての設定を載せるなどして、</p>
<p>作る側が利用拡大を模索していくことも、<strong>WebGL</strong>の普及には重要かもしれません。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #html5

2015/01/14

2015/01/08

2014/12/10

2014/11/19

2014/10/22

2014/10/15

2014/10/15

2014/09/04

2014/08/27

2014/08/06

2014/07/30

2014/07/23

2014/05/20

2013/12/18

2013/10/30

2013/10/10

2013/07/24

2013/06/26