HTML5
増井雄一郎 @masuidrive FrogApps, Inc.遊びでマジメにwri.peを作るwri.pe ブラウザで書けるメモ帳アプリケーションFBやGitHubでログインできる マークダウンフォーマットをサポート テキストだが表現力が高い ショートカットで殆どの操作を出来る Gmailみた…
コンテンツ・モデル｜Web制作 W3G 4 以前 インライン要素 ブロック要素5 以降 フロー インタラクティブ など「コンテンツ」ごとに分類される。 a インタラクティブコンテンツ以外は全てくくれるインタラクティブコンテンツ a select input (ユーザーがクリッ…
すみません、本当に不勉強です。HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス HTML4.01では要素は大きくブロックレベル要素とインライン要素のいずれかに分類されていますが、 HTML5ではブロックレベル要素とインライン要素の分類は無…
headerとfooterについて 1つの文書にheaderとfooterはそれぞれ1つだけあればよい。 (headerとfooterが複数あっても文法上問題はないのだが) header, footerの中にdivやsectionで囲むのは問題ない。 sectionの外をdivで囲むのも問題ない。なお、文書のサマリ…
ページにマイクロデータを追加することは、 すでに存在するHTML要素に数個の属性を追加することである。最初にしないといけないのは itemtype属性を追加し、使用するマイクロデータの語彙を 追加することである。次にしないといけないのは、 itemscope属性を…
マイクロデータとは、独自の語彙から構成される名前と値のペアによって、ある スコープ内のDOMを意味付けする仕組みである。例を見てみると、 マイクロデータは面白い - 気になるITまわり <div> <h1>味噌汁</h1> 材料 <ul> <li>味噌</li> <li>大根</li> <li>ねぎ</li> </ul> </div> <div itemscope itemtype="http://〜"> <h1 itemprop="title">味噌汁</h1> 材料 <ul> <li itemprop="ingredient">味噌</li> </ul></div>
フォームもまだまだあります。 <html lang="ja"> <head> <meta charset="utf-8"> <title>hoge</title> </head> <body> <form> <input type="range" min="0" max="10" step="2"> <input value="6"> </form> <form> <input type="date"> </form> <form> <input type="datetime"> </form></body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title>hoge</title> </head> <body> <input type="email"> <input type="submit" value="Go"> <input type="url"> <input type="submit" value="Go"> <input type="number" min="0" max="10" step="2" value="6"> <input type="submit" value="Go"> </body></html>
autofocus属性を利用して、ページのロードが完了した時点でフォーカスを 特定の入力フィールドへ移動する働きを実装したい。一応こんな風に書けばいいのだけれど、 <form name="f"> <input id="q" autofocus> <input type="submit" value="Go"> </form> 対応していないブラウザもあるので(IE)、 対応していないときはJavaScriptで拾うように…
HTML5においてWebフォームに行われた最初の改良は、 入力フィールドにプレースホルダを設定する機能である。 <html lang="ja"> <head> <meta charset="utf-8"> <title>hoge</title> </head> <body> <form> <input name="q" placeholder="履歴とブックマークを検索"> <input type="submit" value="検索"> </form> </body> </html> こんな風にコードを書くと、 ロケーションバーにプレースホルダ(バーの中の説明…
最も単純なオフラインWebアプリケーションは、HTML、CSSあるいはJavaScriptファイル、画像などの リソースを指し示すURIのリストにすぎない。これはマニフェストファイルと呼ばれている。Webサーバのどこか別のところにある 単なるテキストファイルで、HTML5…
永続的なローカルストレージは、設定や実行時の状態など、 アプリケーションに特有のデータの保存や取り出しを行うため、 オペレーティングシステムによって抽象化されたレイヤが提供されているのが普通である。 これらのデータはレジストリ、INIファイル、X…
h1とh2が並んでいたらhgroupを使う articleで、headerだけで完結していたらダメ(必ず本文が必要) 兄弟関係なのか親子関係なのかを把握することが重要 他との関係性を重視する headerをつけるとfooterもつけないといけないようになる感じがするので、そこまで…
<html lang="ja"> <head> <meta charset="utf-8"> <title>hoge</title> </head> <body> <canvas id="e2" width="256" height="268"></canvas> <canvas id="e3" width="256" height="268"></canvas> <script> var canvas2 = document.getElementById("e2"); var context2 = canvas2.getContext("2d"); var f…</body></html>
createLinearGradient(x0, y0, x1, y1)は、(x0, y0)から(x1, y1)への直線に沿って色が移り変わる。 <body> <canvas id="d1" width=300 height=225></canvas> <canvas id="d2" width=300 height=225></canvas> <canvas id="d3" width=300 height=225></canvas> <script> var d_canvas = document.getElementById("d1"); var context = d_canvas.g…</body>
やってて思ったけどなんでスクリーンショットを貼らなかったんだろう。 完成品がないと分かりづらいじゃないか。とりあえず、前回 方眼紙を描画してみよう - by shigemk2 を拡張したものになります。 方眼紙っぽい何かを描画して、 方眼紙に矢印を描くとこま…
方眼紙っぽい感じのものを描画してみよう。moveTo(x, y)は指定された始点へ鉛筆を移動する lineTo(x, y)は、指定された終点まで線を描く <canvas id=c width=500 height=375></canvas> <script> var c_canvas = document.getElementById("c"); var context = c_canvas.getContext("2d"); for (var x = 0.5; x < 5…
こんな風に書くと、何の内容もないカンバスを 描画することが出来る。 <canvas width=300 height=225></canvas> styleを指定して場所だのボーダーだのを指定できる。 <canvas width=300 height=225 class=clear style="float:left"></canvas> <canvas width=300 height=225 class=clear style="border:1px dotted;float:left"> こんな風にボーダーを指定すると、 ボーダーが描ける。 </canvas>
今まではフッター部分は以下のようにマークアップされていたが、 <div id="footer"> <p>§</p> <p> © 2009 <a href="../semantics.html">Mark Pilgrim</a> </p> </div> HTML5では以下のようにマークアップすることが可能である。 <footer> <p>§</p> <p> © 2009 <a href="../semantics.html">Mark Pilgrim</a> </p> </footer> 入門 HTML5作者: Mark Pilgrim,矢倉眞隆（監訳）,水原文出版社/…
サイトナビゲージョンをマークアップするために、 HTML5ではnavという意味要素が用意されている。これにより、いちいちnav要素を定義しなくてもよくなった。 <div id="nav"> <ul> <li> <a href="../semantics.html">home</a> </li> <li> <a href="../semantics.html">blog</a> </li> <li> <a href="../semantics.html">gallery</a> </li> <li> <a href="../semantics.html">about</a> </li> </ul></div>
<div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="../semantics.html" rel="bookmark" title="link to this post">Travel day</a> </h2> </div> でも、たとえばpost-dateにしても投稿日時なんていちいち定義しなくても 標準のマークアップがありそうではあるよね。こんな風に書けます。 <article> <header> <time datetime="2009-10-22" pubdate="">October…</time></header></article>
<div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="../semantics.html" rel="bookmark" title="link to this post">Travel day</a> </h2> ... </div> 今まではこのように書いていたけど、HTML5ではこのように書ける <article> <p class="post-date">October 22, 2009</p> <h2> </h2></article>
