HTML5のテーブル系～table要素とcaption要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
テーブル関連
table要素
複数の特質を持つデータを表す。テーブルモデルを構成する。
子孫要素によって行、列、およびセルが指定される。行と列はグリッドを形成する。
テーブルをレイアウトとして使用するのはだめ。
<table> <caption>メニュー</caption> <tr> <td>汁なし担々麺</td> <td>醤油ラーメン</td> </tr> </table>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・次に書いた順に、
オプションでcaption要素、それに続く0個以上のcolgroup要素、オプションでそれに続くthead要素、それに続く0個以上のtbody要素または1個以上のtr要素、オプションでそれに続くtfoot要素、オプションでそれに続くスクリプトサポーティング要素
コンテンツ属性
・グローバル属性
・border ... 表のセルの周囲に境界線を引く必要があることを示す。空文字か"1"`のいずれか。
タグの記載場所
・フローコンテンツを配置できる場所
caption要素
親のテーブルのタイトルを表す。
カテゴリ
・なし
コンテンツモデル
・フローコンテンツ(table要素は含まない)
コンテンツ属性
・グローバル属性
タグの記載場所
・table要素の子要素として配置
HTML5のEmbedded Content～track要素とmap要素とarea要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
track要素
video要素やaudio要素に外部的なテキストリソースを指定する。
<video src="water.mp4" controls loop muted width="400" height="200"> <track kind="captions" src="track.vtt" srclang="ja"> <p><a href="water.mp4">ダウンロード</a></p> </video>
カテゴリ
・なし
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・kind - テキストトラックの種類。列挙属性。
subtitles - 音声が利用可能であるが理解されていない場合に適した字幕を表示。ビデオに重ねて表示。
captions - 音声が聞こえない、またははっきり聞こえない場合などに適した字幕を表示。ビデオに重ねて表示。
descriptions - 映像が不明瞭な場合の説明。合成音声で表す。
chapters - 章(チャプター)タイトル
metadata - スクリプトから使用するためのトラック。表示されない。
・src - テキストトラックのURL
・srclang - テキストトラックの言語
・label - 使用可能なラベル
・default - 他に適切なテキストトラックがない場合はこのトラックを有効にする
タグの記載場所
・メディア要素の子要素としてフローコンテンツより前に置く
map要素
img要素とarea要素と共にイメージマップを表す。
<img src="500_ice.JPG" usemap="#test"> <map name="test"> <area href="icecream.html" shape="rect" coords="15,93,288,309"> <area href="caferate.html" shape="rect" coords="321,91,500,291"> </map>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・トランスペアレント
コンテンツ属性
・グローバル属性
・name - usemap属性と関連付けるためのイメージマップの名前
タグの記載場所
・フレージングコンテンツを配置できる場所
area要素
イメージマップ上のエリアとハイパーリンクの設定を行う
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
コンテンツモデル
・トランスペアレント
コンテンツ属性
・グローバル属性
・alt - 画像が利用できない場合に使用する置換テキスト
・coords - イメージマップに作成される形状の座標(浮動小数点数のリスト)
・download - 移動するのではなくリソースをダウンロードするかどうか、そうであればそのファイル名
・href - ハイパーリンクのアドレス
・hreflang - リンク先リソースの言語
・rel - このドキュメントとリンク先の関係
・shape - イメージマップ上に作成される形状の種類。列挙属性。coordsはCSSピクセル単位。
circleを指定した場合、coords="円の中心のx座標, 円の中心のy座標, 円の半径"
rectを指定した場合、coords="左上のx座標, 左上のy座標, 右下のx座標, 右下のy座標"
polyを指定した場合、coords="多角形の各角のx座標, 多角形の各角のy座標" ※指定は偶数で少なくとも6つもつ必要がある。
defaultを指定した場合、画像全体となる。
・target - ブラウジングコンテキスト
・type - リンク先のMIMEタイプ
・referrerpolicy - リファラーポリシー
タグの記載場所
・フレージングコンテンツを配置できる場所(ただしmap要素またはtemplate要素を祖先にもつ場合)
HTML5のEmbedded Content～video要素とaudio要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
video要素
動画(映像・映画)や、キャプション付きのオーディオデータを再生する。
video要素に未対応のブラウザなどのために、要素内容にその動画へのアクセス方法を明示したコンテンツを入れることが可能。
track要素を用いてWebVTTファイルを読み込んで字幕などを表示することも可能。
<video src="water.mp4" controls loop muted width="400" height="200"> <p><a href="water.mp4">ダウンロード</a></p> </video>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・controls属性がある場合は、インタラクティブコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・src属性がある場合：0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)
・src属性がない場合：0個以上のsource要素とそれに続く0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)
コンテンツ属性
・グローバル属性
・src - リソースのURL
・crossorigin - クロスオリジンの設定
・poster - ビデオ再生の前に表示するポスターフレーム。利用可能なビデオデータがない時に表示させる画像ファイルのURLの指定をする。
・preload - メディアリソースのバッファリングの設定
・autoplay - ページがロードされた時に再生開始するかどうかの設定(論理属性。属性名のみでも可)
・loop - メディアリソースを繰り返しにするかどうかの設定(論理属性。属性名のみでも可)
・muted - デフォルトでミュート設定にするかどうかの設定(論理属性。属性名のみでも可)
・controls - コントローラを表示する設定(論理属性。属性名のみでも可)
・width - 横幅
・height - 高さ
タグの記載場所
・エンベディッドコンテンツを配置できる場所
audio要素
音声またはオーディオストリームを再生する。
audio要素に未対応のブラウザなどのために、要素内容にその動画へのアクセス方法を明示したコンテンツを入れることが可能。
track要素を用いてWebVTTファイルを読み込んで字幕などを表示することも可能。
<audio src="water.mp4" controls loop muted> <p><a href="water.mp4">ダウンロード</a></p> </audio>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・controls属性がある場合は、インタラクティブコンテンツ
・controls属性がある場合は、パルパブルコンテンツ
コンテンツモデル
・src属性がある場合：0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)
・src属性がない場合：0個以上のsource要素とそれに続く0個以上のtrack要素とそれに続くトランスペアレントコンテンツ(メディア要素は含まない)
コンテンツ属性
・グローバル属性
・src - リソースのURL
・crossorigin - クロスオリジンの設定
・preload - メディアリソースのバッファリングの設定
・autoplay - ページがロードされた時に再生開始するかどうかの設定(論理属性。属性名のみでも可)
・loop - メディアリソースを繰り返しにするかどうかの設定(論理属性。属性名のみでも可)
・muted - デフォルトでミュート設定にするかどうかの設定(論理属性。属性名のみでも可)
・controls - コントローラを表示する設定(論理属性。属性名のみでも可)
タグの記載場所
・エンベディッドコンテンツを配置できる場所
HTML5のEmbedded Content～object要素とparam要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
object要素
外部リソースを表す。
リソースの種類に応じて、画像や入れ子のブラウジングコンテキスト、プラグインを用いたコンテンツなどを表す。
Flashコンテンツを表示する際によく使われていたが、現在はブラウザ対応も減りFlash自体も2020年には終わりを迎えるみたい。
<figure> <object data="object_nested.html" width="300" height="50"></object> <figcaption>↑別ドキュメントを埋め込んでいるよ</figcaption> </figure> <figure> <object data="500_ice.JPG" height="100"></object> <figcaption>↑画像だよ</figcaption> </figure>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・サブミット可能なform関連要素、リスト化form関連要素
・パルパブルコンテンツ
コンテンツモデル
・0個以上のparam要素とそれに続くトランスペアレントコンテンツ
コンテンツ属性
・グローバル属性
・data - リソースのURL
・type - 埋め込むリソースのMIME TYPE
・typemustmatch - 使用するリソースに対してtype属性とContent-Type値が一致する必要があるかどうかを指定。論理属性を指定。
・name - 入れ子にしたブラウジングコンテキスト名
・form - form要素との関連付け。form要素のid値を指定する。
・width - 横幅(CSSピクセル指定のみ)
・height - 高さ(CSSピクセル指定のみ)
タグの記載場所
・エンベディッドコンテンツを配置できる場所
param要素
object要素によって呼び出されるプラグインのパラメータを定義する。それ自体では何も表わさない。
nameとvalueの両方が存在しなければならない。
<figure> <object data="XXXXXXXXXXXX.swf" type="application/x-shockwave-flash"> <param name="foods" value="chocopie"> </object> <figcaption>↑Flashだとこんな感じ(中身は適当なので何も表示されない)</figcaption> </figure>
カテゴリ
・なし
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・name - パラメータ名
・value - パラメータの値
タグの記載場所
・object要素の子要素として、フローコンテンツの前に置く
HTML5のEmbedded Content～iframe要素とembed要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
iframe要素
inline frameの略。
入れ子になったブラウジングコンテキスト(文書が表示される環境。ウィンドウやタブ)を表す。
<div>下に埋め込むよ1</div> <iframe src="iframe_nested.html" width="300" height="100" sandbox></iframe> <div>下に埋め込むよ2</div> <iframe srcdoc="<div><a href="/XXXXX/YYYY">埋め込まれたコンテンツ２だよ</a></div>" src="iframe_nested.html" width="300" height="100" sandbox></iframe>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・インタラクティブコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・必要に応じてテキスト
コンテンツ属性
・グローバル属性
・src - リソースのURL
・srcdoc - iframe内で描画したいドキュメント
・name - 入れ子にしたブラウジングコンテキスト名
・sandbox - 入れ子にしたコンテンツのセキュリティルール
・allowfullscreen - iframeのコンテンツをフルスクリーンで表示することを許可
・allowpaymentrequest - iframeのコンテンツがPaymentRequestインターフェイスを使用して支払い要求を行うことを許可されているか
・width - 横幅
・height - 高さ
・referrerpolicy - リファラポリシー
タグの記載場所
・エンベディッドコンテンツを配置できる場所
embed要素
外部（通常はHTML以外の）アプリケーションまたはインタラクティブコンテンツを埋め込む。
プラグインを使ったコンテンツの埋め込みに使う。(Flashなど。Flashは2020年には終わりを迎えるが・・)
<div>下に埋め込むよ1</div> <embed src="XXXXXXXYYYYY.swf" quality="high"></embed>
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・インタラクティブコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・src - リソースのURL
・type - 埋め込まれたリソースの種類(有効なMIMEタイプを指定)
・width - 横幅
・height- 高さ
・他、プラグインで必要な属性を指定可能
タグの記載場所
・エンベディッドコンテンツを配置できる場所
HTML5のEmbedded Content～picture要素とsource要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
picture要素
img要素と同様に候補画像を指定し、条件に合致した画像だけロードして表示する。
複数のsource要素とimg要素を含むコンテナ。
source要素に未対応ブラウザの場合はimg要素の画像を表示する。
HTMLの例はsource要素に記載。
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
コンテンツモデル
・0個以上のsource要素とそれに続くimg要素を持つことができる。
・オプションでscript要素とtemplate要素を持つことができる。
コンテンツ属性
・グローバル属性
タグの記載場所
・エンベディッドコンテンツを配置できる場所
source要素
img要素の複数の代替ソースセット、または、audio要素・video要素の複数の代替メディアリソースを指定する。
<picture> <source media="(max-width: 500px)" srcset="500_ice.JPG 1x, 1000_ice.JPG 2x"> <source media="(min-width: 501px)" srcset="500_kinoko.JPG 1x, 1000_kinoko.JPG 2x"> <img src="500_kinoko.JPG" style="max-width:500px;width:100%;" alt=""> </picture>
iPhone6/7/8(PCのemulator)で表示したとき
PCのビューポート494pxで表示したとき
PCのビューポート580pxで表示したとき
カテゴリ
・なし
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・src - リソースのアドレス(親要素がaudio要素・video要素の時のみ)
・type - 埋め込むリソースの種類
・srcset - 異なる環境で使用する画像のリスト(親要素がpicture要素の時のみ)
例：高解像度のディスプレイ用の画像、画面幅の小さいディスプレイ用の画像)
・sizes - ブレークポイントごとの画像幅を指定(親要素がpicture要素の時のみ)
・media - メディアクエリの形式で指定(親要素がpicture要素の時のみ)
タグの記載場所
・picture要素の子要素としてimg要素の前に配置
・audio要素またはvideo要素の子要素としてフローコンテンツまたはtrack要素の前に配置
HTML5のEmbedded Content～img要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
img要素
画像またはそのフォールバックコンテンツ(外部リソースが使用できないときに使用するコンテンツ)を表す。
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・form-associated要素
・usemap 属性がある場合、インタラクティブコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・alt - 画像が利用できない場合の代替テキスト
・src - リソースのアドレス
・srcset - 異なる環境で使用する画像のリスト (例：高解像度のディスプレイ用の画像、画面幅の小さいディスプレイ用の画像)
・sizes - ブレークポイントごとの画像幅を指定
・crossorigin - クロスオリジンの指定。anonymousなら認証情報モードを"same-origin"としてリクエスト。use-credentialsなら認証情報モードを"include"としてリクエスト。
・usemap - イメージマップの設定
・ismap - サーバサイドイメージマップの設定
・width - 画像の横幅
・height - 画像の高さ
・referrerpolicy - リファラーポリシーの設定
・longdesc - 画像の詳細な説明へのリンクの設定
タグの記載場所
・エンベディッドコンテンツを配置できる場所
▼srcsetでピクセル密度記述子を用いた指定
画像URLが何倍のピクセル密度デバイス用のものかを示す。
[画像URL(半角スペース)〇x]の形式で記載。〇には浮動小数点数を指定する。2xなら2倍、3xなら3倍のピクセル密度のデバイス用の画像を示す。
srcset属性に属性に未対応の環境やピクセル密度が1倍の場合はsrc属性に指定した画像が表示される。
<div> <h4>src属性のみ指定</h4> <img src="500_ice.JPG" alt=""> </div> <div> <h4>ピクセル密度2倍のデバイス向け指定あり</h4> <img srcset="500_ice.JPG 1x, 1000_ice.JPG 2x" src="500_ice.JPG"> </div>
PCで表示したとき
iPhone8で表示したとき
▼srcsetで幅記述子を用いた指定
画像URLの画像自体の幅を示す。ブラウザがピクセル密度や表示させる幅などを見て最適な画像をよしなに選んでそれだけロードして表示。
[画像URL(半角スペース)〇w]の形式で記載。〇には負ではない整数を指定する。500wなら画像の幅が500px。
<div> <h4>画像幅指定あり</h4> <img srcset="500_ice.JPG 500w, 1000_ice.JPG 1000w, 2000_ice.JPG 2000w" src="500_ice.JPG" width="500" alt=""> </div>
PCのchromeブラウザ幅529pxで表示したとき
PCのchromeブラウザ幅1040pxで表示したとき
iPhone8(ブラウザ幅375px)で表示したとき
▼sizesで画像幅を指定
vw(viewportのwidth)やpxで指定。
ブラウザが、この指定に加えてピクセル密度などを見て最適な画像をよしなに選んでそれだけロードして表示。
<div> <h4>sizes指定あり</h4> <img sizes="(max-width:1000px)100vw, (max-width:2000px)500px" srcset="500_ice.JPG 500w, 1000_ice.JPG 1000w, 2000_ice.JPG 2000w" src="500_ice.JPG" alt=""> </div>
PCのchromeブラウザ幅991pxで表示したとき
PCのchromeブラウザ幅1006pxで表示したとき
iPhone8(ブラウザ幅375px)で表示したとき
