[
トップ
] [
新規
|
一覧
|
最終更新
|
ヘルプ
]
AND
OR
開始行:
*[[WebApp]]/HTML5 [#a353f23e]
#contents
**基本 [#xd70ba6e]
***構文 [#f757b036]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css" type="text...
<style type="text/css"> スタイルシートを直接記述 </sty...
</head>
<body>
ページ内容
</body>
</html>
***省略可能な要素 [#ce23247d]
|BGCOLOR(#f0f8ff):''省略可能なもの''|BGCOLOR(#f0f8ff):''...
|要素の省略可能|[[html>#i586cb96]] [[head>#n5f8d9d2]] [...
|閉じスラッシュ|br [[img>#ddb6c56c]] [[hr>#wcb10b2f]] ...
-HTML1.0では閉じスラッシュの省略はできない
-HTML5では閉じスラッシュの省略が可能。閉じスラッシュを入...
***グローバル属性 [#c28c60a2]
どの要素にも共通して指定可能な属性。
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''指定する内...
|accesskey|キーボード、ショートカット|
|class|スタイルシートのクラス|
|contenteditable|編集可能/不可能|
|contextmenu|[[menu>#j6e0045c]] 要素のid値を指定してコン...
|dir|テキストの方向|
|draggable|ドラッグの有効/無効|
|hidden|関係、無関係|
|id|固有のid|
|lang|言語|
|spellcheck|スペルチェックの有効性|
|style|スタイルシート|
|tabindex|タブ、インデックス|
|title|タイトル|
|data|独自データ|
***実体参照 [#g61c08c3]
半角スペース
< <
> >
& &
" &quto;
***カテゴリーの種類 [#ra05fbde]
|BGCOLOR(#f0f8ff):''カテゴリー''|BGCOLOR(#f0f8ff):''説明''|
|メタデータ・コンテンツ|HTMLのメタデータやスタイルに関す...
|フロー・コンテンツ|[[body>#m5f98ffb]]要素内に記述する要素|
|セクショニング・コンテンツ|文章のセクションを示す要素([...
|ヘッディング・コンテンツ|セクションの始まりの要素([[h1 ...
|フレージング・コンテンツ|テキストの要素|
|エンベッディッド・コンテンツ|外部ファイル(動画、画像な...
|インタラクティブ・コンテンツ|ユーザが操作することで双方...
|パルパブル・コンテンツ|フロー・コンテンツまたはフレージ...
~
**メタデータ [#h05f64ea]
***html [#i586cb96]
HTML文書の全体を表す要素。
<html lang="ja"></html>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|lang|文書全体の言語を指定|
|manifest|[[マニフェストファイル>#w4bb90e5]]の指定|
***head [#n5f8d9d2]
HTMLの文書のタイトル、スタイルシートなどメタ情報を含める...
メタデータ要素では [[script>#uf604568]]/[[noscript>#tc268...
[[head>#n5f8d9d2]] 要素内には必ず [[title>#ibf1f5ad]] 要...
***title [#ibf1f5ad]
HTML文書のタイトル。[[head>#n5f8d9d2]] 要素の中に必ず入れ...
***meta [#e77de45a]
文字コードの指定などHTML文書に付随する様々なメタ情報。
<meta charset="UTF-8" name="keyword" content="検索キーワ...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|charset|文字エンコーディング|
|name|メタデータのプロパティ名(keyword は検索してヒット...
|http-equiv|プラグマ指示子(ブラウザに対してその文書の状...
|content|name、http-equivに対する値を指定|
|BGCOLOR(#f0f8ff):''http-equiv''|BGCOLOR(#f0f8ff):''説明''|
|content-language|コンテンツの主言語を指定|
|content-type|ファイルタイプ・文字エンコーディングを指定...
|default-style|デフォルトスタイルの指定。link要素で複数の...
|refresh|リダイレクト・再読込を指定(content="秒数; URL=...
***link [#aacd3ec7]
外部リソース(HTML、CSS、RSS)を指定する時に使用。[[head>...
<link rel="stylesheet" href="css/style.css" type="text/c...
<link rel="alternate" hreflang="en" href="english.html"/>
<link rel="alternate" media="print" href="print.pdf" />
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|href|linkファイルのURLを指定(必須)|
|[[rel>#ba8bc416]]|linkファイルとHTMLの関係を指定(必須)...
|[[media>#s55aaec6]]|linkファイルの対象メディアを指定([[...
|hreflang|linkファイルの言語を指定|
|type|linkファイルのMIMEタイプを指定(省略可能で、デフォ...
|sizes|アイコンをリンクする場合にサイズを指定|
***base [#lda0b6df]
[[img>#ddb6c56c]] 要素の src など、相対パスの基準URLを指...
<base href="http://vre.sakura.ne.jp/img/">
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|href|基準となるURLを指定|
|target|基準となるファイルのターゲット指定|
***style [#tf8bdca9]
スタイルシートを記述する。scoped属性を指定しない場合は文...
<style type="text/css">スタイルシートの内容を記述する</s...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|type|sytleのMIMEタイプを指定|
|[[media>#s55aaec6]]|スタイルを適用するメディアを指定する...
|scoped|<style scoped>〜</style>が記述されてた親要素と子...
***script [#uf604568]
JavaScriptを埋め込む場合に使用。[[head>#n5f8d9d2]] または...
async または defer を指定しない場合は、スクリプトファイル...
<script type="text/javascript src="script.js" async></sc...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|type|タイプを指定(デフォルトは text/javascript)|
|src|読み込む外部ファイルのURLを指定|
|async|ページを描画しつつ、スクリプトが読み込まれた時点で...
|defer|ページの読み込みが完了した時点でスクリプトを実行(...
|charset|外部スクリプトファイルの文字エンコーディングを指...
***noscript [#tc268306]
スクリプトが実行されない環境での代替を記述する。
<noscript>JavaScriptを利用していますのでONにして下さい</...
~
#br
**セクション [#m2d06383]
***セクションとアウトラインの概念 [#y155f6c6]
セクション要素を入れ子にしてアウトラインを作成する。~
各セクションは最初にある見出し([[h1 〜 h6>#n40cf96d]])...
[[h1 〜 h6>#n40cf96d]] に対して暗黙的にセクションが区切ら...
<section>
<h1>1 見出し1</h1>
内容
<section>
<h2>1.1 見出し1</h2>
内容
</section>
</section>
***セクショニングルート [#r6bb83b1]
親のアウトラインから独立したアウトライン(階層構造)を持...
以下の要素がセクショニングルートに属する要素。~
-[[body>#m5f98ffb]]~
-[[blockquote>#d08d4c0a]]~
-[[details>#de65a277]]~
-[[fieldset>#u27db09b]]~
-[[figure>#s0529dd4]]~
-[[td>#fe595c17]]~
***h1 〜 h6 [#n40cf96d]
見出しを示す。数値が小さい程、大きい見出しとなる。~
見出しを配置すると暗黙的に新しいセクションを開始したこと...
セクショニング・コンテンツの要素([[article>#rc06fdd3]]、...
その後に低い見出しが続く場合は、暗黙的にサブセクションを...
同ランク以上の見出しが続く場合は、暗黙的に新しいセクショ...
***body [#m5f98ffb]
html 要素内で1度だけ使用でき、ドキュメントの内容を表す。~
***header [#z2a1dea6]
イントロダクションやナビゲーショングループであることを示...
見出し([[h1 〜 h6>#n40cf96d]])が含まれてることが想定さ...
***nav [#s8cce2f3]
ナビゲーション(他のページ或いはページ内の部分にリンクす...
利用規約ページ、著作権ページ、トップページへ戻るなどは na...
<nav>
<h1>メニュー</h1>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="shop.html">店舗紹介</a></li>
</ul>
</nav>
***section [#c5cb94f1]
セクションは文脈に沿ってコンテンツをテーマ別にグループ化...
[[section>#c5cb94f1]] 要素の子として見だし([[h1〜h6>#n40...
一般的に [[section>#c5cb94f1]] 要素は、要素の内容が文書の...
***article [#rc06fdd3]
内容が独立した単独の記事として完結するセクションであるこ...
[[article>#rc06fdd3]] を入れ子にして使用する場合、内側の ...
<body>
<article>
<header>
<h1>スタッフ紹介</h1>
<p><time datetime="2014/12/28">3 day a go</time></p>
</header>
<p>新しいコンテンツが増えました</p>
<footer>
<a href="?comments=1">コメントを見る</a>
<p>投稿:管理人</p>
</footer>
</article>
</body>
***aside [#jd4249e9]
本文のメインコンテンツ以外の要素(補足情報など)であるこ...
本文と関連してはいるけれど区別して掲載するべき内容のこと。~
<p>本文</p>
<aside> <p>補足情報</p> </aside>
***footer [#f70ba36a]
そのセクションに関する情報のことで、著作権や、関連文書へ...
<footer>
<p>Copyright 2010</p>
</footer>
***address [#q6121714]
そのセクション要素の住所や連絡先を表す。~
連絡先情報以外の情報を含めてはいけない。~
直近の親要素が [[article>#rc06fdd3]] であった場合は、[[ar...
直近の親要素が [[body>#m5f98ffb]]であった場合は、文書全体...
<address><a href="/about/">株式会社 北コーン</a></address>
~
**グルーピング [#f85bbc69]
***main [#h4f903ce]
メインコンテンツであることを示す。~
HTML文書の中で1回のみ使用し、要素の中に [[header>#z2a1dea...
***div [#k56a7b39]
特別な意味を持たない要素で、主にコンテンツをスタイリング...
<div style=" background-color:black; color:white;">
<p>黒背景、白文字</p>
</div>
***p [#e862f8aa]
段落を示す。<p>〜</p>の間が1つの段落になる。~
***ol / ul / li [#x84bf14a]
ol 順序立てられたリスト(インデントに番号を付与)を記述す...
ul インデントに・が付与するリストを記述する場合に使用。
<ol reversed="reversed" start="3">
<li>3. </li>
<li>2. </li>
<li value="5">5. </li>
</ol>
|BGCOLOR(#f0f8ff):''<ol>属性''|BGCOLOR(#f0f8ff):''説明''|
|start|リストの始まりの番号を指定。指定した番号から付与さ...
|reversed|reversedを指定することで、リストの並びを降順に...
|BGCOLOR(#f0f8ff):''<li>属性''|BGCOLOR(#f0f8ff):''説明''|
|value|リスト番号を変更する(親要素が<ol>の場合のみ指定可...
***dl / dt / dd [#f5cc3ae7]
dl で名前(dt)と値(dd)を持つ記述リストを定義する。dd ...
<dl>
<dt>商品説明</dt>
<dd>・安い</dd>
<dd>・早い</dd>
<dd>・旨い</dd>
<dt>発売時期</dt>
<dd>・2014/12/29</dd>
</dl>
***hr [#wcb10b2f]
段落レベルのテーマの区切り。コンテンツの内容が切り替わる...
***pre [#o6a68f31]
改行などを含むテキストをもそのまま改行されて表示される。~
<pre>
整形済みテキスト
改行もされる
</pre>
***blockquote [#d08d4c0a]
他のソースから文書などを引用したセクションであることを示...
<blockquote cite="http://vre.sakura.ne.jp/">
瑠璃アプリからの〜
</blockquote>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|cite|引用元のURLを記述|
***figure [#s0529dd4]
本文から参照されるような説明文のついた図や表を示す。~
<p>詳しい説明は<a href="#ruri">こちらの画像</a>を参照</p>
<figure id="ruri">
<img src="./ruri.gif">
<figcaption>瑠璃の全身図</figcaption>
</figure>
***fogcaption [#r3e7e72c]
[[figure>#s0529dd4]]要素で指定した図に対するキャプション...
~
#br
**テキスト [#qd234c3a]
***a [#af1b649e]
他サイトに移動するためのハイパーリンクを指定。~
name属性が廃止され id属性で指定する方法に変更されている。~
<a href="/">ホーム</a>
<a href="#link2">IDでリンク先へ</a>
<h2 id="link2">商品No2</h2>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|href|リンク先のURL|
|target|開く場合のターゲット|
|rel|リンク先との関連性|
|media|リンク先のメディアを指定|
|hreflang|リンク先の言語を指定|
|type|リンク先のMIMEタイプを指定|
|BGCOLOR(#f0f8ff):''target''|BGCOLOR(#f0f8ff):''説明''|
|_self|現在のウィンドウでリンク先を開く|
|_parent|現在のウィンドウの親ウィンドウでリンク先を開く|
|_top|現在のウィンドウの最上位階層のウィンドウでリンク先...
|_blank|新しいタブやウィンドウでリンク先を開く|
|名前|任意の名前を付けたウィンドウでリンク先を開く|
***span [#be364fc0]
[[フレージング・コンテンツ>#ra05fbde]]を、ひとつの範囲と...
単独では何も意味を持ってない為、style属性・class属性・lan...
<span style="background-color: #33CC33">背景が黄色</span>
<style> span.red { color: #ff0000; } </style>
<span class="red">この範囲はスタイルシートで指定したスタ...
***strong [#e2b2e17d]
重要度が高いことを示す。入れ子にすることでより重要度が高...
***em [#r065c8fd]
コンテンツを部分的に強調する場合に使用する。入れ子の階層...
***small [#r6eb8450]
註釈や細目(著作権表記、ライセンス要件など)を示す。~
***time [#wf228ea9]
日付や24時間制での正確な日時を記載する場合に使用。~
コンピュータが読み取ることが可能な形式で日時を記載する必...
<time>2014-12-29</time>
<time datetime="2014-12-31">大晦日</time>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|datetime|<time>要素の中に日時以外の内容を記述することが...
***cite [#ic31b852]
文書内に引用して使用した作品のタイトル(本、新聞、歌、台...
タイトルのみを意味するので作者名などは使用できない。~
***q [#m766d520]
短い文章を引用する際に使用する。cite属性は引用元のURLを指...
<q cite="http://vre.sakura.ne.jp/">引用部分</q>
***dfn [#zd28f15f]
定義された用語を示す。~
dfn要素の親となる段落かセクション、または記述リストの同じ...
<dl>
<dt><dfn title="HyperText Markup Language">HTML</dfn><...
<dd>Webページを制作するためのマークアップ言語</dd>
</dl>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|title|<dfn>要素内の文字ではなく、ここで指定した文字を定...
***abbr [#w0017753]
略語、または頭文字を示す。~
<dfn><addr title="HyperText Markup Language">HTML</addr>...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|title|正式名称を示す。|
***code / var / samp [#u281d063]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|
|code|プログラムのコードを示す|
|var|数式やプログラムで、変数や定数を表す識別子を示す|
|samp|プログラムなどの出力サンプルを示す|
***kbd [#te25e951]
ユーザーが入力する部分(キーボードや音声入力)を指定する...
<kbd> <kbd>CTRL</kbd> + <kbd>C</kbd> </kbd>
***sub / sup [#vdec60c8]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|BGCO...
|sub|下付き文字を示す|水の化学式はH<sub>2</sub>O|
|sup|上付き文字を示す|3<sup>3</sup>=27|
***i / b / u / s / mark [#a4d486bd]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|
|i|音声や心の声など、他の内容と異なっている場合に使用|
|b|他と区別したいテキストを示す場合に使用。重要性を伝える...
|u|ラベル付けを行う。明確に伝わらなかったり、本来とは異な...
|s|テキストが正確でないことを示す。テキストの内容を修正す...
|mark|ハイライトすることで重要な部分に注意が向くことにす...
***ruby / rt / rp / rtc [#aa0b13bb]
ルビをふる。rubyを親要素とし、rt子要素で読み仮名を記述す...
rp は rt の前後に指定することで、振り仮名サポートしてない...
rtc は 複数のルビを振る場合に、<rt>要素を区別する為に指定...
<ruby>川澄<rt>かわすみ</rt>舞<rt>まい<rt></ruby>
<ruby>亜米利加<rp>(</rp><rt>アメリカ</rt><rp>)</rp></r...
<ruby>亜米利加
<rtc><rt>アメリカ</rt></rtc>
<rtc><rt>America</rt></rtc>
</ruby>
***bdi [#e3e5959c]
テキストの一部を異なる文字の方向に指定する場合に使用。こ...
英文(左から右)の中にアラビア語(右から左)を入れる場合...
***bdo [#a58f3afd]
文字の表示方向を指定。
<bdo dir="rtl">右から左に表示</bdo>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|dir|表示方向を指定(ltr:左から右、rtl:右から左)|
***wbr [#h56078d2]
コンテンツの表示領域が小さくなった時に折り返す位置を明示...
wbr を入れておくことで、必要に応じて、その箇所で折り返さ...
***ins [#d9cc36e4]
文書や画像を後から挿入、追加する場合に使用。
<ins datetime="2014-12-29T13:08:30">
<p>追加した情報</p>
</ins>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|cite|訂正理由の参照先|
|datetime|訂正した日時|
|title|補足情報|
***del [#fdd35980]
文書を削除、訂正する場合に使用。
<del datatime="2014-12-30T01:10:30>火曜日開催</del>
~
#br
**埋め込みコンテンツ [#abd6eac9]
***img [#ddb6c56c]
画像をHTMLファイルに埋め込む。
<img src="image.png" width="100" height="100" alt="イメ...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|alt|代替テキストを指定|
|src|イメージファイルのURL(必須)|
|usemap|クライアントサイドイメージマップを利用。詳細は [[...
|ismap|埋め込み画像のサーバサイドイメージマップを指定|
|width|画像の横幅指定|
|height|画像の縦幅指定|
***map / area [#w768e4e8]
map で [[img>#ddb6c56c]] 要素を指定(usermapで定義された...
<img src="map.png" usemap="#example">
<map name="example">
<area shape="rect" coords="50,50,150,150" h...
<area shape="circle" coords="250,100,50" h...
<area shape="poly" coords="400,50,450,150,350,150" h...
<area shape="default" h...
</map>
|BGCOLOR(#f0f8ff):''map''|BGCOLOR(#f0f8ff):''説明''|
|name|イメージマップの名前( [[img>#ddb6c56c]] 要素の use...
|BGCOLOR(#f0f8ff):''area''|BGCOLOR(#f0f8ff):''説明''|
|shape|リンク領域の形状|
|coords|座標(x,y)shapeの内容によって指定が異なる|
|href|リンク先の指定|
|alt|代替テキスト|
|hreflang|リンク先の記述言語|
|type|リンク先のMIMEタイプ|
|rel|現在の文書からみたリンク先の関係|
|media|対象とするメディア|
|target|リンク先の表示方法|
|BGCOLOR(#f0f8ff):''shape''|BGCOLOR(#f0f8ff):''説明''|
|rect|四角形(左上と右下の座標 x,y,x,y)|
|circle|円形 (中心点の座標と半径 x,y,半径)|
|poly|多角形(x,y,x,y...)|
|default|画像全体(指定しない)|
***iframe [#r81d7174]
インラインフレームでコンテンツを表示する場合に使用。
<iframe src="http://vre.sakura.ne.jp/" width="1024" heig...
<iframe srcdoc="<p>フレームの内容を直接ここに記述</p>" s...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|フレーム内に表示する文書のURL|
|srcdoc|フレームで表示する内容を直接記述する|
|sandbox|フレームの表示を制御。引数を指定することで制限を...
|width|フレームの幅|
|height|フレームの高さ|
|name|フレームの名前|
|seamless|インラインフレームのコンテンツを親コンテンツの...
|BGCOLOR(#f0f8ff):''sandbox''|BGCOLOR(#f0f8ff):''説明''|
|allow-same-origin|親文書と同じドメインを持つものとする|
|allow-top-navigation|最上位のウィンドウの操作を許可する|
|allow-forms|フォームの送信を許可する|
|allow-scripts|スクリプトの実行を許可する|
***embed [#yb9ca5af]
FLASHなどの外部のプラグインなどを利用するファイルを表示す...
<embed src="flash.swf" type="application/x-shockwave-fla...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|コンテンツのURLを指定|
|type|MIMEタイプを指定|
***video [#cbba16a2]
動画やオーディオファイルを読み込み再生する時に使用。~
この要素に対応しているブラウザでは、プラグインを使わずに...
<video src="video.mp4" preload="metadata" width="400" he...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|動画のURLを指定|
|poster|静止画のURLを指定|
|preload|先読みの目安を指定|
|mediagroup|グループ名を指定|
|autoplay|自動再生を行う|
|loop|ループ再生を行う|
|muted|音声を出さない|
|controls|コントローラを表示する|
|BGCOLOR(#f0f8ff):''preload''|BGCOLOR(#f0f8ff):''説明''|
|none|先読みなし|
|metadata|メタデータは先読み|
|auto|動画全体を先読み|
***object [#c3ecac21]
様々な形式のコンテンツ(画像、音声、動画、HTML文書、Java...
<object data="example.jpg" type="image/jpeg" width="300"...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|data|オブジェクトの指定(必須)|
|type|オブジェクトのMIMEタイプを指定(必須)|
|name|オブジェクトの名前を定義|
|usemap|クライアントサイドイメージマップを利用。詳細は [[...
|form|フォームとの関連付けられてる場合はidを指定|
***param [#h6c74c93]
[[object>#c3ecac21]]の子要素として使用。[[object>#c3ecac2...
<object data="sample.mp3" type="audio/mp3">
<param name="src" value="sample.mp3">
<param name="bgcolor" value="#ffffff">
<a href="bgm1.mp3">音楽再生</a>
</object>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|パラメータ名(任意)を指定|
|value|パラメータの値を指定|
***audio [#ec06286b]
音や音楽ファイルの再生に使用する。この要素に対応してるブ...
<audio src="bgm0.mp3" autoplay loop></audio>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|音声ファイルのURLを指定|
|preload|先読みの目安を指定(none、metadata、auto)|
|mediagroup|グループ名を指定|
|autoplay|自動再生を行う|
|loop|ループ再生を行う|
|muted|音声を出さない|
|controls|コントローラを表示する|
***source [#fcdc4fc4]
[[audio>#ec06286b]] や [[video>#cbba16a2]] 内に source 子...
<audio preload="metadata" controls>
<source src="bgm1.mp3" type="audio/mp3">
<source src="bgm1.ogg" type="audio/ogg">
</audio>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|動画・音声ファイルの指定|
|type|MIMEタイプを指定|
|media|対象とするメディアを指定([[Appendix media参照>#s5...
***track [#q94c3724]
動画や音声ファイルに字幕やキャプションなどのテキストを指...
<video>
<source src="video.mp4">
<track src="video_ja.vtt" kind="subtitles" srclang="ja...
</video>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|テキストトラックの指定(VTTフォーマットを指定)(必...
|kind|トラックの種類を指定|
|srclang|テキストトラックの記述言語を指定|
|label|トラックのタイトルを指定|
|default|トラックを有効にする|
|BGCOLOR(#f0f8ff):''kind''|BGCOLOR(#f0f8ff):''説明''|
|subtitles|翻訳の字幕(初期値)|
|captions|難聴用の字幕|
|descriptions|音声合成用のテキスト|
|chapters|頭出し用のタイトル|
|metadata|スクリプト用のデータ|
***canvas [#gb6d0def]
HTML上にグラフィックを描く為の領域を作る。~
グラフィックスは別途<script>で作成する。対応してないブラ...
<canvas id="canvas">非対応</canvas>
<script>
// 黒く塗り潰された正方形を描画
var canvas = document.getElementById('canvas');
if (canvas && canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(50,50,50,50);
}
</script>
***svg [#ed994a1b]
SVGで描画を指定する。ベクターグラフィックスなので拡大縮小...
<svg>
<rect x="5" y="5" width="100" height="80" ry="10" ...
<circle cx="100" cy="80" r="40" ...
<ellipse cx="100" cy="80" rx="90" ry="40" ...
<polyline points="0,0 100,150 250,30 0,0" ...
<polygon points="0,0 80,110 200,130 180,80 0,0" ...
</svg>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|fill|枠内の色|
|stroke|枠線の色|
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|
|<rect>|四角形/角丸四角形(x y width height ry:角の...
|<circle>|正円(cx cy r:半径)|
|<ellipse >|楕円(cx cy rx:縦の半径 ry:横の半径)|
|<line>|直線(x1 y1 x2 y2)|
|<polyline>|連続直線(points)|
|<polygon>|多角形(points)|
~
#br
**テーブル [#wcc1f6fa]
***table / th / tr / td [#fe595c17]
table を親要素に tr で「行」を作り、th(太字になる)また...
<table border="1">
<caption>表のタイトル</caption>
<colgroup span="2" width="60"> <!-- 1 - 2列目の...
<colgroup span="1" width="100"> <!-- 3列目の横幅...
<colgroup span="1" class="sample"> <!-- 4列目はスタ...
<thead>
<tr><th id="name">名前</th><th>年齢</th><th>好物</th...
</thead>
<tbody>
<tr><td headers="name">川澄</td><td>18</td><td>牛丼<...
<tr><td headers="name">雪 </td><td>20</td><td>不明<...
<tbody>
</table>
|BGCOLOR(#f0f8ff):''table属性''|BGCOLOR(#f0f8ff):''説明''|
|border|表がレイアウト目的で無いことを明示する場合は、空...
|BGCOLOR(#f0f8ff):''th/td属性''|BGCOLOR(#f0f8ff):''説明''|
|colspan|セルの結合(水平方向)|
|rowspan|セルの結合(垂直方向)0で全ての列を結合(グルー...
|headers|どの見出しに対するデータなのか明確にする。<th>で...
|scope|見出しの対象範囲 |
|BGCOLOR(#f0f8ff):''scope''|BGCOLOR(#f0f8ff):''説明''|
|auto|自動、文脈に基づいて判断(初期値)|
|row|行方向のセルを対象にする|
|col|列方向のセルを対象にする|
|rowgroup|行グループ内の全セルを対象にする|
|colgroup|列グループ内の全セルを対象にする|
***caption [#oe8c278a]
表のタイトルを記述。テーブルの上部に表示される。
***colgroup / col [#d7d005d5]
表の列をグループ化する。グループ化した列は同じ属性やスタ...
colの動作はcolgroupと同じだがグループ化の意味を持たない。~
<colgroup span="2" width="100" >
<colgroup>
<col span="2" width="100">
<col span="1" width="60">
</colgroup>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|span|グループ化する列数(<col>子要素を持たない場合のみ指...
***thead / tbody / tfoot [#e6445f54]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|BGCO...
|thead|表のヘッダであることを示す|1つのみ|
|tbody|表の本体であることを示す|複数指定可能|
|tfoot|表のフッタであることを示す|1つのみ|
~
#br
**フォーム [#afe9a039]
***from [#jb1a62fd]
<form method="post" action="from.cgi">
<p>お名前:<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|action|送信先の指定|
|method|HTTPメソッドの指定(get post)|
|enctype|送信時のデータ形式|
|accept-charset|送信時の文字エンコーディング|
|name|フォームの名前を指定|
|target|送信結果の表示方法を指定|
|autocomplete|オートコンプリートの有効有無(on off)|
|novalidate|妥当性をチェックしない|
|BGCOLOR(#f0f8ff):''enctype''|BGCOLOR(#f0f8ff):''説明''|
|application/x-www-form-urlencoded|URLエンコード(初期値)|
|multipart/form-data|マルチパート|
|text/plain|プレーンテキスト|
***fieldset / legend [#u27db09b]
fieldsetは 複数の入力フォームをグループ化する。黒枠で囲ま...
legend は [[fieldset>#u27db09b]] 要素内の最初に記述し、グ...
<fieldset form="group1">
<legend>個人情報</legend>
<p>お名前:<input type="text" name="name" size="30" fo...
<p>ご住所:<input type="text" name="address" size="50"...
</fieldset>
<form method="post" action="from.cgi" id="group1">
<p><input type="submit" value="送信する"></p>
</form>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|form|fieldset をどの [[form>#jb1a62fd]] 要素に関連付ける...
|name|部品グループの名前を指定(スクリプトから参照する際...
|disabled|グループ内の部品を無効にする|
***label [#u9c16f09]
入力フォームに項目名などのラベルをつける。~
ラベル部分のクリックでその部品を選択できるようになる。~
<label>名前:<input type="text"></label>
<label for="tellabel">電話:</label>
<input type="text" id="tellabel">
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|for|idで指定された部品に関連付ける|
***input [#s67cd020]
フォーム部品(入力欄・選択肢・ボタン)を作成する。
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|accept|type="file"の場合にサーバ側で受け取れるファイルの...
|alt|画像の代替テキストを指定|
|autocomplete|オートコンプリートを有効にする|
|autofocus|オートフォーカスを有効にする|
|checked|ラジオボタンとチェックボックスの初期状態でのチェ...
|dirname|フォームのinput要素の書字方向を示すクエリ名を指定|
|disabled|input要素を無効にする|
|form|どの [[form>#jb1a62fd]] 要素に関連付けるか指定する...
|formaction|送信先のURLを指定|
|formenctype|送信するデータ形式を指定|
|formmethod|送信方法を指定(get post)|
|formnovalidate|入力されたデータの確認を無効にする|
|formtarget|ターゲット先を指定|
|name|フォーム部品を識別するための名前を指定(ここで指定...
|value|ボタン名や、テキストならテキストエリアに表示される...
|type|フォーム部品の種類を指定|
|height|高さを指定|
|width|幅を指定|
|list|リスト要素を id 属性で指定|
|max|入力できる数値の最大値を指定|
|min|入力できる数値の最小値を指定|
|maxlength|入力できる最大文字数を指定|
|minlength|入力できる最小文字数を指定|
|multiple|複数の値の入力、選択を可能に設定|
|pattern|入力値のパターンを指定|
|placeholder|入力内容に初期表示するテキストを指定|
|readonly|読み取り専用に指定|
|required|入力必死に指定|
|size|表示文字数を指定|
|src|画像ファイルのURLを指定|
|step|入力欄のステップ数を指定|
typeの指定
|BGCOLOR(#f0f8ff):''分類''|BGCOLOR(#f0f8ff):''type''|BGCO...
|テキスト|text|1行のテキスト入力欄|
|~| password|パスワード入力欄|
|~|tel|電話番号の入力欄|
|~|url|URLの入力欄|
|~|email|メールアドレスの入力欄|
|~|search|検索テキストの入力欄|
|時間|datetime|UTC(協定世界時)による日時の入力欄|
|~|datetime-local|ローカル日時の入力欄|
|~|date|日付の入力欄|
|~|month|年月の入力欄|
|~|week|週の入力欄|
|~|time|時間の入力欄|
|数・色|number|数値の入力欄|
|~|range|大まかな数値の入力欄|
|~|color|色の入力欄|
|選択|radio|ラジオボタン|
|~|checkbox|チェックボックス|
|他|file|ファイルの送信欄|
|~|hidden|隠しデータ|
|ボタン|submit|送信ボタン|
|~|image|画像形式の送信ボタン|
|~|reset|リセットボタン|
|~|button|汎用的なボタン|
***button [#b654496f]
フォームの送信ボタンなどを作成する。~
<input type="button"> と異なり要素内でボタン名を指定で...
<button type="submit" name="btn-name" value="btn-value">...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定|
|value|送信される値を指定|
|type|ボタンの種類(submit reset button)|
|autoforcus|オートフォーカスを指定|
|formaction|送信先の指定(form要素のaction属性上書き)|
|formmethod|HTTPメソッド(form要素のmethod属性上書き)|
|formenctype|送信時データ形式(form要素のenctype属性上書...
|formtarget|送信結果表示方法(form要素のtarget属性上書き)|
|formnovalidate|妥当性をチェックしない(form要素のnovalid...
***select [#i06aa356]
選択ボックスを作成する。
<select name="select1" multiple size=3>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3" selected>選択肢3</option>
</select>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定(option要素...
|size|表示する選択肢の数を指定(デフォルトは1。multipleが...
|autoforcus|オートフォーカスを指定|
|disabled|操作を無効にする|
|multiple|複数選択を可能にする|
|required|必須入力|
***option / optgroup [#l8176a13]
[[select>#i06aa356]] の子要素として、選択項目を記述する。~
optgrpup は [[option>#l8176a13]] をグループ化する。~
<select name="select1" multiple size=3>
<optgroup label="グループ1">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</optgroup>
</select>
|BGCOLOR(#f0f8ff):''option属性''|BGCOLOR(#f0f8ff):''説明''|
|label|項目の表示名|
|value|送信する値(省略時は要素の内容が送信される)|
|selected|最初から選択された状態にする|
|disabled|選択できないようにする|
|BGCOLOR(#f0f8ff):''optgroup属性''|BGCOLOR(#f0f8ff):''説...
|label|グループの表示名|
|disabled|操作を無効にする|
***textarea [#jfc22354]
複数行のテキスト入力エリアを指定。
<textarea name="textarea" cols="50" rows="10">最初から表...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定|
|cols|1行当たりの最大文字数|
|rows|テキストエリアの表示行数|
|maxlength|入力可能な最大文字数を指定|
|readonly|ユーザーテキストの編集を無効化し読み取り専用に...
|disabled|操作を無効にする|
|wrap|入力テキストの改行ルール(soft:改行反映せず送信 h...
|autofocus|自動フォーカスの指定|
|placeholder|入力ヒントの文字列を指定(薄い色で指定した文...
|dirname|入力内容の書字方向(ltr または rtl)とセットで送...
|required|入力必須|
***keygen [#tfc43dde]
鍵のペア(公開鍵と秘密鍵)の作成を行う。選択できる鍵の長...
フォームが送信されると秘密鍵はローカル保存、公開鍵はパッ...
<keygen name="key">
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定|
|keytype|暗号化方式(現状rsaしか指定できない)|
|challenge|公開鍵と一緒に送信する任意の文字列を指定|
|disabled|フォーム部品を無効化する|
***output [#d9a7f45c]
計算の結果を表す場合に使用。(対応してるブラウザなら数値...
<form onsubmit="return false" oninput="answer.value = a....
<input type="number" name="a"> + <input type="number" ...
= <output name="answer" for="a b"></output>
</form>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|出力欄を識別する為の名前を指定|
|for|計算対象のフォームを明示したい場合に使用(指定しなく...
***progress [#n6a2a8a2]
タスクが完了するまでの進捗状況を表示させる。~
スクリプトと組み合わせてリアルタイムに進捗状況を表示させ...
<progress value="30" max="100">進捗度:30%</progress>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|max|全体の量(初期値は1)|
|value|全体量に対する進捗度|
***meter [#u2c0caeb]
特定の範囲内における数量や割合を示す。バーの色が最適値の...
<meter value="50" min="0" max="100" low="30" height="60"...
<!-- 0〜30:低い値 30 〜 60:中間値 60 〜 100:高い値(最...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|value|計測結果の値(必須)|
|min|最小値|
|max|最大値|
|low|最も低い値の上限値を指定|
|high|最も高い値の下限値を指定|
|optimum|最適となる値を指定(省略時はlowとheightの中間)...
***datalist [#cbac782a]
入力フォームの為の入力候補を定義する。
<p><input type="text" name="day1" list="daylist"></p>
<p><input type="text" name="day2" list="daylist"></p>
<datalist id="daylist">
<option value="12/30"></option>
<option value="12/31"></option>
</datalist>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|id|[[input>#s67cd020]] で定義されたlist属性の値を指定|
~
#br
**インタラクティブ [#w2595fb1]
ユーザの操作によって表示、非表示のコントロールが可能な要...
***details / summary [#de65a277]
ユーザ操作によって表示/非表示可能なコントローラ(アウトラ...
[[summary>#s3054193]] 子要素がある場合は、[[summary>#s305...
<details open>
<summary>詳細</summary>展開される内容をここに記述
</details>
|BGCOLOR(#f0f8ff):''details属性''|BGCOLOR(#f0f8ff):''説明...
|open|詳細情報を最初から展開しておく|
***menu [#j6e0045c]
操作メニューのコマンドリストを作成する(HTML5の仕様通りに...
<p contextmenu="con">ここで右クリックするとコマンドが表...
<menu type="context" id="con">
<li>コマンド1</li>
<li>コマンド2</li>
</menu>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|type|メニューの種類を指定(context:右クリックで表示され...
|label|ラベル名を指定。入れ子にされた<menu>要素に指定する...
***dialog [#ue3faeb3]
dialog 要素は閲覧者が操作することが可能なダイアログを表示。
<dialog open>
<p>ダイアログを表示</p>
</dialog>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|open|dialog要素がブラウザ上で表示され操作可能になる|
~
#br
**HTML5で廃止された要素と属性 [#f7cec4e4]
***廃止された要素 [#e8562220]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|BGCO...
|acronym|略称|addr|
|applet|Javaアプレットの埋め込み|object|
|bgsound|BGMの再生|sound|
|basefont|基準となるフォントサイズ|CSS|
|big|大きめの文字|CSS|
|blink|文字の点滅|CSS|
|center|センタリング|CSS|
|font|フォントのサイズ・色・種類|CSS|
|tt|等幅フォント|CSS font-family:monospace;|
|strike|取り消し線|del|
|isindex|1行のテキスト入力欄|form|
|dir|ディレクトリ型のリスト|ul|
|frame|フレーム内の設定|iframe|
|rb|ルビベース|ruby / rt|
|frameset|ウィンドウの分割|廃止|
|noframes|フレームの代替コンテンツ|廃止|
|nobr|改行させない|廃止|
|noembed|embed要素の代替コンテンツ|廃止|
|marquee|文字のスクロール|廃止|
***廃止された属性 [#m27a19fa]
|BGCOLOR(#f0f8ff):''グループ''|BGCOLOR(#f0f8ff):''要素''|...
|[[メタデータ>#h05f64ea]]|[[html>#i586cb96]]|version|
|~|[[head>#n5f8d9d2]]|profile|
|~|[[meta>#e77de45a]]|scheme|
|~|[[link>#aacd3ec7]]|rev charset target|
|[[セクション>#y155f6c6]]|[[h1-h6>#n40cf96d]]|align|
|~|[[body>#m5f98ffb]]|background bgcolor text link vl...
|[[グルーピング>#f85bbc69]]|[[div>#k56a7b39]]|align|
|~|[[p>#e862f8aa]]|align|
|~|[[ol>#x84bf14a]]|compact|
|~|[[li>#x84bf14a]]|type|
|~|[[dl>#f5cc3ae7]]|compact|
|~|[[hr>#wcb10b2f]]|size width align noshade|
|~|[[pre>#o6a68f31]]|width|
|[[テキスト>#qd234c3a]]|[[a>#af1b649e]]|charset rev sha...
|~|br|clear|
|~|[[u>#x84bf14a]]l|type compact|
|[[埋め込みコンテンツ>#abd6eac9]]|[[img>#ddb6c56c]]|longd...
|~|[[area>#w768e4e8]]|nohref|
|~|[[iframe>#r81d7174]]|longdesc scrolling frameborder...
|~|[[object>#c3ecac21]]|classid codetype archive codeb...
|~|[[param>#h6c74c93]]|valuetype type|
|[[テーブル>#wcc1f6fa]]|[[table>#fe595c17]]|width frame...
|~|[[td>#fe595c17]]|align valign char charoff abbr s...
|~|[[th>#fe595c17]]|align valign char charoff abbr a...
|~|[[tr>#fe595c17]]|align valign char charoff bgcolor|
|~|[[caption>#oe8c278a]]|align|
|~|[[colgroup>#d7d005d5]]|width align valign char cha...
|~|[[col>#d7d005d5]]|width align valign char charoff|
|~|[[tfoot>#e6445f54]]|align valign char charoff|
|~|[[tbody>#e6445f54]]|align valign char charoff|
|~|[[thead>#e6445f54]]|align valign char charoff|
|[[フォーム>#afe9a039]]|[[form>#jb1a62fd]]|accept|
|~|[[legend>#u27db09b]]|align|
|~|[[input>#s67cd020]]|align usemap ismap|
|[[インタラクティブ>#w2595fb1]]|[[menu>#j6e0045c]]|compact|
***意味が変更されたもの [#rd0dcb7d]
主に見た目を整える為に使用されていた要素はHTML5では意味を...
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''元の意味''|...
|[[strong>#e2b2e17d]]|強い強調|強い重要性|
|[[em>#r065c8fd]]|強調|強調(アクセント)|
|[[i>#a4d486bd]]|イタリック|音声や心の中で思ったこと|
|[[b>#a4d486bd]]|太字|他と区別するテキスト|
|[[small>#r6eb8450]]|小さい文字|註釈や細目|
|[[u>#a4d486bd]]|アンダーライン|伝わりにくいテキスト|
~
#br
**メタデータとセマンティックWEB [#r098c265]
HTMLに埋め込まれたテキストに意味を表現する情報を「メタデ...
「メタデータ」を埋め込むことでプログラムが、そのテキスト...
自動的に情報収集し分析できるプラットフォームへ変化してい...
***MicroData [#a62526de]
HTMLにメタデータを埋め込む技術。任意のHTML要素に以下の様...
<p itemscope itemtype="http://schema.org/Person">
私の名前は<span itemprop="name">川澄舞</span>です。
</p>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|itemscope|アイテムを定義する範囲を示す|
|itemtype|アイテムのデータ型を示す|
|itemprop|アイテムのプロパティを示す|
|itemid|アイテムのグルーバルIDを示す|
|itemref|アイテムのIDを参照する|
***RDFa / RDFa Lite [#u4c2318a]
MicroDataと同様にHTML/XHTMLに属性を付与することでメタデー...
-RDF(Resource Description Framework)~
XMLを用いてメタデータを記述する為の包括的な枠組み~
-RDFa(Resource Description Framework in attributes)~
RDFをXHTML属性として埋め込めるようにしたもの~
-RDFa Lite~
RDFaの機能を絞り込み、より簡単に扱えるようにしたもの~
~
RDFa / RDFa Lite で表される情報はアイテムと呼ばれ、アイテ...
アイテムを定義するには任意のHTML要素に対して以下の属性を...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|vocab|メタデータの語彙(ボキャブラリ)を表す特定の識別子|
|typeof|アイテムのデータ型|
|property|アイテムのプロパティ|
|resource|Webページ内でアイテムに任意のidを付与することが...
|prefix|1つのアイテム内で、vocab属性で指定したもの以外の...
<p vocab="http://schema.org/" typeof="Person" prefix="ov...
私の名前は<span property="name">川澄舞</span>です。
電話番号は<span property="telephone">080-1234-5678</sp...
好きな動物は<span property="ov:preferredAnimal">熊</sp...
</p>
***schema.org [#ebe96a16]
Google、MicroSoft、Yahooなどの検索エンジンベンダーが合同...
それ以外には、data-vocabulary.org がある。schema.org でデ...
schema.org の大分類として定義されてるプロパティ~
|BGCOLOR(#f0f8ff):''プロパティ''|BGCOLOR(#f0f8ff):''定義...
|Person|人物|
|Place|場所|
|Product|製品|
|CreativeWork|捜索活動|
|Event|イベント|
|Intangible|無形|
|Organization|組織|
**カスタムデータ属性 [#dc0d30e3]
***カスタムデータ属性 [#a700dbb2]
「data-」という接頭辞を持つ属性に要素に追加することで、独...
***data URI [#z8dfbecf]
データの内容をそのままHTMLに埋め込むことが可能。~
外部リソースへのアクセスがなくなり、1つのファイルアクセス...
データ量が増加(一般的に3倍になる)、ブラウザのキャッシュ...
【書式】data:[MIME][;charset=<文字セット>][;base64],<base...
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Windowsでは以下でBase64に変換できる。
certutil -f -encode 入力 出力
~
#br
**アプリケーションキャッシュ [#w4bb90e5]
マニフェストファイルの書式に従って全てのリソースをキャッ...
キャッシュの更新は、マニフェストファイルが更新されたタイ...
1. マニフェストファイルを作成~
-- manifest.appcache
CACHE MANIFEST
index.html
index.css
2. MIMEタイプの設定~
AddType text/cache-manifest .appcache
3. HTMLソースに manifest属性を追加~
<html manifest="manifest.appcache">
4. マニフェストファイルの作成~
-1行目は CACHE MANIFEST~
-MIMEタイプは、text/cache-manifest~
-文字コードはUTF-8~
-拡張子は .appcache を推奨~
-エントリは行で区切られる。\r\n、\r、\n何れの改行でも良い~
-相対URLを用いる場合は、マニフェストファイルのURLを基準に...
-全てのURLはメインページと同じオリジン(配信元)でなくて...
-セクション(CACHE、FALLBACK、NETWORK、SETTINGS)名の後に...
-セクションを明示的に指定しない場合は、CACHEセクションと...
~
|BGCOLOR(#f0f8ff):'''セクション'|BGCOLOR(#f0f8ff):''説明''|
|CACHE|ここに記述されたURLのファイルをキャッシュする|
|FALLBACK|指定したURLのリソースにアクセスできなかった場合...
|NETWORK|キャッシュを無視して必ずネットワークからリソース...
|SETTINGS|prefer-online(オンライン時にはアプリケーション...
~
**Appendix [#qcfe33fd]
***media [#s55aaec6]
メディアを指定することでスタイルを適用するメディアを限定...
|BGCOLOR(#f0f8ff):''メディア''|BGCOLOR(#f0f8ff):''対象''|
|all|すべてのメディア(初期値)|
|screen|一般的なディスプレイ|
|print|通常のプリンタ|
|projection|プロジェクタ|
|tv|テレビ|
|handheld|ハンドヘルドデバイス|
|tty|固定文字サイズの端末|
|embossed|点字プリンタ|
|braille|点字の触角デバイス|
|speech|読み上げブラウザ|
***rel属性 [#ba8bc416]
リンク先の関係を指定する。
|BGCOLOR(#f0f8ff):''値''|BGCOLOR(#f0f8ff):''link''|BGCOLO...
|alternate|○|○|代替の文書を示す|
|stylesheet|○|×|外部スタイルシートを示す|
|author|○|○|著者情報の文書、または連絡先を示す|
|bookmark|×|○|ブックマークリンクを示す|
|help|○|○|ヘルプの文書を示す|
|icon|○|×|アイコンを示す|
|license|○|○|著作権情報の文書を示す|
|next|○|○|一連の文書の中で次の文書を示す|
|nofollow|×|○|リンク先をフォローしない|
|noreferrer|×|○|リンク先にリファラーを送らない|
|prefetch|○|○|リンク先の事前読み込み|
|prev|○|○|一連の文書の中で前の文書を示す|
|search|○|○|関連文書を検索するためのページを示す|
|tag|×|○|関連するタグを示す|
終了行:
*[[WebApp]]/HTML5 [#a353f23e]
#contents
**基本 [#xd70ba6e]
***構文 [#f757b036]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css" type="text...
<style type="text/css"> スタイルシートを直接記述 </sty...
</head>
<body>
ページ内容
</body>
</html>
***省略可能な要素 [#ce23247d]
|BGCOLOR(#f0f8ff):''省略可能なもの''|BGCOLOR(#f0f8ff):''...
|要素の省略可能|[[html>#i586cb96]] [[head>#n5f8d9d2]] [...
|閉じスラッシュ|br [[img>#ddb6c56c]] [[hr>#wcb10b2f]] ...
-HTML1.0では閉じスラッシュの省略はできない
-HTML5では閉じスラッシュの省略が可能。閉じスラッシュを入...
***グローバル属性 [#c28c60a2]
どの要素にも共通して指定可能な属性。
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''指定する内...
|accesskey|キーボード、ショートカット|
|class|スタイルシートのクラス|
|contenteditable|編集可能/不可能|
|contextmenu|[[menu>#j6e0045c]] 要素のid値を指定してコン...
|dir|テキストの方向|
|draggable|ドラッグの有効/無効|
|hidden|関係、無関係|
|id|固有のid|
|lang|言語|
|spellcheck|スペルチェックの有効性|
|style|スタイルシート|
|tabindex|タブ、インデックス|
|title|タイトル|
|data|独自データ|
***実体参照 [#g61c08c3]
半角スペース
< <
> >
& &
" &quto;
***カテゴリーの種類 [#ra05fbde]
|BGCOLOR(#f0f8ff):''カテゴリー''|BGCOLOR(#f0f8ff):''説明''|
|メタデータ・コンテンツ|HTMLのメタデータやスタイルに関す...
|フロー・コンテンツ|[[body>#m5f98ffb]]要素内に記述する要素|
|セクショニング・コンテンツ|文章のセクションを示す要素([...
|ヘッディング・コンテンツ|セクションの始まりの要素([[h1 ...
|フレージング・コンテンツ|テキストの要素|
|エンベッディッド・コンテンツ|外部ファイル(動画、画像な...
|インタラクティブ・コンテンツ|ユーザが操作することで双方...
|パルパブル・コンテンツ|フロー・コンテンツまたはフレージ...
~
**メタデータ [#h05f64ea]
***html [#i586cb96]
HTML文書の全体を表す要素。
<html lang="ja"></html>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|lang|文書全体の言語を指定|
|manifest|[[マニフェストファイル>#w4bb90e5]]の指定|
***head [#n5f8d9d2]
HTMLの文書のタイトル、スタイルシートなどメタ情報を含める...
メタデータ要素では [[script>#uf604568]]/[[noscript>#tc268...
[[head>#n5f8d9d2]] 要素内には必ず [[title>#ibf1f5ad]] 要...
***title [#ibf1f5ad]
HTML文書のタイトル。[[head>#n5f8d9d2]] 要素の中に必ず入れ...
***meta [#e77de45a]
文字コードの指定などHTML文書に付随する様々なメタ情報。
<meta charset="UTF-8" name="keyword" content="検索キーワ...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|charset|文字エンコーディング|
|name|メタデータのプロパティ名(keyword は検索してヒット...
|http-equiv|プラグマ指示子(ブラウザに対してその文書の状...
|content|name、http-equivに対する値を指定|
|BGCOLOR(#f0f8ff):''http-equiv''|BGCOLOR(#f0f8ff):''説明''|
|content-language|コンテンツの主言語を指定|
|content-type|ファイルタイプ・文字エンコーディングを指定...
|default-style|デフォルトスタイルの指定。link要素で複数の...
|refresh|リダイレクト・再読込を指定(content="秒数; URL=...
***link [#aacd3ec7]
外部リソース(HTML、CSS、RSS)を指定する時に使用。[[head>...
<link rel="stylesheet" href="css/style.css" type="text/c...
<link rel="alternate" hreflang="en" href="english.html"/>
<link rel="alternate" media="print" href="print.pdf" />
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|href|linkファイルのURLを指定(必須)|
|[[rel>#ba8bc416]]|linkファイルとHTMLの関係を指定(必須)...
|[[media>#s55aaec6]]|linkファイルの対象メディアを指定([[...
|hreflang|linkファイルの言語を指定|
|type|linkファイルのMIMEタイプを指定(省略可能で、デフォ...
|sizes|アイコンをリンクする場合にサイズを指定|
***base [#lda0b6df]
[[img>#ddb6c56c]] 要素の src など、相対パスの基準URLを指...
<base href="http://vre.sakura.ne.jp/img/">
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|href|基準となるURLを指定|
|target|基準となるファイルのターゲット指定|
***style [#tf8bdca9]
スタイルシートを記述する。scoped属性を指定しない場合は文...
<style type="text/css">スタイルシートの内容を記述する</s...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|type|sytleのMIMEタイプを指定|
|[[media>#s55aaec6]]|スタイルを適用するメディアを指定する...
|scoped|<style scoped>〜</style>が記述されてた親要素と子...
***script [#uf604568]
JavaScriptを埋め込む場合に使用。[[head>#n5f8d9d2]] または...
async または defer を指定しない場合は、スクリプトファイル...
<script type="text/javascript src="script.js" async></sc...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|type|タイプを指定(デフォルトは text/javascript)|
|src|読み込む外部ファイルのURLを指定|
|async|ページを描画しつつ、スクリプトが読み込まれた時点で...
|defer|ページの読み込みが完了した時点でスクリプトを実行(...
|charset|外部スクリプトファイルの文字エンコーディングを指...
***noscript [#tc268306]
スクリプトが実行されない環境での代替を記述する。
<noscript>JavaScriptを利用していますのでONにして下さい</...
~
#br
**セクション [#m2d06383]
***セクションとアウトラインの概念 [#y155f6c6]
セクション要素を入れ子にしてアウトラインを作成する。~
各セクションは最初にある見出し([[h1 〜 h6>#n40cf96d]])...
[[h1 〜 h6>#n40cf96d]] に対して暗黙的にセクションが区切ら...
<section>
<h1>1 見出し1</h1>
内容
<section>
<h2>1.1 見出し1</h2>
内容
</section>
</section>
***セクショニングルート [#r6bb83b1]
親のアウトラインから独立したアウトライン(階層構造)を持...
以下の要素がセクショニングルートに属する要素。~
-[[body>#m5f98ffb]]~
-[[blockquote>#d08d4c0a]]~
-[[details>#de65a277]]~
-[[fieldset>#u27db09b]]~
-[[figure>#s0529dd4]]~
-[[td>#fe595c17]]~
***h1 〜 h6 [#n40cf96d]
見出しを示す。数値が小さい程、大きい見出しとなる。~
見出しを配置すると暗黙的に新しいセクションを開始したこと...
セクショニング・コンテンツの要素([[article>#rc06fdd3]]、...
その後に低い見出しが続く場合は、暗黙的にサブセクションを...
同ランク以上の見出しが続く場合は、暗黙的に新しいセクショ...
***body [#m5f98ffb]
html 要素内で1度だけ使用でき、ドキュメントの内容を表す。~
***header [#z2a1dea6]
イントロダクションやナビゲーショングループであることを示...
見出し([[h1 〜 h6>#n40cf96d]])が含まれてることが想定さ...
***nav [#s8cce2f3]
ナビゲーション(他のページ或いはページ内の部分にリンクす...
利用規約ページ、著作権ページ、トップページへ戻るなどは na...
<nav>
<h1>メニュー</h1>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="shop.html">店舗紹介</a></li>
</ul>
</nav>
***section [#c5cb94f1]
セクションは文脈に沿ってコンテンツをテーマ別にグループ化...
[[section>#c5cb94f1]] 要素の子として見だし([[h1〜h6>#n40...
一般的に [[section>#c5cb94f1]] 要素は、要素の内容が文書の...
***article [#rc06fdd3]
内容が独立した単独の記事として完結するセクションであるこ...
[[article>#rc06fdd3]] を入れ子にして使用する場合、内側の ...
<body>
<article>
<header>
<h1>スタッフ紹介</h1>
<p><time datetime="2014/12/28">3 day a go</time></p>
</header>
<p>新しいコンテンツが増えました</p>
<footer>
<a href="?comments=1">コメントを見る</a>
<p>投稿:管理人</p>
</footer>
</article>
</body>
***aside [#jd4249e9]
本文のメインコンテンツ以外の要素(補足情報など)であるこ...
本文と関連してはいるけれど区別して掲載するべき内容のこと。~
<p>本文</p>
<aside> <p>補足情報</p> </aside>
***footer [#f70ba36a]
そのセクションに関する情報のことで、著作権や、関連文書へ...
<footer>
<p>Copyright 2010</p>
</footer>
***address [#q6121714]
そのセクション要素の住所や連絡先を表す。~
連絡先情報以外の情報を含めてはいけない。~
直近の親要素が [[article>#rc06fdd3]] であった場合は、[[ar...
直近の親要素が [[body>#m5f98ffb]]であった場合は、文書全体...
<address><a href="/about/">株式会社 北コーン</a></address>
~
**グルーピング [#f85bbc69]
***main [#h4f903ce]
メインコンテンツであることを示す。~
HTML文書の中で1回のみ使用し、要素の中に [[header>#z2a1dea...
***div [#k56a7b39]
特別な意味を持たない要素で、主にコンテンツをスタイリング...
<div style=" background-color:black; color:white;">
<p>黒背景、白文字</p>
</div>
***p [#e862f8aa]
段落を示す。<p>〜</p>の間が1つの段落になる。~
***ol / ul / li [#x84bf14a]
ol 順序立てられたリスト(インデントに番号を付与)を記述す...
ul インデントに・が付与するリストを記述する場合に使用。
<ol reversed="reversed" start="3">
<li>3. </li>
<li>2. </li>
<li value="5">5. </li>
</ol>
|BGCOLOR(#f0f8ff):''<ol>属性''|BGCOLOR(#f0f8ff):''説明''|
|start|リストの始まりの番号を指定。指定した番号から付与さ...
|reversed|reversedを指定することで、リストの並びを降順に...
|BGCOLOR(#f0f8ff):''<li>属性''|BGCOLOR(#f0f8ff):''説明''|
|value|リスト番号を変更する(親要素が<ol>の場合のみ指定可...
***dl / dt / dd [#f5cc3ae7]
dl で名前(dt)と値(dd)を持つ記述リストを定義する。dd ...
<dl>
<dt>商品説明</dt>
<dd>・安い</dd>
<dd>・早い</dd>
<dd>・旨い</dd>
<dt>発売時期</dt>
<dd>・2014/12/29</dd>
</dl>
***hr [#wcb10b2f]
段落レベルのテーマの区切り。コンテンツの内容が切り替わる...
***pre [#o6a68f31]
改行などを含むテキストをもそのまま改行されて表示される。~
<pre>
整形済みテキスト
改行もされる
</pre>
***blockquote [#d08d4c0a]
他のソースから文書などを引用したセクションであることを示...
<blockquote cite="http://vre.sakura.ne.jp/">
瑠璃アプリからの〜
</blockquote>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|cite|引用元のURLを記述|
***figure [#s0529dd4]
本文から参照されるような説明文のついた図や表を示す。~
<p>詳しい説明は<a href="#ruri">こちらの画像</a>を参照</p>
<figure id="ruri">
<img src="./ruri.gif">
<figcaption>瑠璃の全身図</figcaption>
</figure>
***fogcaption [#r3e7e72c]
[[figure>#s0529dd4]]要素で指定した図に対するキャプション...
~
#br
**テキスト [#qd234c3a]
***a [#af1b649e]
他サイトに移動するためのハイパーリンクを指定。~
name属性が廃止され id属性で指定する方法に変更されている。~
<a href="/">ホーム</a>
<a href="#link2">IDでリンク先へ</a>
<h2 id="link2">商品No2</h2>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|href|リンク先のURL|
|target|開く場合のターゲット|
|rel|リンク先との関連性|
|media|リンク先のメディアを指定|
|hreflang|リンク先の言語を指定|
|type|リンク先のMIMEタイプを指定|
|BGCOLOR(#f0f8ff):''target''|BGCOLOR(#f0f8ff):''説明''|
|_self|現在のウィンドウでリンク先を開く|
|_parent|現在のウィンドウの親ウィンドウでリンク先を開く|
|_top|現在のウィンドウの最上位階層のウィンドウでリンク先...
|_blank|新しいタブやウィンドウでリンク先を開く|
|名前|任意の名前を付けたウィンドウでリンク先を開く|
***span [#be364fc0]
[[フレージング・コンテンツ>#ra05fbde]]を、ひとつの範囲と...
単独では何も意味を持ってない為、style属性・class属性・lan...
<span style="background-color: #33CC33">背景が黄色</span>
<style> span.red { color: #ff0000; } </style>
<span class="red">この範囲はスタイルシートで指定したスタ...
***strong [#e2b2e17d]
重要度が高いことを示す。入れ子にすることでより重要度が高...
***em [#r065c8fd]
コンテンツを部分的に強調する場合に使用する。入れ子の階層...
***small [#r6eb8450]
註釈や細目(著作権表記、ライセンス要件など)を示す。~
***time [#wf228ea9]
日付や24時間制での正確な日時を記載する場合に使用。~
コンピュータが読み取ることが可能な形式で日時を記載する必...
<time>2014-12-29</time>
<time datetime="2014-12-31">大晦日</time>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|datetime|<time>要素の中に日時以外の内容を記述することが...
***cite [#ic31b852]
文書内に引用して使用した作品のタイトル(本、新聞、歌、台...
タイトルのみを意味するので作者名などは使用できない。~
***q [#m766d520]
短い文章を引用する際に使用する。cite属性は引用元のURLを指...
<q cite="http://vre.sakura.ne.jp/">引用部分</q>
***dfn [#zd28f15f]
定義された用語を示す。~
dfn要素の親となる段落かセクション、または記述リストの同じ...
<dl>
<dt><dfn title="HyperText Markup Language">HTML</dfn><...
<dd>Webページを制作するためのマークアップ言語</dd>
</dl>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|title|<dfn>要素内の文字ではなく、ここで指定した文字を定...
***abbr [#w0017753]
略語、または頭文字を示す。~
<dfn><addr title="HyperText Markup Language">HTML</addr>...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|title|正式名称を示す。|
***code / var / samp [#u281d063]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|
|code|プログラムのコードを示す|
|var|数式やプログラムで、変数や定数を表す識別子を示す|
|samp|プログラムなどの出力サンプルを示す|
***kbd [#te25e951]
ユーザーが入力する部分(キーボードや音声入力)を指定する...
<kbd> <kbd>CTRL</kbd> + <kbd>C</kbd> </kbd>
***sub / sup [#vdec60c8]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|BGCO...
|sub|下付き文字を示す|水の化学式はH<sub>2</sub>O|
|sup|上付き文字を示す|3<sup>3</sup>=27|
***i / b / u / s / mark [#a4d486bd]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|
|i|音声や心の声など、他の内容と異なっている場合に使用|
|b|他と区別したいテキストを示す場合に使用。重要性を伝える...
|u|ラベル付けを行う。明確に伝わらなかったり、本来とは異な...
|s|テキストが正確でないことを示す。テキストの内容を修正す...
|mark|ハイライトすることで重要な部分に注意が向くことにす...
***ruby / rt / rp / rtc [#aa0b13bb]
ルビをふる。rubyを親要素とし、rt子要素で読み仮名を記述す...
rp は rt の前後に指定することで、振り仮名サポートしてない...
rtc は 複数のルビを振る場合に、<rt>要素を区別する為に指定...
<ruby>川澄<rt>かわすみ</rt>舞<rt>まい<rt></ruby>
<ruby>亜米利加<rp>(</rp><rt>アメリカ</rt><rp>)</rp></r...
<ruby>亜米利加
<rtc><rt>アメリカ</rt></rtc>
<rtc><rt>America</rt></rtc>
</ruby>
***bdi [#e3e5959c]
テキストの一部を異なる文字の方向に指定する場合に使用。こ...
英文(左から右)の中にアラビア語(右から左)を入れる場合...
***bdo [#a58f3afd]
文字の表示方向を指定。
<bdo dir="rtl">右から左に表示</bdo>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|dir|表示方向を指定(ltr:左から右、rtl:右から左)|
***wbr [#h56078d2]
コンテンツの表示領域が小さくなった時に折り返す位置を明示...
wbr を入れておくことで、必要に応じて、その箇所で折り返さ...
***ins [#d9cc36e4]
文書や画像を後から挿入、追加する場合に使用。
<ins datetime="2014-12-29T13:08:30">
<p>追加した情報</p>
</ins>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|cite|訂正理由の参照先|
|datetime|訂正した日時|
|title|補足情報|
***del [#fdd35980]
文書を削除、訂正する場合に使用。
<del datatime="2014-12-30T01:10:30>火曜日開催</del>
~
#br
**埋め込みコンテンツ [#abd6eac9]
***img [#ddb6c56c]
画像をHTMLファイルに埋め込む。
<img src="image.png" width="100" height="100" alt="イメ...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|alt|代替テキストを指定|
|src|イメージファイルのURL(必須)|
|usemap|クライアントサイドイメージマップを利用。詳細は [[...
|ismap|埋め込み画像のサーバサイドイメージマップを指定|
|width|画像の横幅指定|
|height|画像の縦幅指定|
***map / area [#w768e4e8]
map で [[img>#ddb6c56c]] 要素を指定(usermapで定義された...
<img src="map.png" usemap="#example">
<map name="example">
<area shape="rect" coords="50,50,150,150" h...
<area shape="circle" coords="250,100,50" h...
<area shape="poly" coords="400,50,450,150,350,150" h...
<area shape="default" h...
</map>
|BGCOLOR(#f0f8ff):''map''|BGCOLOR(#f0f8ff):''説明''|
|name|イメージマップの名前( [[img>#ddb6c56c]] 要素の use...
|BGCOLOR(#f0f8ff):''area''|BGCOLOR(#f0f8ff):''説明''|
|shape|リンク領域の形状|
|coords|座標(x,y)shapeの内容によって指定が異なる|
|href|リンク先の指定|
|alt|代替テキスト|
|hreflang|リンク先の記述言語|
|type|リンク先のMIMEタイプ|
|rel|現在の文書からみたリンク先の関係|
|media|対象とするメディア|
|target|リンク先の表示方法|
|BGCOLOR(#f0f8ff):''shape''|BGCOLOR(#f0f8ff):''説明''|
|rect|四角形(左上と右下の座標 x,y,x,y)|
|circle|円形 (中心点の座標と半径 x,y,半径)|
|poly|多角形(x,y,x,y...)|
|default|画像全体(指定しない)|
***iframe [#r81d7174]
インラインフレームでコンテンツを表示する場合に使用。
<iframe src="http://vre.sakura.ne.jp/" width="1024" heig...
<iframe srcdoc="<p>フレームの内容を直接ここに記述</p>" s...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|フレーム内に表示する文書のURL|
|srcdoc|フレームで表示する内容を直接記述する|
|sandbox|フレームの表示を制御。引数を指定することで制限を...
|width|フレームの幅|
|height|フレームの高さ|
|name|フレームの名前|
|seamless|インラインフレームのコンテンツを親コンテンツの...
|BGCOLOR(#f0f8ff):''sandbox''|BGCOLOR(#f0f8ff):''説明''|
|allow-same-origin|親文書と同じドメインを持つものとする|
|allow-top-navigation|最上位のウィンドウの操作を許可する|
|allow-forms|フォームの送信を許可する|
|allow-scripts|スクリプトの実行を許可する|
***embed [#yb9ca5af]
FLASHなどの外部のプラグインなどを利用するファイルを表示す...
<embed src="flash.swf" type="application/x-shockwave-fla...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|コンテンツのURLを指定|
|type|MIMEタイプを指定|
***video [#cbba16a2]
動画やオーディオファイルを読み込み再生する時に使用。~
この要素に対応しているブラウザでは、プラグインを使わずに...
<video src="video.mp4" preload="metadata" width="400" he...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|動画のURLを指定|
|poster|静止画のURLを指定|
|preload|先読みの目安を指定|
|mediagroup|グループ名を指定|
|autoplay|自動再生を行う|
|loop|ループ再生を行う|
|muted|音声を出さない|
|controls|コントローラを表示する|
|BGCOLOR(#f0f8ff):''preload''|BGCOLOR(#f0f8ff):''説明''|
|none|先読みなし|
|metadata|メタデータは先読み|
|auto|動画全体を先読み|
***object [#c3ecac21]
様々な形式のコンテンツ(画像、音声、動画、HTML文書、Java...
<object data="example.jpg" type="image/jpeg" width="300"...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|data|オブジェクトの指定(必須)|
|type|オブジェクトのMIMEタイプを指定(必須)|
|name|オブジェクトの名前を定義|
|usemap|クライアントサイドイメージマップを利用。詳細は [[...
|form|フォームとの関連付けられてる場合はidを指定|
***param [#h6c74c93]
[[object>#c3ecac21]]の子要素として使用。[[object>#c3ecac2...
<object data="sample.mp3" type="audio/mp3">
<param name="src" value="sample.mp3">
<param name="bgcolor" value="#ffffff">
<a href="bgm1.mp3">音楽再生</a>
</object>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|パラメータ名(任意)を指定|
|value|パラメータの値を指定|
***audio [#ec06286b]
音や音楽ファイルの再生に使用する。この要素に対応してるブ...
<audio src="bgm0.mp3" autoplay loop></audio>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|音声ファイルのURLを指定|
|preload|先読みの目安を指定(none、metadata、auto)|
|mediagroup|グループ名を指定|
|autoplay|自動再生を行う|
|loop|ループ再生を行う|
|muted|音声を出さない|
|controls|コントローラを表示する|
***source [#fcdc4fc4]
[[audio>#ec06286b]] や [[video>#cbba16a2]] 内に source 子...
<audio preload="metadata" controls>
<source src="bgm1.mp3" type="audio/mp3">
<source src="bgm1.ogg" type="audio/ogg">
</audio>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|動画・音声ファイルの指定|
|type|MIMEタイプを指定|
|media|対象とするメディアを指定([[Appendix media参照>#s5...
***track [#q94c3724]
動画や音声ファイルに字幕やキャプションなどのテキストを指...
<video>
<source src="video.mp4">
<track src="video_ja.vtt" kind="subtitles" srclang="ja...
</video>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|src|テキストトラックの指定(VTTフォーマットを指定)(必...
|kind|トラックの種類を指定|
|srclang|テキストトラックの記述言語を指定|
|label|トラックのタイトルを指定|
|default|トラックを有効にする|
|BGCOLOR(#f0f8ff):''kind''|BGCOLOR(#f0f8ff):''説明''|
|subtitles|翻訳の字幕(初期値)|
|captions|難聴用の字幕|
|descriptions|音声合成用のテキスト|
|chapters|頭出し用のタイトル|
|metadata|スクリプト用のデータ|
***canvas [#gb6d0def]
HTML上にグラフィックを描く為の領域を作る。~
グラフィックスは別途<script>で作成する。対応してないブラ...
<canvas id="canvas">非対応</canvas>
<script>
// 黒く塗り潰された正方形を描画
var canvas = document.getElementById('canvas');
if (canvas && canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(50,50,50,50);
}
</script>
***svg [#ed994a1b]
SVGで描画を指定する。ベクターグラフィックスなので拡大縮小...
<svg>
<rect x="5" y="5" width="100" height="80" ry="10" ...
<circle cx="100" cy="80" r="40" ...
<ellipse cx="100" cy="80" rx="90" ry="40" ...
<polyline points="0,0 100,150 250,30 0,0" ...
<polygon points="0,0 80,110 200,130 180,80 0,0" ...
</svg>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|fill|枠内の色|
|stroke|枠線の色|
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|
|<rect>|四角形/角丸四角形(x y width height ry:角の...
|<circle>|正円(cx cy r:半径)|
|<ellipse >|楕円(cx cy rx:縦の半径 ry:横の半径)|
|<line>|直線(x1 y1 x2 y2)|
|<polyline>|連続直線(points)|
|<polygon>|多角形(points)|
~
#br
**テーブル [#wcc1f6fa]
***table / th / tr / td [#fe595c17]
table を親要素に tr で「行」を作り、th(太字になる)また...
<table border="1">
<caption>表のタイトル</caption>
<colgroup span="2" width="60"> <!-- 1 - 2列目の...
<colgroup span="1" width="100"> <!-- 3列目の横幅...
<colgroup span="1" class="sample"> <!-- 4列目はスタ...
<thead>
<tr><th id="name">名前</th><th>年齢</th><th>好物</th...
</thead>
<tbody>
<tr><td headers="name">川澄</td><td>18</td><td>牛丼<...
<tr><td headers="name">雪 </td><td>20</td><td>不明<...
<tbody>
</table>
|BGCOLOR(#f0f8ff):''table属性''|BGCOLOR(#f0f8ff):''説明''|
|border|表がレイアウト目的で無いことを明示する場合は、空...
|BGCOLOR(#f0f8ff):''th/td属性''|BGCOLOR(#f0f8ff):''説明''|
|colspan|セルの結合(水平方向)|
|rowspan|セルの結合(垂直方向)0で全ての列を結合(グルー...
|headers|どの見出しに対するデータなのか明確にする。<th>で...
|scope|見出しの対象範囲 |
|BGCOLOR(#f0f8ff):''scope''|BGCOLOR(#f0f8ff):''説明''|
|auto|自動、文脈に基づいて判断(初期値)|
|row|行方向のセルを対象にする|
|col|列方向のセルを対象にする|
|rowgroup|行グループ内の全セルを対象にする|
|colgroup|列グループ内の全セルを対象にする|
***caption [#oe8c278a]
表のタイトルを記述。テーブルの上部に表示される。
***colgroup / col [#d7d005d5]
表の列をグループ化する。グループ化した列は同じ属性やスタ...
colの動作はcolgroupと同じだがグループ化の意味を持たない。~
<colgroup span="2" width="100" >
<colgroup>
<col span="2" width="100">
<col span="1" width="60">
</colgroup>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|span|グループ化する列数(<col>子要素を持たない場合のみ指...
***thead / tbody / tfoot [#e6445f54]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|BGCO...
|thead|表のヘッダであることを示す|1つのみ|
|tbody|表の本体であることを示す|複数指定可能|
|tfoot|表のフッタであることを示す|1つのみ|
~
#br
**フォーム [#afe9a039]
***from [#jb1a62fd]
<form method="post" action="from.cgi">
<p>お名前:<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|action|送信先の指定|
|method|HTTPメソッドの指定(get post)|
|enctype|送信時のデータ形式|
|accept-charset|送信時の文字エンコーディング|
|name|フォームの名前を指定|
|target|送信結果の表示方法を指定|
|autocomplete|オートコンプリートの有効有無(on off)|
|novalidate|妥当性をチェックしない|
|BGCOLOR(#f0f8ff):''enctype''|BGCOLOR(#f0f8ff):''説明''|
|application/x-www-form-urlencoded|URLエンコード(初期値)|
|multipart/form-data|マルチパート|
|text/plain|プレーンテキスト|
***fieldset / legend [#u27db09b]
fieldsetは 複数の入力フォームをグループ化する。黒枠で囲ま...
legend は [[fieldset>#u27db09b]] 要素内の最初に記述し、グ...
<fieldset form="group1">
<legend>個人情報</legend>
<p>お名前:<input type="text" name="name" size="30" fo...
<p>ご住所:<input type="text" name="address" size="50"...
</fieldset>
<form method="post" action="from.cgi" id="group1">
<p><input type="submit" value="送信する"></p>
</form>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|form|fieldset をどの [[form>#jb1a62fd]] 要素に関連付ける...
|name|部品グループの名前を指定(スクリプトから参照する際...
|disabled|グループ内の部品を無効にする|
***label [#u9c16f09]
入力フォームに項目名などのラベルをつける。~
ラベル部分のクリックでその部品を選択できるようになる。~
<label>名前:<input type="text"></label>
<label for="tellabel">電話:</label>
<input type="text" id="tellabel">
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|for|idで指定された部品に関連付ける|
***input [#s67cd020]
フォーム部品(入力欄・選択肢・ボタン)を作成する。
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|accept|type="file"の場合にサーバ側で受け取れるファイルの...
|alt|画像の代替テキストを指定|
|autocomplete|オートコンプリートを有効にする|
|autofocus|オートフォーカスを有効にする|
|checked|ラジオボタンとチェックボックスの初期状態でのチェ...
|dirname|フォームのinput要素の書字方向を示すクエリ名を指定|
|disabled|input要素を無効にする|
|form|どの [[form>#jb1a62fd]] 要素に関連付けるか指定する...
|formaction|送信先のURLを指定|
|formenctype|送信するデータ形式を指定|
|formmethod|送信方法を指定(get post)|
|formnovalidate|入力されたデータの確認を無効にする|
|formtarget|ターゲット先を指定|
|name|フォーム部品を識別するための名前を指定(ここで指定...
|value|ボタン名や、テキストならテキストエリアに表示される...
|type|フォーム部品の種類を指定|
|height|高さを指定|
|width|幅を指定|
|list|リスト要素を id 属性で指定|
|max|入力できる数値の最大値を指定|
|min|入力できる数値の最小値を指定|
|maxlength|入力できる最大文字数を指定|
|minlength|入力できる最小文字数を指定|
|multiple|複数の値の入力、選択を可能に設定|
|pattern|入力値のパターンを指定|
|placeholder|入力内容に初期表示するテキストを指定|
|readonly|読み取り専用に指定|
|required|入力必死に指定|
|size|表示文字数を指定|
|src|画像ファイルのURLを指定|
|step|入力欄のステップ数を指定|
typeの指定
|BGCOLOR(#f0f8ff):''分類''|BGCOLOR(#f0f8ff):''type''|BGCO...
|テキスト|text|1行のテキスト入力欄|
|~| password|パスワード入力欄|
|~|tel|電話番号の入力欄|
|~|url|URLの入力欄|
|~|email|メールアドレスの入力欄|
|~|search|検索テキストの入力欄|
|時間|datetime|UTC(協定世界時)による日時の入力欄|
|~|datetime-local|ローカル日時の入力欄|
|~|date|日付の入力欄|
|~|month|年月の入力欄|
|~|week|週の入力欄|
|~|time|時間の入力欄|
|数・色|number|数値の入力欄|
|~|range|大まかな数値の入力欄|
|~|color|色の入力欄|
|選択|radio|ラジオボタン|
|~|checkbox|チェックボックス|
|他|file|ファイルの送信欄|
|~|hidden|隠しデータ|
|ボタン|submit|送信ボタン|
|~|image|画像形式の送信ボタン|
|~|reset|リセットボタン|
|~|button|汎用的なボタン|
***button [#b654496f]
フォームの送信ボタンなどを作成する。~
<input type="button"> と異なり要素内でボタン名を指定で...
<button type="submit" name="btn-name" value="btn-value">...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定|
|value|送信される値を指定|
|type|ボタンの種類(submit reset button)|
|autoforcus|オートフォーカスを指定|
|formaction|送信先の指定(form要素のaction属性上書き)|
|formmethod|HTTPメソッド(form要素のmethod属性上書き)|
|formenctype|送信時データ形式(form要素のenctype属性上書...
|formtarget|送信結果表示方法(form要素のtarget属性上書き)|
|formnovalidate|妥当性をチェックしない(form要素のnovalid...
***select [#i06aa356]
選択ボックスを作成する。
<select name="select1" multiple size=3>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3" selected>選択肢3</option>
</select>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定(option要素...
|size|表示する選択肢の数を指定(デフォルトは1。multipleが...
|autoforcus|オートフォーカスを指定|
|disabled|操作を無効にする|
|multiple|複数選択を可能にする|
|required|必須入力|
***option / optgroup [#l8176a13]
[[select>#i06aa356]] の子要素として、選択項目を記述する。~
optgrpup は [[option>#l8176a13]] をグループ化する。~
<select name="select1" multiple size=3>
<optgroup label="グループ1">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</optgroup>
</select>
|BGCOLOR(#f0f8ff):''option属性''|BGCOLOR(#f0f8ff):''説明''|
|label|項目の表示名|
|value|送信する値(省略時は要素の内容が送信される)|
|selected|最初から選択された状態にする|
|disabled|選択できないようにする|
|BGCOLOR(#f0f8ff):''optgroup属性''|BGCOLOR(#f0f8ff):''説...
|label|グループの表示名|
|disabled|操作を無効にする|
***textarea [#jfc22354]
複数行のテキスト入力エリアを指定。
<textarea name="textarea" cols="50" rows="10">最初から表...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定|
|cols|1行当たりの最大文字数|
|rows|テキストエリアの表示行数|
|maxlength|入力可能な最大文字数を指定|
|readonly|ユーザーテキストの編集を無効化し読み取り専用に...
|disabled|操作を無効にする|
|wrap|入力テキストの改行ルール(soft:改行反映せず送信 h...
|autofocus|自動フォーカスの指定|
|placeholder|入力ヒントの文字列を指定(薄い色で指定した文...
|dirname|入力内容の書字方向(ltr または rtl)とセットで送...
|required|入力必須|
***keygen [#tfc43dde]
鍵のペア(公開鍵と秘密鍵)の作成を行う。選択できる鍵の長...
フォームが送信されると秘密鍵はローカル保存、公開鍵はパッ...
<keygen name="key">
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|フォーム部品を識別するための名前を指定|
|keytype|暗号化方式(現状rsaしか指定できない)|
|challenge|公開鍵と一緒に送信する任意の文字列を指定|
|disabled|フォーム部品を無効化する|
***output [#d9a7f45c]
計算の結果を表す場合に使用。(対応してるブラウザなら数値...
<form onsubmit="return false" oninput="answer.value = a....
<input type="number" name="a"> + <input type="number" ...
= <output name="answer" for="a b"></output>
</form>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|name|出力欄を識別する為の名前を指定|
|for|計算対象のフォームを明示したい場合に使用(指定しなく...
***progress [#n6a2a8a2]
タスクが完了するまでの進捗状況を表示させる。~
スクリプトと組み合わせてリアルタイムに進捗状況を表示させ...
<progress value="30" max="100">進捗度:30%</progress>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|max|全体の量(初期値は1)|
|value|全体量に対する進捗度|
***meter [#u2c0caeb]
特定の範囲内における数量や割合を示す。バーの色が最適値の...
<meter value="50" min="0" max="100" low="30" height="60"...
<!-- 0〜30:低い値 30 〜 60:中間値 60 〜 100:高い値(最...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|value|計測結果の値(必須)|
|min|最小値|
|max|最大値|
|low|最も低い値の上限値を指定|
|high|最も高い値の下限値を指定|
|optimum|最適となる値を指定(省略時はlowとheightの中間)...
***datalist [#cbac782a]
入力フォームの為の入力候補を定義する。
<p><input type="text" name="day1" list="daylist"></p>
<p><input type="text" name="day2" list="daylist"></p>
<datalist id="daylist">
<option value="12/30"></option>
<option value="12/31"></option>
</datalist>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|id|[[input>#s67cd020]] で定義されたlist属性の値を指定|
~
#br
**インタラクティブ [#w2595fb1]
ユーザの操作によって表示、非表示のコントロールが可能な要...
***details / summary [#de65a277]
ユーザ操作によって表示/非表示可能なコントローラ(アウトラ...
[[summary>#s3054193]] 子要素がある場合は、[[summary>#s305...
<details open>
<summary>詳細</summary>展開される内容をここに記述
</details>
|BGCOLOR(#f0f8ff):''details属性''|BGCOLOR(#f0f8ff):''説明...
|open|詳細情報を最初から展開しておく|
***menu [#j6e0045c]
操作メニューのコマンドリストを作成する(HTML5の仕様通りに...
<p contextmenu="con">ここで右クリックするとコマンドが表...
<menu type="context" id="con">
<li>コマンド1</li>
<li>コマンド2</li>
</menu>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|type|メニューの種類を指定(context:右クリックで表示され...
|label|ラベル名を指定。入れ子にされた<menu>要素に指定する...
***dialog [#ue3faeb3]
dialog 要素は閲覧者が操作することが可能なダイアログを表示。
<dialog open>
<p>ダイアログを表示</p>
</dialog>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|open|dialog要素がブラウザ上で表示され操作可能になる|
~
#br
**HTML5で廃止された要素と属性 [#f7cec4e4]
***廃止された要素 [#e8562220]
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''説明''|BGCO...
|acronym|略称|addr|
|applet|Javaアプレットの埋め込み|object|
|bgsound|BGMの再生|sound|
|basefont|基準となるフォントサイズ|CSS|
|big|大きめの文字|CSS|
|blink|文字の点滅|CSS|
|center|センタリング|CSS|
|font|フォントのサイズ・色・種類|CSS|
|tt|等幅フォント|CSS font-family:monospace;|
|strike|取り消し線|del|
|isindex|1行のテキスト入力欄|form|
|dir|ディレクトリ型のリスト|ul|
|frame|フレーム内の設定|iframe|
|rb|ルビベース|ruby / rt|
|frameset|ウィンドウの分割|廃止|
|noframes|フレームの代替コンテンツ|廃止|
|nobr|改行させない|廃止|
|noembed|embed要素の代替コンテンツ|廃止|
|marquee|文字のスクロール|廃止|
***廃止された属性 [#m27a19fa]
|BGCOLOR(#f0f8ff):''グループ''|BGCOLOR(#f0f8ff):''要素''|...
|[[メタデータ>#h05f64ea]]|[[html>#i586cb96]]|version|
|~|[[head>#n5f8d9d2]]|profile|
|~|[[meta>#e77de45a]]|scheme|
|~|[[link>#aacd3ec7]]|rev charset target|
|[[セクション>#y155f6c6]]|[[h1-h6>#n40cf96d]]|align|
|~|[[body>#m5f98ffb]]|background bgcolor text link vl...
|[[グルーピング>#f85bbc69]]|[[div>#k56a7b39]]|align|
|~|[[p>#e862f8aa]]|align|
|~|[[ol>#x84bf14a]]|compact|
|~|[[li>#x84bf14a]]|type|
|~|[[dl>#f5cc3ae7]]|compact|
|~|[[hr>#wcb10b2f]]|size width align noshade|
|~|[[pre>#o6a68f31]]|width|
|[[テキスト>#qd234c3a]]|[[a>#af1b649e]]|charset rev sha...
|~|br|clear|
|~|[[u>#x84bf14a]]l|type compact|
|[[埋め込みコンテンツ>#abd6eac9]]|[[img>#ddb6c56c]]|longd...
|~|[[area>#w768e4e8]]|nohref|
|~|[[iframe>#r81d7174]]|longdesc scrolling frameborder...
|~|[[object>#c3ecac21]]|classid codetype archive codeb...
|~|[[param>#h6c74c93]]|valuetype type|
|[[テーブル>#wcc1f6fa]]|[[table>#fe595c17]]|width frame...
|~|[[td>#fe595c17]]|align valign char charoff abbr s...
|~|[[th>#fe595c17]]|align valign char charoff abbr a...
|~|[[tr>#fe595c17]]|align valign char charoff bgcolor|
|~|[[caption>#oe8c278a]]|align|
|~|[[colgroup>#d7d005d5]]|width align valign char cha...
|~|[[col>#d7d005d5]]|width align valign char charoff|
|~|[[tfoot>#e6445f54]]|align valign char charoff|
|~|[[tbody>#e6445f54]]|align valign char charoff|
|~|[[thead>#e6445f54]]|align valign char charoff|
|[[フォーム>#afe9a039]]|[[form>#jb1a62fd]]|accept|
|~|[[legend>#u27db09b]]|align|
|~|[[input>#s67cd020]]|align usemap ismap|
|[[インタラクティブ>#w2595fb1]]|[[menu>#j6e0045c]]|compact|
***意味が変更されたもの [#rd0dcb7d]
主に見た目を整える為に使用されていた要素はHTML5では意味を...
|BGCOLOR(#f0f8ff):''要素''|BGCOLOR(#f0f8ff):''元の意味''|...
|[[strong>#e2b2e17d]]|強い強調|強い重要性|
|[[em>#r065c8fd]]|強調|強調(アクセント)|
|[[i>#a4d486bd]]|イタリック|音声や心の中で思ったこと|
|[[b>#a4d486bd]]|太字|他と区別するテキスト|
|[[small>#r6eb8450]]|小さい文字|註釈や細目|
|[[u>#a4d486bd]]|アンダーライン|伝わりにくいテキスト|
~
#br
**メタデータとセマンティックWEB [#r098c265]
HTMLに埋め込まれたテキストに意味を表現する情報を「メタデ...
「メタデータ」を埋め込むことでプログラムが、そのテキスト...
自動的に情報収集し分析できるプラットフォームへ変化してい...
***MicroData [#a62526de]
HTMLにメタデータを埋め込む技術。任意のHTML要素に以下の様...
<p itemscope itemtype="http://schema.org/Person">
私の名前は<span itemprop="name">川澄舞</span>です。
</p>
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|itemscope|アイテムを定義する範囲を示す|
|itemtype|アイテムのデータ型を示す|
|itemprop|アイテムのプロパティを示す|
|itemid|アイテムのグルーバルIDを示す|
|itemref|アイテムのIDを参照する|
***RDFa / RDFa Lite [#u4c2318a]
MicroDataと同様にHTML/XHTMLに属性を付与することでメタデー...
-RDF(Resource Description Framework)~
XMLを用いてメタデータを記述する為の包括的な枠組み~
-RDFa(Resource Description Framework in attributes)~
RDFをXHTML属性として埋め込めるようにしたもの~
-RDFa Lite~
RDFaの機能を絞り込み、より簡単に扱えるようにしたもの~
~
RDFa / RDFa Lite で表される情報はアイテムと呼ばれ、アイテ...
アイテムを定義するには任意のHTML要素に対して以下の属性を...
|BGCOLOR(#f0f8ff):''属性''|BGCOLOR(#f0f8ff):''説明''|
|vocab|メタデータの語彙(ボキャブラリ)を表す特定の識別子|
|typeof|アイテムのデータ型|
|property|アイテムのプロパティ|
|resource|Webページ内でアイテムに任意のidを付与することが...
|prefix|1つのアイテム内で、vocab属性で指定したもの以外の...
<p vocab="http://schema.org/" typeof="Person" prefix="ov...
私の名前は<span property="name">川澄舞</span>です。
電話番号は<span property="telephone">080-1234-5678</sp...
好きな動物は<span property="ov:preferredAnimal">熊</sp...
</p>
***schema.org [#ebe96a16]
Google、MicroSoft、Yahooなどの検索エンジンベンダーが合同...
それ以外には、data-vocabulary.org がある。schema.org でデ...
schema.org の大分類として定義されてるプロパティ~
|BGCOLOR(#f0f8ff):''プロパティ''|BGCOLOR(#f0f8ff):''定義...
|Person|人物|
|Place|場所|
|Product|製品|
|CreativeWork|捜索活動|
|Event|イベント|
|Intangible|無形|
|Organization|組織|
**カスタムデータ属性 [#dc0d30e3]
***カスタムデータ属性 [#a700dbb2]
「data-」という接頭辞を持つ属性に要素に追加することで、独...
***data URI [#z8dfbecf]
データの内容をそのままHTMLに埋め込むことが可能。~
外部リソースへのアクセスがなくなり、1つのファイルアクセス...
データ量が増加(一般的に3倍になる)、ブラウザのキャッシュ...
【書式】data:[MIME][;charset=<文字セット>][;base64],<base...
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Windowsでは以下でBase64に変換できる。
certutil -f -encode 入力 出力
~
#br
**アプリケーションキャッシュ [#w4bb90e5]
マニフェストファイルの書式に従って全てのリソースをキャッ...
キャッシュの更新は、マニフェストファイルが更新されたタイ...
1. マニフェストファイルを作成~
-- manifest.appcache
CACHE MANIFEST
index.html
index.css
2. MIMEタイプの設定~
AddType text/cache-manifest .appcache
3. HTMLソースに manifest属性を追加~
<html manifest="manifest.appcache">
4. マニフェストファイルの作成~
-1行目は CACHE MANIFEST~
-MIMEタイプは、text/cache-manifest~
-文字コードはUTF-8~
-拡張子は .appcache を推奨~
-エントリは行で区切られる。\r\n、\r、\n何れの改行でも良い~
-相対URLを用いる場合は、マニフェストファイルのURLを基準に...
-全てのURLはメインページと同じオリジン(配信元)でなくて...
-セクション(CACHE、FALLBACK、NETWORK、SETTINGS)名の後に...
-セクションを明示的に指定しない場合は、CACHEセクションと...
~
|BGCOLOR(#f0f8ff):'''セクション'|BGCOLOR(#f0f8ff):''説明''|
|CACHE|ここに記述されたURLのファイルをキャッシュする|
|FALLBACK|指定したURLのリソースにアクセスできなかった場合...
|NETWORK|キャッシュを無視して必ずネットワークからリソース...
|SETTINGS|prefer-online(オンライン時にはアプリケーション...
~
**Appendix [#qcfe33fd]
***media [#s55aaec6]
メディアを指定することでスタイルを適用するメディアを限定...
|BGCOLOR(#f0f8ff):''メディア''|BGCOLOR(#f0f8ff):''対象''|
|all|すべてのメディア(初期値)|
|screen|一般的なディスプレイ|
|print|通常のプリンタ|
|projection|プロジェクタ|
|tv|テレビ|
|handheld|ハンドヘルドデバイス|
|tty|固定文字サイズの端末|
|embossed|点字プリンタ|
|braille|点字の触角デバイス|
|speech|読み上げブラウザ|
***rel属性 [#ba8bc416]
リンク先の関係を指定する。
|BGCOLOR(#f0f8ff):''値''|BGCOLOR(#f0f8ff):''link''|BGCOLO...
|alternate|○|○|代替の文書を示す|
|stylesheet|○|×|外部スタイルシートを示す|
|author|○|○|著者情報の文書、または連絡先を示す|
|bookmark|×|○|ブックマークリンクを示す|
|help|○|○|ヘルプの文書を示す|
|icon|○|×|アイコンを示す|
|license|○|○|著作権情報の文書を示す|
|next|○|○|一連の文書の中で次の文書を示す|
|nofollow|×|○|リンク先をフォローしない|
|noreferrer|×|○|リンク先にリファラーを送らない|
|prefetch|○|○|リンク先の事前読み込み|
|prev|○|○|一連の文書の中で前の文書を示す|
|search|○|○|関連文書を検索するためのページを示す|
|tag|×|○|関連するタグを示す|
ページ名: