Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

[ カテゴリー » HTML・タグ ]

カテゴリー » HTML・タグ » HTML5 February 07, 2012

timeタグ ID:1328575330


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

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

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

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

カテゴリー » HTML・タグ » HTML5 February 06, 2012

figureタグとfigcaptionタグ ID:1328497191


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

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

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

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

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

カテゴリー » HTML・タグ » HTML5 February 06, 2012

asideタグ ID:1328495180


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

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

カテゴリー » HTML・タグ » HTML5 February 06, 2012

navタグ ID:1328492104


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

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

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

カテゴリー » HTML・タグ » HTML5 February 03, 2012

sectionタグとarticleタグ ID:1328262304


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

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

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

section h1
article h1

のような構成もOK

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

カテゴリー » HTML・タグ » HTML5 February 02, 2011

canvasで円グラフ ID:1296605625


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

— posted by midilin @ 09:13AM

カテゴリー » HTML・タグ » HTML5 January 25, 2011

html5 Canvasとは ID:1295915733


・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

カテゴリー » HTML・タグ » HTML5 January 24, 2011

html5 videoタグ ID:1295829282


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

カテゴリー » HTML・タグ » HTML5 January 24, 2011

html5 セッションストレージ ローカルストレージ ID:1295828570


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

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

カテゴリー » HTML・タグ » HTML5 January 21, 2011

html5 Drag and Drop (ドラッグ & ドロップ) ID:1295568762


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