チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

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で表示したとき
f:id:chooringo:20190525010034p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・サブミット可能な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=&quot;/XXXXX/YYYY&quot;>埋め込まれたコンテンツ2だよ</a></div>" 
  src="iframe_nested.html" width="300" height="100" sandbox></iframe>

chromeで表示したとき
f:id:chooringo:20190518123436p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
インタラクティブコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・必要に応じてテキスト

コンテンツ属性
・グローバル属性
・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)で表示したとき
f:id:chooringo:20190511214337p:plain

PCのビューポート494pxで表示したとき
f:id:chooringo:20190511214351p:plain

PCのビューポート580pxで表示したとき
f:id:chooringo:20190511214406p:plain


カテゴリ
・なし

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性
・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で表示したとき
f:id:chooringo:20190420205247p:plain

iPhone8で表示したとき
f:id:chooringo:20190420192418p:plain

▼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で表示したとき
f:id:chooringo:20190420223011p:plain

PCのchromeブラウザ幅1040pxで表示したとき
f:id:chooringo:20190420223025p:plain

iPhone8(ブラウザ幅375px)で表示したとき
f:id:chooringo:20190420221603p:plain

▼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で表示したとき
f:id:chooringo:20190420232439p:plain

PCのchromeブラウザ幅1006pxで表示したとき
f:id:chooringo:20190420232454p:plain

iPhone8(ブラウザ幅375px)で表示したとき
f:id:chooringo:20190420232507p:plain

HTML5のEdits~ins要素とdel要素~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

edits関連

ドキュメントへの編集を表す。

ins要素

ドキュメントへの追加を表す。
暗黙の段落境界を越えて要素を配置してはいけない。

<ul>
    <li>とちおとめ</li>
    <li>あまおう</li>
    <li><ins datetime="2019-04-13 00:00Z">スカイベリー</ins></li>
</ul>

chromeで表示したとき
f:id:chooringo:20190413141638p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・トランスペアレント

コンテンツ属性
・グローバル属性
・cite - 引用元または編集に関する詳細情報へのリンク
・datetime - 変更した日付と時刻(オプション)

タグの記載場所
・フレージングコンテンツを配置できる場所

del要素

ドキュメントからの削除を表す。
暗黙の段落境界を越えて要素を配置してはいけない。

<ul>
    <li><del datetime="2019-04-13 00:00Z">玄関掃除</del></li>
    <li><del datetime="2019-04-13 00:00Z">網戸とサッシ掃除</del></li>
    <li>掃除機がけ</li>
    <li>雑巾がけ</li>
    <li>壁パタリング</li>
</ul>

chromeで表示したとき
f:id:chooringo:20190413145901p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ

コンテンツモデル
・トランスペアレント

コンテンツ属性
・グローバル属性
・cite - 引用元または編集に関する詳細情報へのリンク
・datetime - 変更した日付と時刻(オプション)

タグの記載場所
・フレージングコンテンツが配置できる場所

HTML5のテキストレベルセマンティクス~br要素とwbr要素~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

br要素

改行を表す。
詩や住所のように、実際にはコンテンツの一部である改行にのみ使用することができる。
段落内のテーマ別グループを区切るために使うことはできない。

<p>〒XXX-XXXX<br>
東京都港区ほげほげのむにゃむにゃ<br>
ちょこぱいビル</p>

chromeで表示したとき
f:id:chooringo:20190406131259p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツを配置できる場所

wbr要素

テキストの折り返し可能な箇所を表す。

<p>aaaaaaaaaaa!I love <wbr>chocolate pie.</p>

chromeで表示したとき
f:id:chooringo:20190406172902p:plain
chromeで表示したとき(ブラウザの幅を狭めたとき)
f:id:chooringo:20190406172914p:plain


カテゴリ
・フローコンテンツ
・フレージングコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所

HTML5のテキストレベルセマンティクス~bdi要素とbdo要素とspan要素~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

bdi要素

Unicode双方向アルゴリズムの影響を受けないように、隔離するテキストの範囲を表す。
Unicode双方向アルゴリズムによって期待通りの書字方向にならない場合に使用する。
※双方向アルゴリズムアラビア語やへヘブライ語のような右から左へ読む文字と、英語などのような左から右へ読む文字が混在する双方向テキストを正しく処理するためのアルゴリズム

<ul>
    <li>ぶどう 葡萄:25</li>
    <li>みかん orange:10</li>
    <li>いちご <bdi>الفراولة</bdi>:20</li>
</ul>

chromeで表示したとき
f:id:chooringo:20190317154126p:plain
bdi要素で囲わないと、"いちごالفراولة : 20"となってしまうらしい。
らしいというのは、bdi要素なしでhtmlを書いてる時点で勝手に並び替えられてしまい再現できず。テキストエディタでもこのアルゴリズムが働いているせい??
訳がわからない。。
とにかく、セミコロンやコロンがあると期待と反した表示になってしまう。
↑の例だと、bdi要素がないと”いちご”の横のアラビア語から”:20”までが、右から左の所持方向で判別されてしまう。

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
フレージングコンテンツ

コンテンツ属性
・グローバル属性(この要素ではdir属性に特別な意味がつく。デフォルトはauto:自動判別)

タグの記載場所
・フレージングコンテンツを配置できる場所

bdo要素

明示的に所持方向を指示しUnicode双方向アルゴリズムを上書きする。
dir属性は必ず指定しなければならない。

<p>昔の日本は右から左に書いていた時代があった。例えば、<bdo dir="rtl">スピルカ</bdo></p>

chromeで表示したとき
f:id:chooringo:20190317162801p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性(この要素ではdir属性に特別な意味がつく。左から右への上書きを指定するには値ltr、右から左への上書きを指定するには値rtlを指定。autoは指定できない。)

タグの記載場所
・フレージングコンテンツが配置できる場所

span要素

この要素自体は何も意味を持たないが、グローバル属性(class、land、dirなど)と一緒に利用すると便利。

<span class="goal">今年の目標は趣味を見つけること!</span>

chromeで表示したとき
f:id:chooringo:20190317163727p:plain


カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所