HTML
HTMLの基本
- ブロック要素
ブロック要素は指定がないと親要素の
100%の大きさになる。
要素名称
祖先要素 ある要素に直結した上位の要素を「祖先要素」と呼びます。上の例では、html要素とbody要素がdl要素の祖先要素となります。
子孫要素 ある要素に直結した下位の要素を「子孫要素」と呼びます。上の例では、dd要素とdd要素の子要素であるp要素がdl要素の子孫要素となります。
兄弟要素 ある要素と同じ親要素内にある子要素同士を「兄弟要素」と呼びます。上の例では、h1要素とp要素がbody要素を親要素としたdl要素の兄弟要素となります。
iframe(inline frame) アイフレーム
iframeとは、HTMLの要素（タグ）のひとつでWebページ内に短形の領域を設け、別のWebページなどを読み込んで表示するもの 別のWebページや画像などをあたかもページの要素のひとつのように埋め込んで一体的に表示することができる
iframe内で外部のURLを指定した場合には、親ページとインラインフレーム内のページのJSプログラムは原則として相手のページの要素に直接アクセスすることはできない。 この制限をSOP（Same-Origin Polできるiframeicy：同一生成元ポリシー）という。ただし、Webサーバの設定で管理者が明示的に許可した場合にはこの制限を緩和できる。
メリット あるコードの断片を、親となるHTML文書から隔離しつつ、Webページに埋め込むことができる方法、iframeセキュリティ上の制限で別のサイトを読み込むiframeの中身のHTMLには、親のHTMLが持っているJavaScriptやCSSからアクセスすることはできません。 実際にTwitterやFacebookなどから提供されているWebページ埋め込み用のボタンにはiframeが使われています。
セキュリティのためというのもありますが、どんなWebページに埋め込まれても、Webページ側のCSSやJavaScriptの影響を受けずに既定のデザインと機能を提供する役目も果たしています。
ですが、iframeは小さなボタンやちょっとしたUIを設置する目的としては少し大げさで、柔軟さも足りません。そこで考えられたのがShadow DOMなのです。
Shadow DOM
DOMに対してカプセル化を提供する仕組み これはオブジェクト指向と呼ばれる、プログラミングの考え方を構成している概念のひとつ
あるオブジェクトの中身に直接アクセスすることはできず、中身の詳細を覗くこともできず、オブジェクトを実装した人の用意した方法でしか、その中身にアクセスできない仕組みのこと
- DOMをカプセル化する あるHTML要素の中身に直接アクセスすることはできず、中身の詳細を覗くこともできず、HTML要素を実装した人の用意した方法でしかその中身にアクセスできない仕組み」となる
なんとなく想像できるでしょうか。具体的な状態としては、Webページ側のCSSルールは適用されず、JavaScriptからDOMを通じてアクセスすることもできず、Webインスペクターを使って要素内を調べることもできない。
htmlのレンダリング違い
audioタグについて
ブラウザごとでオーディオに差異があるためそれを吸収する必要がある。
なるべく差異を吸収するためには <audio> タグでダウンロードを消して、ダウンロードbuttonはまた別に作成すると少しは差異が減る。
role属性
英単語でroleは役割という意味 HTMLでのrole属性はタグごとに設定する属性でタグごとの役割という意味になる。 role属性に設定した値は、ブラウザに表示されない。 目の不自由な方がブラウザの読み上げ機能を使った場合などに使用される情報になる、
role属性によって要素に意味づけをして役割を与えることで、スクリーンリーダーなどの読み上げソフトでもWebサイトの構造を認識することが可能になる。