正確な日付・時間を表すタグ。
機械的に正確な日付を認識させるためのもの。

今日、明日、とか曖昧なものや
2012年5月12日のように、フォーマットがそろっていないもの
これを
datetime属性を入れることで正確な日付を入れる。

yyyy-mm-ddで最初から表示していれば、
datetime属性は不要。

— posted by midilin @ 09:42AM | Comment (0)

・figureタグ
挿絵や図、写真、動画など、コンテンツから参照したい情報に使うタグ。

独立したものに使用するため、
サイドバーなど移動しても問題ないときに使う。

ただし、文脈として省略できないものはNG。
会社のロゴなども使用しては×

・figcaptionタグ
キャプション、説明文として使用。
figureタグとセットで使われる。

— posted by midilin @ 11:59AM | Comment (0)

メインコンテンツから少し外れた情報に対して用いるタグ
補足的な説明とかに使用。

— posted by midilin @ 11:26AM | Comment (0)

ナビゲーションに使われるタグ。
ナビゲーションとはリンクのこと。

ページ内に遷移するリンクに用いるのが一般的。
ただし、すべてに適用する必要はなく、
フッターとかは不要。

— posted by midilin @ 10:35AM | Comment (0)

sectionタグとarticleタグ、どちらもHTML5の要素。
章や節などのセクションを構成する要素で、
h1やh2などの見出し要素が必要な、ひとまとまりの文章を作るときに利用。

sectionとarticleの違いは
articleは文章のまとまりがそれだけで独立した文章になりえること。
ブログの記事など、見出し要素＋文章なので使える。

またsectionの中にarctileを入れることができる

section h1
article h1

のような構成もOK

— posted by midilin @ 06:45PM | Comment (0)

http://www.html5.jp/library/graph_circle.html

— posted by midilin @ 09:13AM

・Canvasとは
Canvasとは、ブラウザ上に図を描くために策定された仕様
FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことが可能。

Internet Explorer 6以上、Firefox 1.5以上、Opera 9以上、Safari 1.3以上で動く。
（実際は、IE6はCanvasはサポートしていないが
　GoogleがExplorerCanvasというCanvasをエミュレートするJavaScriptライブラリを公開して、実現可能）


・Canvasで可能なこと
線や円などの図形を描くこと
色を塗ること


・Canvasで不可能なこと
描いた図を動かすこと


html5 Canvas概要
http://www.html5.jp/canvas/what.html


ExplorerCanvasのダウンロードとソースの書き方
http://code.google.com/p/explorercanvas/downloads/list
http://www.html5.jp/canvas/how.html

円グラフの描き方
http://www.html5.jp/library/graph_circle.html

— posted by midilin @ 09:35AM

Safari 3.1、 Firefox 3.5、 Opera がサポート

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>

<p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>

</video>

ページがロードするときに再生

><video src="abc.mov" autoplay>
</video>

http://www.html5.jp/html5doctor/the-video-element.html

— posted by midilin @ 09:34AM

ローカルストレージはドメインごとにストレージが異なり、保存されたデータは永久に残り続ける。
セッションストレージはウィンドウごとにストレージが異なり、ウィンドウが閉じられるとデータは削除される。

http://ayuta.co.jp/html5-samples/

・セッションストレージの場合
保存：　sessionStorage.setItem( キー, 値 );
読込：　変数 = sessionStorage.getItem( キー );

・ローカルストレージの場合
保存：　localStorage.setItem( キー, 値 );
読込：　変数 = localStorage.getItem( キー );

※セッションストレージの例

function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
}

function loadStorage(id){
var target = document.getElementById(id);
var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}

※ローカルストレージの例

function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
localStorage.setItem("message",str);
}

function loadStorage(id){
var target = document.getElementById(id);
var msg = localStorage.getItem("message");
target.innerHTML = msg;
}

http://libro99.appspot.com/index3?id=179002&page=2&label=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0

— posted by midilin @ 09:22AM

function init() {
window.addEventListener("dragenter", dragenter, true);
dropbox = document.getElementById("dropbox");
window.addEventListener("dragleave", dragleave, true);
dropbox.addEventListener("dragover", dragover, true);
dropbox.addEventListener("drop", drop, true);
}

ドロップイベントのインターフェイス "dataTransfer" を使ってファイルハンドラを取得

function drop(e) {
var dt = e.dataTransfer;
var files = dt.files;
e.preventDefault();
if (files.length == 0) {
handleData(dt);
return;
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
handleFile(file);
}
}

ファイル APIを使ったファイルの取得方法も掲載されている

File Readerインターフェイスでファイルの読み込める
}

http://netforestdevnote.blog26.fc2.com/blog-entry-36.html

— posted by midilin @ 09:12AM