aside 要素を理解しよう - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「Understanding aside」を日本語訳したものです。この記事では、aside 要素について、正しい使い方を解説しています。HTML5 仕様の aside 要素の説明はとても抽象的で分かりにくく、誤解を招きやすい要素の一つといえるでしょう。この記事では、aside 要素をどこに使うべきかが分かりやすく解析しています。 原文タイトル Understanding aside 原文ページ URL http://html5doctor.com/understanding-aside/ 著者 Mike Robinson 氏 原文投稿日 2009-06-19 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがっ
nav 要素を使ったセマンティックなナビゲーション - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「Semantic navigation with the nav element」を日本語訳したものです。この記事では、nav 要素の正しい使い方を解説しています。 原文タイトル Semantic navigation with the nav element 原文ページ URL http://html5doctor.com/nav-element/ 著者 Tom Leadbetter 氏 原文投稿日 2009-07-15 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利
time 要素 - テキストレベルの意味づけ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.5.11 time 要素 カテゴリー: フロー・コンテント フレージング・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フレージング・コンテントが期待される場所 コンテントモデル: フレージング・コンテント コンテント属性: グローバル属性 datetime - マシン可読な値 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: あらゆるロールの値 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: interface HTMLTimeElement : HTMLElement { attribute DOMString dateTime; }; time 要素は、そのコンテンツを表しますが
脚注 - テキストレベルの意味づけ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.6.26 脚注 HTML には、脚注のマークアップのための決まったメカニズムがありません。ここでは、推奨の代替方法を示します。 短いインラインの注釈には、title 属性を使うべきです。 この例では、会話の2カ所に注釈を入れています。 <dialog> <dt>Customer <dd>Hello! I wish to register a complaint. Hello. Miss? <dt>Shopkeeper <dd><span title="Colloquial pronunciation of 'What do you'" >Watcha</span> mean, miss? <dt>Customer <dd>Uh, I'm sorry, I have a cold. I wish to make a complaint. <dt>Shopkeeper <dd>Sorry,
main 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.4.14 main 要素 カテゴリー: フロー・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所。ただし、祖先に article, aside, footer, header, nav 要素があってはならない。 コンテントモデル: フロー・コンテント コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: main ロール (デフォルト - 指定不要) または presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う。 main 要素は、ドキュメントやアプリケーションの body
section 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.3.3 section 要素 カテゴリー: フロー・コンテント セクショニング・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: フロー・コンテント コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: region ロール (デフォルト - 指定不要), alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, presentation, search, status 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DO
drawImage() メソッド - Canvasリファレンス - HTML5.JP
構文 context . drawImage(image, dx, dy) context . drawImage(image, dx, dy, dw, dh) context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) canvas に指定のイメージを描画します。引数は、次のように解釈されます： もし、第 1 引数が img, canvas, video 要素でないなら、TYPE_MISMATCH_ERR 例外を投げます。image にイメージ・データがないなら、INVALID_STATE_ERR 例外を投げます。数値の引数に矛盾があるなら（例えば、描画先が 0 × 0 の矩形）、INDEX_SIZE_ERR を投げます。image が完全にデコードできていないなら、何も描画されません。 仕様 canvas上に画像を表示するには、
font プロパティ - Canvasリファレンス - HTML5.JP
構文 context . font [ = value ] 現在のフォント設定を返します。 値をセットしてフォントを変更することができます。その構文は、CSS の 'font' プロパティと同じです。CSS フォント値として構文解析できない値は無視されます。 関連キーワードと長さは、canvas 要素のフォントに対して算出されます。 仕様 font IDL 属性は、値がセットされると、CSSの 'font' プロパティと同じように解釈されなければいけません（ただし、'inherit'のようなプロパティ非依存のスタイルシート構文はサポートされません。）。その結果、フォントは、'normal' に強制された 'line-height' コンポーネントで、そして、CSS ピクセルに変換された 'font-size' コンポーネントで、そして、明示的な値に算出されているシステムフォントで、コンテキ
save(), restore() メソッド - Canvasリファレンス - HTML5.JP
構文 context . save() 現在の状態をスタックの最後に加えます。 context . restore() スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。 仕様 コンテキストは描画状態のスタックを維持します。描画状態は次の要素から構成されます： 現在の変換マトリックス 現在のクリップ領域 次の属性の現在の値： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline. 現在のパスと現在のビットマップは描画状態に含まれません。現在のパスは、b
さまざまな図形を描く - Canvas - HTML5.JP
Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形（長方形） 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ
Canvasの使い方 - Canvas - HTML5.JP
このコーナーでは、Canvasを使うにあたっての事前準備と、簡単な使い方をまとめました。 ExplorerCanvasのダウンロード Internet ExplorerはCanvasに対応していません。そのため、Googleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードしましょう。0002 ExplorerCanvasダウンロード 2009/03/24現在、ExplorerCanvasの最新版は Release 3 です。excanvas_r3.zip をダウンロードし解凍すると、excanvas.jsというファイルがあります。実際に使うのは、このファイルのみです。このファイルを、Canvasを使うHTMLファイルと同じ場所に設置しておいてください。 HTMLの準備 Canvasを使うHTMLでは、excanvas.jsをロードするようscri
色を指定する - Canvas - HTML5.JP
ctx.strokeStyle = color 図形の枠線の色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 ctx.fillStyle = color 図形を塗りつぶす色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 それぞれのメソッドの具体的な使い方を見てみましょう。 onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); /* 円 #1 */ ctx.beginPath(); ctx.fillSt
メディア要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.7.10 メディア要素 メディア要素 (本仕様においては、audioと video のこと) とは、次のインタフェースを実装したものです： enum CanPlayTypeEnum { "" /* empty string */, "maybe", "probably" }; interface HTMLMediaElement : HTMLElement { // エラー状態 readonly attribute MediaError? error; // ネットワーク状態 attribute DOMString src; readonly attribute DOMString currentSrc; attribute DOMString crossOrigin; const unsigned short NETWORK_EMPTY = 0; const unsigned sho
線形グラデーションを指定する - Canvas - HTML5.JP
このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法を紹介します。グラデーションの処理に関しては、ブラウザごとに若干の違いがあります。このコーナーではブラウザごとの特徴についても触れていきます。 線形グラデーションとは 線形グラデーションとは、開始地点の色から徐々に終了地点の色に直線的に色を変化表示する効果を表します。そのため、開始地点の色と終了地点の色と座標を事前に指定しなければいけません。Canvasの仕様では、開始と終了の2地点だけでなく、その途中の地点にも色を指定することも可能です。いくつもの色を波打つようにグラデーション効果を作ることも可能です。 線形グラデーションを実現するには、2DコンテキストのcreateLinearGradientメソッドと、createLinearGradientメソッドから得られるCanvasGradientオブジェクトのaddCo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5.JP - 次世代HTML標準 HTML5情報サイト