Skip to content

Instantly share code, notes, and snippets.

@mojopon
Created August 6, 2012 08:39
Show Gist options
  • Save mojopon/3272310 to your computer and use it in GitHub Desktop.
Save mojopon/3272310 to your computer and use it in GitHub Desktop.
html5rock
<!DOCTYPE html>
<html dir="ltr" itemscope="" itemtype="http://schema.org/Article" lang="ja">
<head>
<meta charset="utf-8">
<!--
Copyright (c) 2012 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Author:
*
*
*
-->
<meta content="HTML5 を今すぐ使用することを検討しているデベロッパー向けリソースです。具体的な機能の情報や、アプリでの機能の使用について確認できます。" name="description">
<meta content="html5,html 5,html5 demos,html5 examples,javascript,css3,notifications,geolocation,web workers,apppcache,file api,filereader,indexeddb,offline,audio,video,drag and drop,chrome,sse,mobile" name="keywords">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport">
<!-- iOS: run in full-screen mode and display upper status bar as translucent -->
<!--
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-->
<title>HTML5 Rocks - オープン ウェブ HTML5 デベロッパー向けリソース</title>
<link href="/favicon.ico" rel="shortcut icon">
<link href="http://feeds.feedburner.com/html5rocks" rel="alternate" title="HTML5 Rocks RSS" type="application/rss+xml">
<link href="" media="all" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5-els.js"></script>
<![endif]-->
<style>
/*<![CDATA[*/
body {
background-color: #330000;
color: white;
width : 100% ;
}
a {
color: yellow;
}
h1,h2 {
font-size : 40px;
font-style : bold;
text-shadow:1px 1px 0 orange,2px 2px 0 red;
}
#blockmain {
margin: 0 auto; width : 1100px ;
}
#block1 {
background: -webkit-radial-gradient(center, ellipse cover, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
border:2px solid gray;
margin-right : 20px ;
border-radius : 20px;
box-shadow : 15px 15px 10px rgba(0,0,0,0.3);
float: left; width : 150px;
}
#block2 {
background: -webkit-radial-gradient(center, ellipse cover, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
margin-left : 40px;
border-radius : 20px;
border:2px solid gray;
box-shadow : 15px 15px 10px rgba(0,0,0,0.3);
float: right; width : 150px;
}
#block3 {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1)));
width : 780px;
margin:0 auto;
border-radius : 20px;
border:2px solid gray;
box-shadow : 15px 15px 10px rgba(0,0,0,0.3);
}
#block4 {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1)));
width : 780px;
margin:0 auto;
margin-top :5px;
margin-bottom:5px;
border-radius : 20px;
border:2px solid gray;
box-shadow : 15px 15px 10px rgba(0,0,0,0.3);
}
#block5 {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1)));
width : 780px;
margin:0 auto ;
border-radius : 20px;
border:2px solid gray;
box-shadow : 15px 15px 10px rgba(0,0,0,0.3);
}
/*]]>*/
</style>
</head>
<body>
<div id="blockmain">
<div id="block1">
<header class="main"></header>
<a href="/ja/" id="home_horns">
<img alt="HTML5 Rocks" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAyCAYAAABGQBuoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEU2NTFGRTQwNjE0MTFFMTg0RjdERTE0MzFDQTlGQjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEU2NTFGRTUwNjE0MTFFMTg0RjdERTE0MzFDQTlGQjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MUQyMTY2QjA2MTMxMUUxODRGN0RFMTQzMUNBOUZCNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MUQyMTY2QzA2MTMxMUUxODRGN0RFMTQzMUNBOUZCNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgNr19cAAAJFSURBVHja7FfrUcMwDE56/U/YIGxQJsBMQJmg6QTQCRomKBukGzBCywTpBikTpEwQJE4CxbFTOzF3cIfudM7Jsb5I1itRJKhpmhlw1XzTDjiJQhAqAq6JM+CcQUIBzEmhErJPkFAAHWUIpoOe0aFIT85nplEgQrfCUgjRGmTLIBbQ/X0FBTE+N5NABsxofYrj+ISMzygIBWClXwOwpvyo6K7QxwXLcN920DWK8JK3wCkpewBOSIaUeecBPKb0la2SIWSP+lktSVUrKiUA1aSaDpViTUyh2yebGCzBkMP6cwS+gpC7hnVJoZiFuGRWfgvKcY1gRV+fyO+DAS5oZeUnzapkVB2Rfjb0CC7j/ndAQixSB8uXcz9o7bnSlJQfe5SjRfewdxjinSklz7JHOdJ+bKm40eRzWleGTF1oFZQznQOkc8GcmZklADjRCq7xIgml7MVYGSgyShuIKGwVvZfbZIYPK6WSss8Sz7BXer0KCkJ66s5MFQLEVG37QPKByguXKU/2AuXg88oUTeeAJKGCVNtPheLKZLVLy3wGfgO+s+xjlr9iSfceM33vwfT+j48tsenCRIkepxzo7092LlG050HWgXY+harx+YWinGiR1w8IvL/RmoyklW3qcAEwdS6dkjGXzIffab2Mu7S3WTfkH63WKwIijHERTxlbw9aCppJB7U6SEvJMvLvjKBPNvxVFPonGc9MGaz41dOXtYIsFuRhF5OiCTWneZ4EXgEdz8gbgyXvD7ZMyNxM/g0aA/3J9lj4EGABt/PzEJtkxBQAAAABJRU5ErkJggg==">
</a>
<h1 id="title">
<a href="/ja/" title="HTML5 Rocks">HTML5 Rocks</a>
</h1>
<nav></nav>
<ul>
<li>
<a class="home" href="/ja/" rel="home">ホーム</a>
</li>
<li>
<a class="tutorials" href="/ja/tutorials/">投稿とチュートリアル</a>
</li>
<li id="features_show">
<a href="#features">HTML5 の機能</a>
</li>
<li>
<a class="slides" href="/ja/slides">スライド</a>
</li>
<li>
<a class="resources" href="/ja/resources">リソース</a>
</li>
<li>
<a class="why" href="/ja/why">HTML5 を支持する理由</a>
</li>
<li>
<a class="profiles" href="/ja/profiles">投稿者について</a>
</li>
<li>
<a href="https://github.com/html5rocks/www.html5rocks.com/blob/master/README.md" target="_blank">サイト作成協力</a>
</li>
<li id="search_show">
<a href="#search_form">
検索
<img alt="" height="14" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjM0OTMyOUNEN0FEMTFFMEJDMEZDMjAwMjNDNjc0MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjM0OTMyOUREN0FEMTFFMEJDMEZDMjAwMjNDNjc0MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNzMzOTM2MUQ3OTkxMUUwQkMwRkMyMDAyM0M2NzQwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNzMzOTM2MkQ3OTkxMUUwQkMwRkMyMDAyM0M2NzQwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj/umaQAAACdSURBVHjanFLbDQMhDAtMwAiM0lFuBEa4DW4ERmk7ASPQDRghTSSfRKvAPSz5J45D5ODJADM/hE/+RRUuNIKKaGzCDUNSNyhbpgixCIOhZ+jrSIiTjfTl5v/qang55z40xlsYvCEEugqEcbSqplutcBrCiZNw0ugU+zm0cQWreY7OVHC7DDN39WVmCmcDyZdNMBbzGx3AiYnu4CvAALKABcbyDrXxAAAAAElFTkSuQmCC" width="14">
</a>
</li>
</ul>
<div class="subheader search" id="search_form" style="display: none;">
<div class="search">
<form action="/ja/search" id="cse-search-box" role="search">
<img alt="" height="29" id="search_hide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjM0OTMyQTREN0FEMTFFMEJDMEZDMjAwMjNDNjc0MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjM0OTMyQTVEN0FEMTFFMEJDMEZDMjAwMjNDNjc0MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMzQ5MzJBMkQ3QUQxMUUwQkMwRkMyMDAyM0M2NzQwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMzQ5MzJBM0Q3QUQxMUUwQkMwRkMyMDAyM0M2NzQwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps3igWgAAAFzSURBVHjazJfPSsNAEMZ3EygoBAoepD0VBA+Cp76AvoCvkWfK0+gLeBI8FISc2lMhsFBBCPGbMKGrZP/qNh342LKdzI/Z7OxOpPCwruvmGEgX0OWIywH6hBopZeOKJx2wJYYraCb87QvaA74NggJG2dwEwsbgH4AfnFAAKbOV+D+rAd4boQmAo+BMAxaJgGQrjn+EYiJPCNTBuZ7ptWXTrKHCM3DB/mM2Y46QTL+HcoPzM7SDSkg5gBW0gB4NPi30lnHR55ZgJQeqLBnrwNISizjzAWqzjQP8G7hxxOuhPu/LBA4F9s9kjqW1gZcRwH6JaSOtA7f+rZatCgT+PBxOaVlkllRCTzxWPB8EbSOAtKRbHkPBbeYoeBNweEZFgBVBm0igiAQ3kxyDUmtLFgbHB+jV8zUMB/6L4f8dtTFSu9ru/tie+LQv74D2G0nQD7rdE5dnzZxjnWJCJQTXHP9MGrPJWtDJmu3knxUIePJb5luAAQDWPZwf40bkcAAAAABJRU5ErkJggg==" width="29">
<label>
<span>検索:</span>
<input autocomplete="off" id="q" name="q" placeholder="HTML5 Rocks" type="search">
</label>
</form>
</div>
</div>
<div class="subheader features" id="features" style="display: none;" tabindex="0">
<div class="features">
<img alt="" height="29" id="features_hide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjM0OTMyQTREN0FEMTFFMEJDMEZDMjAwMjNDNjc0MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjM0OTMyQTVEN0FEMTFFMEJDMEZDMjAwMjNDNjc0MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMzQ5MzJBMkQ3QUQxMUUwQkMwRkMyMDAyM0M2NzQwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMzQ5MzJBM0Q3QUQxMUUwQkMwRkMyMDAyM0M2NzQwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps3igWgAAAFzSURBVHjazJfPSsNAEMZ3EygoBAoepD0VBA+Cp76AvoCvkWfK0+gLeBI8FISc2lMhsFBBCPGbMKGrZP/qNh342LKdzI/Z7OxOpPCwruvmGEgX0OWIywH6hBopZeOKJx2wJYYraCb87QvaA74NggJG2dwEwsbgH4AfnFAAKbOV+D+rAd4boQmAo+BMAxaJgGQrjn+EYiJPCNTBuZ7ptWXTrKHCM3DB/mM2Y46QTL+HcoPzM7SDSkg5gBW0gB4NPi30lnHR55ZgJQeqLBnrwNISizjzAWqzjQP8G7hxxOuhPu/LBA4F9s9kjqW1gZcRwH6JaSOtA7f+rZatCgT+PBxOaVlkllRCTzxWPB8EbSOAtKRbHkPBbeYoeBNweEZFgBVBm0igiAQ3kxyDUmtLFgbHB+jV8zUMB/6L4f8dtTFSu9ru/tie+LQv74D2G0nQD7rdE5dnzZxjnWJCJQTXHP9MGrPJWtDJmu3knxUIePJb5luAAQDWPZwf40bkcAAAAABJRU5ErkJggg==" width="29">
<h2>機能</h2>
<ul>
<li>
<a class="offline" href="/ja/features/offline"></a>
<h3>オフライン</h3>
</li>
<li>
<a class="storage" href="/ja/features/storage"></a>
<h3>ストレージ</h3>
</li>
<li>
<a class="connectivity" href="/ja/features/connectivity"></a>
<h3>コネクティビティ</h3>
</li>
<li>
<a class="file_access" href="/ja/features/file_access"></a>
<h3>ファイル アクセス</h3>
</li>
<li>
<a class="semantics" href="/ja/features/semantics"></a>
<h3>セマンティクス</h3>
</li>
<li>
<a class="multimedia" href="/ja/features/multimedia"></a>
<h3>音声/動画</h3>
</li>
<li>
<a class="graphics" href="/ja/features/graphics"></a>
<h3>3D/グラフィック</h3>
</li>
<li>
<a class="presentation" href="/ja/features/presentation"></a>
<h3>プレゼンテーション</h3>
</li>
<li>
<a class="performance" href="/ja/features/performance"></a>
<h3>パフォーマンス</h3>
</li>
<li>
<a class="nuts_and_bolts" href="/ja/features/nuts_and_bolts"></a>
<h3>基本機能</h3>
</li>
</ul>
</div>
</div>
<a class="watermark" href="/"></a>
<nav class="paginator_home"></nav>
<ul class="home">
<li>
<a class="next" href="/ja/mobile">モバイル</a>
</li>
</ul>
<ul class="mobile">
<li>
<a class="previous" href="/ja/">ホーム</a>
</li>
<li>
<a class="next" href="/ja/gaming">ゲーム</a>
</li>
</ul>
<ul class="gaming">
<li>
<a class="previous" href="/ja/mobile">モバイル</a>
</li>
<li>
<a class="next" href="/ja/business">ビジネス</a>
</li>
</ul>
<ul class="business">
<li>
<a class="previous" href="/ja/gaming">ゲーム</a>
</li>
</ul>
<nav class="paginator_features"></nav>
<ul class="offline">
<li>
<a class="next" href="/ja/features/storage">ストレージ</a>
</li>
</ul>
<ul class="storage">
<li>
<a class="previous" href="/ja/features/offline">オフライン</a>
</li>
<li>
<a class="next" href="/ja/features/connectivity">コネクティビティ</a>
</li>
</ul>
<ul class="connectivity">
<li>
<a class="previous" href="/ja/features/storage">ストレージ</a>
</li>
<li>
<a class="next" href="/ja/features/file_access">ファイル アクセス</a>
</li>
</ul>
<ul class="file_access">
<li>
<a class="previous" href="/ja/features/connectivity">コネクティビティ</a>
</li>
<li>
<a class="next" href="/ja/features/semantics">セマンティクス</a>
</li>
</ul>
<ul class="semantics">
<li>
<a class="previous" href="/ja/features/file_access">ファイル アクセス</a>
</li>
<li>
<a class="next" href="/ja/features/multimedia">音声/動画</a>
</li>
</ul>
<ul class="multimedia">
<li>
<a class="previous" href="/ja/features/semantics">セマンティクス</a>
</li>
<li>
<a class="next" href="/ja/features/graphics">3D/グラフィック</a>
</li>
</ul>
<ul class="graphics">
<li>
<a class="previous" href="/ja/features/multimedia">音声/動画</a>
</li>
<li>
<a class="next" href="/ja/features/presentation">プレゼンテーション</a>
</li>
</ul>
<ul class="presentation">
<li>
<a class="previous" href="/ja/features/graphics">3D/グラフィック</a>
</li>
<li>
<a class="next" href="/ja/features/performance">パフォーマンス</a>
</li>
</ul>
<ul class="performance">
<li>
<a class="previous" href="/ja/features/presentation">プレゼンテーション</a>
</li>
<li>
<a class="next" href="/ja/features/nuts_and_bolts">基本機能</a>
</li>
</ul>
<ul class="nuts_and_bolts">
<li>
<a class="previous" href="/ja/features/performance">パフォーマンス</a>
</li>
</ul>
</div>
<!-- block1 -->
<div id="block2">
<div class="outline_nav_toggle deactivated">
<img alt="" class="show" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAYAAADU8sWcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTAyRDZFQUJFOEVFMTFFMDg2NkJGNDlCNjE5NENEMzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTAyRDZFQUNFOEVFMTFFMDg2NkJGNDlCNjE5NENEMzIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MDJENkVBOUU4RUUxMUUwODY2QkY0OUI2MTk0Q0QzMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MDJENkVBQUU4RUUxMUUwODY2QkY0OUI2MTk0Q0QzMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pprl4SwAAAIcSURBVHjazFfNasJAEI6ptiIGBCUQbfAWxWu96EUfwAY8tg+gD1A8F+99gfoA9ijoA9he9GKvIt5EMRJyEFKKDQidlaSIyW5iYkgHhiyZzX4zk/nbEOWAJpNJGh4V4DudGYttn8Bz4EGxWJw7OTfkALQBXKPOIwTeASXeXYEDcEMH9kLIG21QYu0IHECRS1+BBeoypAI3rX4F7TMwpcdHF86uEsF9AD6mZ1BAsHQ7CJ7g8WB3wmazia1Wq7imaWHjXSaTUbPZrOpAAQn4EX6B+geuR3Wf9NVisWBGo9HtdruNWckjkci+UCjI5XJ5baMAyoLOMfgLPKq43cPhkJ/NZqwT3yYSie96vT6PRqN7QgCKyHpat/ps4FwuR7VaLdN+5JleryfsdrsrQgDWjICrkFzt1OJTBcbjcZqw5d4ArxIKDec2tJHSoMQ1RiygtKZxqYU+lGWZ8ZJb0+k0RRALNKZJUMvlkvGa2JIkxUngYWxNVNUbYy2KokmeSqUObCWDlKQURbGtfDQVIGEtZxjmx1j3++b6g1ItmUxaypw2HFpPehPxPK96tYzjuC9Sz6f1xm9VqTSWZT0pAOVWsQPHThtQAiW3wPl8XkYG4IAP5RUWH7gDUKdCh5wLjOp7qVQiNZhB4I3FAEdVrhtISw10mDhSoOvjGGUaJE8rXBOXeheg9ukEG+jo/L8uDRe8Lr0B6MD1Xc3vi+KvAAMAMUEG36eXLzcAAAAASUVORK5CYII=">
<img alt="" class="hide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAYAAADU8sWcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTAyRDZFQUZFOEVFMTFFMDg2NkJGNDlCNjE5NENEMzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTAyRDZFQjBFOEVFMTFFMDg2NkJGNDlCNjE5NENEMzIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MDJENkVBREU4RUUxMUUwODY2QkY0OUI2MTk0Q0QzMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MDJENkVBRUU4RUUxMUUwODY2QkY0OUI2MTk0Q0QzMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlXiDkoAAAIdSURBVHjaxFfNasJAEN6sSkUIBOLBFktF0Junek+96wOU3tt76716tw/Q3msfQO8a8GhP3iKIpdJ6MBAIiEWE7shaos1m18SfD4ZFd2a/mc3szqyEBNHtdq/IAJKlsgmDSjufz7dF1pQESG/JcE1ERuL4JtIgTrz4IiekEN0TkVPkH+BEhTjx7jaJGcQlMtQDEiNq/0zX40dOFR/R7lElO9Bgku+ReIWyMxklB/EZGV55iTWbzUL9fl+xbftk9Z8syz+ZTMaKRqMLDrlN5IY48AU/wo6Jey9iINV1/XwwGKhu851OB6XTaVPTtE8PJ2TKU/6LnER9CYnBIh6Px7Fms5mdz+ch3r5GIpFFsVg0EonE1EPtDk7AKttLuyAGgB7og52HWsl51DSWVqvVuhAldjoAdh4qSz5Mt9z1W/d6PdWyrJiftAY7sGd9e+DFjHt6ieFwqAQ5Vxz7LPbK8NFoFIicYy+HRRaJx+NIVVVhUtM00WQy4ephdEQIRQ5RiESyLTC98lyRTCatIItz7G1Muw9XpFKpQOQcewPTQu8afS6XMxVFmfohBjuwZ0XtvF511iKFQuED7uttiEEf7DxUdGe2N1haUCCgUIg6IFhY6pv1vEa7U18lFSBQUhHtbstHbyYkl968tsd7Za2PW7vhaH9VPQQxs2/fQyP5j5j3aIA6X9nBo+GBEBtBnkulLZ2AxHrz/Vw6xEPxV4ABAB9p/+75XTbuAAAAAElFTkSuQmCC">
<nav class="outline features"></nav>
<h3>HTML5 Features</h3>
<ul>
<li class="offline">
<a class="section_title offline" href="/ja/features/offline">オフライン</a>
<ul>
<li>
<a href="/ja/features/offline#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/offline#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/offline#updates">新機能</a>
</li>
<li>
<a href="/ja/features/offline#demos">デモ</a>
</li>
<li>
<a href="/ja/features/offline#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/offline#resources">リソース</a>
</li>
</ul>
</li>
<li class="storage">
<a class="section_title storage" href="/ja/features/storage">ストレージ</a>
<ul>
<li>
<a href="/ja/features/storage#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/storage#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/storage#updates">新機能</a>
</li>
<li>
<a href="/ja/features/storage#demos">デモ</a>
</li>
<li>
<a href="/ja/features/storage#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/storage#resources">リソース</a>
</li>
</ul>
</li>
<li class="connectivity">
<a class="section_title connectivity" href="/ja/features/connectivity">コネクティビティ</a>
<ul>
<li>
<a href="/ja/features/connectivity#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/connectivity#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/connectivity#updates">新機能</a>
</li>
<li>
<a href="/ja/features/connectivity#demos">デモ</a>
</li>
<li>
<a href="/ja/features/connectivity#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/connectivity#resources">リソース</a>
</li>
</ul>
</li>
<li class="file_access">
<a class="section_title file_access" href="/ja/features/file_access">ファイル アクセス</a>
<ul>
<li>
<a href="/ja/features/file_access#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/file_access#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/file_access#updates">新機能</a>
</li>
<li>
<a href="/ja/features/file_access#demos">デモ</a>
</li>
<li>
<a href="/ja/features/file_access#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/file_access#resources">リソース</a>
</li>
</ul>
</li>
<li class="semantics">
<a class="section_title semantics" href="/ja/features/semantics">セマンティクス</a>
<ul>
<li>
<a href="/ja/features/semantics#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/semantics#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/semantics#updates">新機能</a>
</li>
<li>
<a href="/ja/features/semantics#demos">デモ</a>
</li>
<li>
<a href="/ja/features/semantics#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/semantics#resources">リソース</a>
</li>
</ul>
</li>
<li class="multimedia">
<a class="section_title multimedia" href="/ja/features/multimedia">音声/動画</a>
<ul>
<li>
<a href="/ja/features/multimedia#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/multimedia#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/multimedia#updates">新機能</a>
</li>
<li>
<a href="/ja/features/multimedia#demos">デモ</a>
</li>
<li>
<a href="/ja/features/multimedia#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/multimedia#resources">リソース</a>
</li>
</ul>
</li>
<li class="graphics">
<a class="section_title graphics" href="/ja/features/graphics">3D/グラフィック</a>
<ul>
<li>
<a href="/ja/features/graphics#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/graphics#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/graphics#updates">新機能</a>
</li>
<li>
<a href="/ja/features/graphics#demos">デモ</a>
</li>
<li>
<a href="/ja/features/graphics#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/graphics#resources">リソース</a>
</li>
</ul>
</li>
<li class="presentation">
<a class="section_title presentation" href="/ja/features/presentation">プレゼンテーション</a>
<ul>
<li>
<a href="/ja/features/presentation#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/presentation#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/presentation#updates">新機能</a>
</li>
<li>
<a href="/ja/features/presentation#demos">デモ</a>
</li>
<li>
<a href="/ja/features/presentation#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/presentation#resources">リソース</a>
</li>
</ul>
</li>
<li class="performance">
<a class="section_title performance" href="/ja/features/performance">パフォーマンス</a>
<ul>
<li>
<a href="/ja/features/performance#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/performance#updates">新機能</a>
</li>
<li>
<a href="/ja/features/performance#themes">テーマ</a>
</li>
<li>
<a href="/ja/features/performance#technologies">技術</a>
</li>
<li>
<a href="/ja/features/performance#techniques">手法</a>
</li>
<li>
<a href="/ja/features/performance#tools">ツール</a>
</li>
<li>
<a href="/ja/features/performance#further_reading">その他の情報</a>
</li>
</ul>
</li>
<li class="nuts_and_bolts">
<a class="section_title nuts_and_bolts" href="/ja/features/nuts_and_bolts">基本機能</a>
<ul>
<li>
<a href="/ja/features/nuts_and_bolts#intro">はじめに</a>
</li>
<li>
<a href="/ja/features/nuts_and_bolts#support">ブラウザ サポート</a>
</li>
<li>
<a href="/ja/features/nuts_and_bolts#updates">新機能</a>
</li>
<li>
<a href="/ja/features/nuts_and_bolts#demos">デモ</a>
</li>
<li>
<a href="/ja/features/nuts_and_bolts#in_the_wild">活用例</a>
</li>
<li>
<a href="/ja/features/nuts_and_bolts#resources">リソース</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- block2 -->
<div class="page current loaded" id="home">
<div id="block3">
<header id="start">
<section class="feed pattern-bg" id="updates"></section>
</header>
<img id="updates_title" onload="pagespeed.lazyLoadImages.loadIfVisible(this);" pagespeed_lazy_src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/static/images/site_title.png.pagespeed.ce.zzYa4xGl2w.png" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+A1BTQQAsAAAAAAEAAQAAAgJEAQA7">
<h2>
最新の記事
<a href="http://feeds.feedburner.com/html5rocks" style="vertical-align:text-top;" target="_blank">
<img alt="RSS" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJpSURBVDjLfVNJT1NRGL0/wY0/wonaEesOAxoTF4bEpY1GFGGBqEUhggjYaCVIcIKC1TiHiCEBiXEhVdm4EDaaKI2WofTRlqbYR8sbOhzfd5v3tEK8i5d3F+fcM3wf+3x065bZc9t6F5rNCLeYsXTJgkibBUK7FcsdVkS7bIh57Ihfs2PFa0fihgOx6w4QhrCMfmKXnYi4y7DcbEK8zYxEhwVJjxW/vDaIPXak+xxYv1MOqX8PlEEn1PtOKP4KTsLoZQLHvQeRfjeAzPsBiE9O/Rec9e+F7HMiqiljJJteXvXX4O9TkEUon4awPlS5KThzq5xbY+SZZCf7DkGa8kH9Mo58SvjDpKwh+/biBnCq245opw2MAtvMszxah0IiaPDkPl4tASc9Nh40ow+B089ruexceBrqVC/kB5Vcdj44YZDIr5sM8Eq71larBYyqopczw6dLMuDSR11cdm52wshltaeCg6MtVLtGQD3rsqVHh6FOdqEgCgaJOuLisvVcMgEfBwtuExYvmMEoyQ1VPd5vSC9oQPH2PqRHzhfvksjB4YYyLLh3g9GE6eD83AcUhBkemPKwylCSHrvCZROYTtR7BPP1uzB3ViOg8SSwOl5v2M9HprlsOXCz6ORbgMuWvk7ye/KlF6GTOxE6YwKj2SbZ2eFq7pmOOvOCp732tJbfs8J3Ljv1pr9IMHYXP47vwM8GjYAWQx8S5Vk1pFd1JVUlB2uQuHeCe15qPQCh+xjmm6oQdG1HqFGzQAtBi/HvkOhV6YGRZ5JNLxN4sbG4kUxfZ1oMaoTGk4aLhoR6pqoobQqMPJNsellf598J2Or0Mh3FtwAAAABJRU5ErkJggg==" width="16">
</a>
</h2>
<ul id="updates_list">
<li data-pubdate="8月 3, 2012">
<span class="date">8/3</span>
<span class="author" data-author_id="christiancantrell">
<img alt="Christian Cantrell" height="20" onload="pagespeed.lazyLoadImages.loadIfVisible(this);" pagespeed_lazy_src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/static/images/profiles/75/20x20wchristiancantrell.75.png.pagespeed.ic.txF7rb9etL.png" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+A1BTQQAsAAAAAAEAAQAAAgJEAQA7" title="Christian Cantrell" width="20">
</span>
<span class="title">
<a href="/ja/tutorials/regions/adobe/">Magazine-like Layout for the Web with CSS Regions and Exclusions</a>
</span>
<span class="classes">
<span class="class presentation">
<span class="class_name">presentation</span>
</span>
</span>
</li>
<li data-pubdate="7月 27, 2012">
<span class="date">7/27</span>
<span class="author" data-author_id="brianford">
<img alt="Brian Ford" height="20" onload="pagespeed.lazyLoadImages.loadIfVisible(this);" pagespeed_lazy_src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/static/images/profiles/75/20x20wbrianford.75.png.pagespeed.ic.7E5h_I8L1P.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+A1BTQQAsAAAAAAEAAQAAAgJEAQA7" title="Brian Ford" width="20">
</span>
<span class="title">
<a href="/ja/tutorials/frameworks/angular-websockets/">Writing an AngularJS App with Socket.IO</a>
</span>
<span class="classes">
<span class="class business">
<span class="class_name">business</span>
</span>
<span class="class connectivity">
<span class="class_name">connectivity</span>
</span>
</span>
</li>
<li data-pubdate="7月 26, 2012">
<span class="date">7/26</span>
<span class="author" data-author_id="ilmari">
<img alt="Ilmari Heikkinen" height="20" onload="pagespeed.lazyLoadImages.loadIfVisible(this);" pagespeed_lazy_src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/static/images/profiles/75/20x20wilmari.75.png.pagespeed.ic.GiKlEJtdfM.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+A1BTQQAsAAAAAAEAAQAAAgJEAQA7" title="Ilmari Heikkinen" width="20">
</span>
<span class="title">
<a href="/ja/tutorials/webgl/globe/">Making of the World Wonders 3D Globe</a>
</span>
<span class="classes">
<span class="class graphics">
<span class="class_name">graphics</span>
</span>
</span>
</li>
<li data-pubdate="7月 25, 2012">
<span class="date">7/25</span>
<span class="author" data-author_id="seanmiddleditch">
<img alt="Sean Middleditch" height="20" onload="pagespeed.lazyLoadImages.loadIfVisible(this);" pagespeed_lazy_src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/static/images/profiles/75/20x20wseanmiddleditch.75.png.pagespeed.ic.KCzBueAN6z.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+A1BTQQAsAAAAAAEAAQAAAgJEAQA7" title="Sean Middleditch" width="20">
</span>
<span class="title">
<a href="/ja/tutorials/casestudies/subsonic/">Case Study: SONAR, HTML5 Game Development</a>
</span>
<span class="classes">
<span class="class file_access">
<span class="class_name">file_access</span>
</span>
<span class="class graphics">
<span class="class_name">graphics</span>
</span>
</span>
</li>
<li data-pubdate="7月 23, 2012">
<span class="date">7/23</span>
<span class="author" data-author_id="dutton">
<img alt="Sam Dutton" height="20" onload="pagespeed.lazyLoadImages.loadIfVisible(this);" pagespeed_lazy_src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/static/images/profiles/75/20x20wdutton.75.png.pagespeed.ic.-cjG49aHXk.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH+A1BTQQAsAAAAAAEAAQAAAgJEAQA7" title="Sam Dutton" width="20">
</span>
<span class="title">
<a href="/ja/tutorials/webrtc/basics/">Getting Started with WebRTC</a>
</span>
<span class="classes">
<span class="class multimedia">
<span class="class_name">multimedia</span>
</span>
<span class="class connectivity">
<span class="class_name">connectivity</span>
</span>
</span>
</li>
</ul>
<span class="share" style="right:320px;left: auto;position: absolute;bottom:initial;"></span>
<ul>
<li class="googleplus">
<div class="g-plusone" data-count="true" data-href="http://www.html5rocks.com/" data-size="medium"></div>
</li>
<li class="facebook" data-url="http://www.html5rocks.com/"></li>
<li class="twitter">
<a class="twitter-share-button" data-lang="ja" data-related="ChromiumDev:News and announcements for developers from the Google Chrome team and makers of HTML5 Rocks." data-url="http://www.html5rocks.com/" href="http://twitter.com/share">ツイートする</a>
</li>
</ul>
<p>
<a href="/ja/tutorials/">もっと見る &rarr;</a>
</p>
<article class="clearfix sectioned" id="intro">
<header class="two_columns clearfix pattern-bg">
<hgroup></hgroup>
</header>
</article>
<h1>HTML5ROCKS へようこそ</h1>
<h2>ご自分はどのようなタイプの HTML デベロッパーだと思いますか。</h2>
<p>
HTML5 は、ウェブでのユビキタス プラットフォームです。モバイル ウェブ デベロッパーでも、固有のビジネス ニーズを持つ企業でも、本格的なゲーム デベロッパーでも、新しいプラットフォームとしてウェブの可能性を探っているデベロッパーなら HTML5 が最適です。該当するものを選択してください:
</p>
<div class="clearfix thirds">
<section class="one_third link_target pattern-bg"></section>
<a href="/ja/mobile"></a>
<h2>モバイル</h2>
<p>
ウェブ デベロッパーは、知り尽くしている一連の技術を使用して、さまざまなタイプの端末上で動作する機能が豊富なウェブ アプリケーションを構築できます。
</p>
<section class="one_third link_target pattern-bg"></section>
<a href="/ja/gaming"></a>
<h2>ゲーム</h2>
<p>
パフォーマンスの高い 2D/3D グラフィック、オフライン アセット ストレージ、機能の豊富な音声 API、ソケットベースのネットワーキングを利用して、最新の魅力的なゲームを作成し、今までより幅広くユーザーにアピールできます。
</p>
<section class="one_third link_target pattern-bg"></section>
<a href="/ja/business"></a>
<h2>ビジネス</h2>
<p>
HTML5 は、他の IT モデルでは実現できなかった、シンプルさ、コスト、セキュリティ、柔軟性、機動性での重要なメリットを企業にもたらします。
</p>
</div>
</div>
<div id="block4">
<article class="clearfix sectioned" id="technology">
<section class="pattern-bg" id="classes">
<header class="two_columns">
<hgroup></hgroup>
</header>
</section>
</article>
<h1>HTML5 の機能</h1>
<p>
HTML5 はさまざまな面でウェブ プラットフォームを強化しています。HTML5 の主要な機能グループをお試しください。
</p>
<ul>
<li class="offline">
<a href="/ja/features/offline">
<h3>オフライン</h3>
</li>
<li class="storage">
<a href="/ja/features/storage">
<h3>ストレージ</h3>
</li>
<li class="connectivity">
<a href="/ja/features/connectivity">
<h3>コネクティビティ</h3>
</li>
<li class="file_access">
<a href="/ja/features/file_access">
<h3>ファイル アクセス</h3>
</li>
<li class="semantics">
<a href="/ja/features/semantics">
<h3>セマンティクス</h3>
</li>
<li class="multimedia">
<a href="/ja/features/multimedia">
<h3>音声/動画</h3>
</li>
<li class="graphics">
<a href="/ja/features/graphics">
<h3>3D/グラフィック</h3>
</li>
<li class="presentation">
<a href="/ja/features/presentation">
<h3>プレゼンテーション</h3>
</li>
<li class="performance">
<a href="/ja/features/performance">
<h3>パフォーマンス</h3>
</li>
<li class="nuts_and_bolts">
<a href="/ja/features/nuts_and_bolts">
<h3>基本機能</h3>
</li>
</ul>
</div>
<!-- block4 -->
<div id="block5">
<div class="clearfix thirds">
<section class="one_third link_target pattern-bg"></section>
<a href="/ja/why"></a>
<h2>HTML5 を支持する理由</h2>
<p>
<strong>注目する理由</strong>
<br>
HTML5 には、デベロッパーがウェブ アプリの作成に利用できる最先端の機能が数多く導入されています...
</p>
<section class="one_third link_target pattern-bg"></section>
<a href="/ja/tutorials/"></a>
<h2>最新情報</h2>
<p>
<strong>最新情報をチェック</strong>
<br>
HTML5 の機能の利用方法を紹介する記事、チュートリアル、事例、デモ
</p>
<section class="one_third link_target pattern-bg"></section>
<a href="/ja/resources"></a>
<h2>リソース</h2>
<p>
<strong>いつでも HTML5 をフル活用</strong>
<br>
HTML5 の習得をサポートするその他の精選リソース リスト
</p>
</div>
</div>
<!-- block5 -->
</div>
</div>
<!-- block3 -->
<!-- blockmain -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment