html5入門 tag:html5.imedia-web.net,2011-04-11://5 2012-04-19T05:37:53Z html5の入門サイトです。タグの説明に加え、サンプルやテンプレートも用意しています。 Movable Type Pro 5.12 html5で書いてみよう tag:html5.imedia-web.net,2012://5.252 2012-04-19T01:14:14Z 2012-04-19T05:37:53Z 「習うより慣れろ！」という言葉がありますが、まずは自分の手でもhtml5を書いて... webmaster ]]> <!DOCTYPE html>
<html lang="ja">
で、書けだせば、それはhtml5のコードとなります。
既にhtml4で書いてあるコードも、この宣言部を変えれば一応html5のコードという事になります。
しかし、それではhtml5にしても意味がないので、構造化タグと少しCSSを加えたモノを用意しました。
ダウンロードするかソースをコピペして保存して使用してください。

デモ画面とダウンロードファイル

IEScript.gif
デモ画面（別ウインドウ表示）
ダウンロードファイル：html5_sample1.zip(1KB）

構造化タグを用いたソースコード

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サイト名</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<header id="head"><h1>サイト名</h1></header>
<nav id="navi"><ul><li><a href="./">Home</a></li></ul></nav>
<article class="post">
<h2>記事タイトル</h2>
<p>html5の構造化タグを使った練習ページ。</p>
</article>
<article class="post">
<h2>記事タイトル２</h2>
<p>ブログのトップページの構造になります。</p>
</article>
<footer id="foot"><a href="./">サイト名</a></footer>
</div>
</body>
</html>

style.css

body{
text-align:center;
}

#wrap{
width:500px;
margin:0 auto;
text-align:left;
border:solid 1px #333;
}

#head {
padding:10px;
border-bottom:solid 1px #333;
}

#navi {
border-bottom:solid 1px #333;
}

.post {
padding:10px;
}

#foot {
border-top:solid 1px #333;
text-align:center;
padding:10px;
}

IE対策 ソースコード

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]--> <!--[if lte IE 7]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
の部分は、IEだとhtml5を装備していないので、html5のタグを認識してくれません。
なので、これをいれないと
noIEScript.gif
のように表示されてしまいます。
※body,divタグのwrapは判別されてます。

という事で、自分でソースをダウンロードして文字変更したりarticleを足したりしてみましょう。
手を動かすとぐっとhtml5が身近な存在になります。
あとは、このサイトにあるコードを付け足して色々試してみてください。
]]> html5テンプレートサイトまとめ tag:html5.imedia-web.net,2012://5.249 2012-04-18T01:34:03Z 2012-04-18T03:02:56Z html5のテンプレートサイト、またはテンプレートサイトをまとめた記事を集めまし... webmaster
]]> html5テンプレートサイト
link1.gif

Free HTML5 Templates

海外の人気サイトでテンプレートは250個あります。
ここだけで充分お気に入りが見つかりそうです。

⇒ダウンロードページ：一覧から「more info」をクリックして、個別記事の「Download here」ボタン

html5テンプレートサイト紹介記事 国内

紹介しているサイトは国内ですが、紹介されてるテンプレートは海外サイトが多いです。

html5テンプレートサイト紹介記事 海外

]]> ローカルストレージのサンプル tag:html5.imedia-web.net,2012://5.248 2012-04-12T04:02:24Z 2012-04-12T04:57:38Z ローカルストレージのサンプルコードです。 セッションストレージのコードからses... webmaster ローカルストレージのサンプルコードです。
  • セッションストレージのコードからsessionをlocalに変える。
  • onloadで起動時にローカルストレージを読み込ませる
の2点を加えました。

セッションはブラウザをシャットダウンすると値がなくなりますが、
ローカルストレージは再起動しても値が保持されている事を確認してみてください。

]]> サンプルコードの表示結果

入力フィールド

Key：　値：

入力結果

キー値

ソースコード


<script type="text/javascript">
//ブラウザチェック
 if (typeof localStorage == 'undefined') {
  document.write("<p>お使いのブラウザではWeb Storageが使えません。</p>");
 } else {
  //セッションストレージ設定
  var storage = localStorage;

  //ボタンイベント1 保存
  function setlocalStorage() {
    var key = document.getElementById("textkey").value;
    var value = document.getElementById("textdata").value;
    if (key && value) {
      storage.setItem(key, value);
    }
    key = "";
    value = "";
    viewStorage();
  }

  //ボタンイベント2 削除
  function removeStorage() {
    var key = document.getElementById("textkey").value;
    storage.removeItem(key);
    key = "";
    viewStorage();
  }

  //ボタンイベント3 全て削除
  function removeallStorage() {
    storage.clear();
    viewStorage();
  }

  //イベント発生時にテーブルにストレージの値を表示
  function viewStorage() {
    var list = document.getElementById("list")
    while (list.firstChild) list.removeChild(list.firstChild);
    for (var i=0; i < storage.length; i++) {
      var _key = storage.key(i);
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      list.appendChild(tr);
      tr.appendChild(td1);
      tr.appendChild(td2);
      td1.innerHTML = _key;
      td2.innerHTML = storage.getItem(_key);
    }
  }
  //起動時にテーブルにストレージの値を表示
  function load() {
    var list = document.getElementById("list")
    while (list.firstChild) list.removeChild(list.firstChild);
    for (var i=0; i < localStorage.length; i++) {
      var _key = localStorage.key(i);
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      list.appendChild(tr);
      tr.appendChild(td1);
      tr.appendChild(td2);
      td1.innerHTML = _key;
      td2.innerHTML = localStorage.getItem(_key);
  }
}


 }
</script>

<h4>入力フィールド</h4>
<p>Key：<input id="textkey" type="text" />　値：<input id="textdata" type="text" /></p>
<p align="right">  <button id="button" onclick="setlocalStorage()">保存</button>
  <button id="button" onclick="removeStorage()">削除</button>
  <button id="button" onclick="removeallStorage()">全て削除</button></p>
<h4>入力結果</h4>
<table class="tagForList2">
    <tr>
      <th>キー</th><th>値</th>
    </tr>
    <tbody id="list">
    </tbody>
  </table>
]]> セッションストレージのサンプル tag:html5.imedia-web.net,2012://5.247 2012-04-09T07:37:41Z 2012-04-12T01:20:13Z セッションストレージのサンプルコードです。 まずは、使っているブラウザがセッシ... webmaster セッションストレージのサンプルコードです。
まずは、使っているブラウザがセッションストーレジを使えるかチェックします。
使えなければメッセージが表示され、使用可能あれば入力フィールドと結果を表示します。

]]> サンプルコードの表示結果

入力フィールド

Key：　値：

入力結果

キー値

ソースコード


<script type="text/javascript">
//ブラウザチェック
 if (typeof sessionStorage == 'undefined') {
  document.write("<p>お使いのブラウザではWeb Storageが使えません。</p>");
 } else {
  //セッションストレージ設定
  var storage = sessionStorage;

  //ボタンイベント1 保存
  function setsessionStorage() {
    var key = document.getElementById("textkey").value;
    var value = document.getElementById("textdata").value;
    if (key && value) {
      storage.setItem(key, value);
    }
    key = "";
    value = "";
    viewStorage();
  }

  //ボタンイベント2 削除
  function removeStorage() {
    var key = document.getElementById("textkey").value;
    storage.removeItem(key);
    key = "";
    viewStorage();
  }

  //ボタンイベント3 全て削除
  function removeallStorage() {
    storage.clear();
    viewStorage();
  }

  //テーブルにストレージの値を表示
  function viewStorage() {
    var list = document.getElementById("list")
    while (list.firstChild) list.removeChild(list.firstChild);
    for (var i=0; i < storage.length; i++) {
      var _key = storage.key(i);
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      list.appendChild(tr);
      tr.appendChild(td1);
      tr.appendChild(td2);
      td1.innerHTML = _key;
      td2.innerHTML = storage.getItem(_key);
    }
  }
 }
</script>

<h4>入力フィールド</h4>
<p>Key：<input id="textkey" type="text" />　値：<input id="textdata" type="text" /></p>
<p align="right">  <button id="button" onclick="setsessionStorage()">保存</button>
  <button id="button" onclick="removeStorage()">削除</button>
  <button id="button" onclick="removeallStorage()">全て削除</button></p>
<h4>入力結果</h4>
<table class="tagForList2">
    <tr>
      <th>キー</th><th>値</th>
    </tr>
    <tbody id="list">
    </tbody>
  </table>
]]> WebStorageとは tag:html5.imedia-web.net,2012://5.246 2012-04-09T07:08:46Z 2012-04-09T07:35:28Z 「WebStorage（ウェブストレージ）」とは、データをブラウザ側で保存する機... webmaster 「WebStorage（ウェブストレージ）」とは、データをブラウザ側で保存する機能です。

データをブラウザ側で保存する機能としては「cookie（クッキー）」が一般的でしたが、「WebStorage」は「cookie」よりも大容量で長期間の保存が可能になっています。

]]> 2種類のWeb Storage

Web Storageにはセッションストレージとローカルストレージの2種類があります。

セッションストレージはウィンドウが開いている間は有効でウインドウが閉じられるとデータは破棄されます。ローカルストレージはウインドウを閉じても有効で自分のPC内に永続的に保存されます。



サンプルは、また後日記事にします。
]]> 2012年4-6月集中更新中！！ tag:html5.imedia-web.net,2012://5.245 2012-04-03T15:14:00Z 2012-04-19T08:01:21Z 2012年4月より更新を再開しています。 ... webmaster ]]>
しかし、その間に、スマートフォン対応、リツィート一覧の表示方法を学びましたので、
その辺の反映に始まり、中途半端な内容になっている記事のブラッシュアップをしたいと思います。

今度こそ内容が揃う所まで作成しますので、当サイトをよろしくお願いします。

変更内容

  1. ソーシャルボタンの隙間をなくす。　4/3 済
  2. 中途半端なカテゴリー、リンク欄をなくす。 4/3 済
  3. Retweetリストをサイドバーに。4/4 済
  4. Twitterアカウントを取得して更新情報を配信する。4/4 済
  5. スマートフォン版を作成する。4/12 済
  6. タイトルフォントの変更とキャッチ画像の作成4/8 まで
  7. フッターにはてぶ、いいね、アクセスランキングを並べる件数増えるまで保留
  8. サンプル、Q&Aを最低10個は作成する。　Q&Aは一旦削除。
  9. APIを使ったプログラム。候補は体重管理？　webstrageを追加。
    　audio,videoを更新予定
  10. html5作成の手順を作成。4/19 済
  11. 右端に目次を入れ全体内容の見直しと確定。4/19 済
  12. テンプレートの完成版をPC版、スマフォ版。PC版はシンプル、デラックスで2列と3列
期限は2012年6月末までとします。
]]> canvasステップ２　円を描く tag:html5.imedia-web.net,2011://5.219 2011-07-14T08:23:31Z 2011-07-14T08:53:50Z canvasタグで円を描きます。 webmaster サンプルコードの表示結果

ソースコード

<canvas id="c1" width="140" height="140"></canvas>
<script type="text/javascript">
onload = function() {
draw1();
};
/* 円を描く */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI*2, false);
ctx.stroke();
}
</script>
]]> HTML5で廃止されたタグ tag:html5.imedia-web.net,2011://5.218 2011-05-08T13:37:52Z 2011-05-08T14:35:24Z big〔フォントを大きく表示〕s〔テキストに取消線を引く〕strike〔テキスト... webmaster s〔テキストに取消線を引く〕
strike〔テキストに取消線を引く〕
u〔テキストに下線を引く〕
font〔フォント装飾（色・サイズ・種類）〕
center〔要素の左右中央揃え〕

acronym〔頭字語〕
applet〔Javaアプレットの埋め込み〕
basefont〔ページの基準フォントサイズ〕
isindex〔キーワード検索入力欄の埋め込み〕
dir〔ディレクトリ型リスト〕
frame〔フレームの定義〕
frameset〔フレーム（frame要素）の構成〕
noframes〔フレーム未対応ユーザー向けの代替テキスト〕
tt〔テキストを等幅フォントにする〕

]]> canvasとは tag:html5.imedia-web.net,2011://5.217 2011-05-08T05:17:29Z 2011-05-08T06:13:57Z Canvasとはhtml5で新規に指定されたタグでJavaScriptを使い図を描くことができます。 webmaster Canvasとはhtml5で新規に指定されたタグでJavaScriptを使い図を描くことができます。 サンプルコードの表示結果

ソースコード

<!-- html5 タグで canvassample1 を呼び出し、表示サイズを決める -->
<canvas id="canvassample1" width="140" height="140"></canvas>
<script type="text/javascript">
/*draw1メソッドを呼ぶ*/
onload = function() {
draw1();
};
function draw1() {
/*canvassample1を取得する*/
var canvas = document.getElementById('canvassample1');
/*canvasの存在チェックと未対応ブラウザの対処*/
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* コンテキスト指定開始 */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
/* 指定終了 */
ctx.closePath();
/* コンテキストを描く */
ctx.stroke();
}
</script>

IEの場合

今の所、Internet ExplorerはCanvasに対応していません。そのためGoogleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードして指定する必要があります。
ダウンロード先：ExplorerCanvas

指定方法：
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

]]> html5入門を作成しました。 tag:html5.imedia-web.net,2011://5.215 2011-04-25T01:16:09Z 2012-04-03T15:51:14Z 2011年4月1日よりhtml5入門を作成しています。... webmaster
]]> 極力早く全てのページが出揃うように頑張ります。

感想・ご要望頂ければ、その点を優先的に直しますので、ぜひご意見ください。
よろしくお願いします。
]]> 構造タグの細分化 tag:html5.imedia-web.net,2011://5.213 2011-04-21T15:33:35Z 2012-04-04T02:13:52Z html4まではbodyタグの中で、構造を示すタグはありませんでした。 webmaster しかし、html5では、header,navi,section,article,footer などの構造化タグが追加され、
ブラウザや検索エンジンに対して明確に文書構造を伝えられるようになりました。]]> ]]> html5とは tag:html5.imedia-web.net,2011://5.214 2011-04-21T01:20:36Z 2012-04-04T02:11:37Z html5とはhtmlの標準化団体であるw3cが策定したhtmlのバージョン5の事を指します。 webmaster html5とは何か？

html5とはhtmlの標準化団体であるw3cが2010年に策定したhtmlのバージョン5の事を指します。
前回のバージョン4は1999年策定なので実に11年ぶりのメジャーアップになり、html5は2008年に草案が発表され現在、各種ブラウザに取り入れられ始めています。
今すぐhtml5にしないといけないという訳ではありませんが、将来の検索エンジン対策や周辺サイトがhtml5への変更が進む中、覚える必要がある言語といえるでしょう。
]]> html5の特徴

html5の特徴は多数ありますが、その中でも構造化タグと動画編集タグの追加が大きな特徴です。

  • header,footer,articleなど、ヘッダー、フッター、記事部分がどこか区別されるようになった。
  • audio.video,canvasタグにより、動画編集が可能になった。

アップルがflashを採用しない事により、audio,videoタグ、また各種API機能が注目されていて、近い将来大きく広まると推測されています。

html5の範囲

html5は広義な意味だとcss3とセットにされる事もありますが当サイトではhtml5タグとAPIに限定してhtml5を取り扱っています。css3タグを使わない純粋なhtml5のみを使用したシンプルテンプレートも用意しましたので、そちらも参考にしてください。

　]]> デラックス　ブルー tag:html5.imedia-web.net,2011://5.212 2011-04-19T07:56:01Z 2011-04-19T08:02:41Z http://html5.imedia-web.net/templates/de... webmaster http://html5.imedia-web.net/templates/deluxe/2/blue/ ]]> HTML5をサポートしていないIEでは、どのように表示されますか？ tag:html5.imedia-web.net,2011://5.211 2011-04-19T02:06:01Z 2012-04-04T02:45:39Z まずおさらいですが、html5は当サイトではcss3を含みません。 ... webmaster ]]> ソースが
<!DOCTYPE html>
<html lang="ja">
<head>
で、始まっていればhtml5です。

さらに、内部記述にheader,navi,article,footerを使ってもブラウザはタグとして判別し、
class指定、id指定も、ブラウザは読み込み、全く表示されないという訳ではなくレイアウトは多少維持されます。

しかしながらform系などhtml5で追加されたタグは認識されないので、下記スクリプトをheader内に記述しましょう。 そうすればhtml5をサポートしていないIEでも表示されます。
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> <![endif]-->
]]> canvasステップ１　四角を描く tag:html5.imedia-web.net,2011://5.210 2011-04-19T02:03:43Z 2012-04-13T06:43:26Z canvasタグで四角を描きます。 webmaster サンプルコードの表示結果

ソースコード


<canvas id="canvassample1" width="140" height="140"></canvas>
<script type="text/javascript">
 onload = function() {
   draw1();
 };
 function draw1() {
  var canvas = document.getElementById('canvassample1');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(120, 20);
  ctx.lineTo(120, 120);
  ctx.lineTo(20, 120);
  ctx.closePath();
  ctx.stroke();
 }
</script>
]]>