## ch1 アクセシビリティ
### p17 Webアクセシビリティ
A11yに準拠したWebページを作ることは、ユーザからの信頼性獲得につながる。
障碍者差別解消法の改正など、より多くのユーザにプロダクトを使っていただく、「合理的配慮」が必要になっていく。この配慮を円滑に実施していくためにWebアクセシビリティを知り、将来的な対応を考慮した実装・コーディングを行っておくことが重要になる。
引用:
> 障害者差別解消法（障害を理由とする差別の解消の推進に関する法律）の改正により、障害のある人への「合理的配慮」が国や地方公共団体だけでなく、民間事業者にも義務付けられるようになりました。p17
> たとえば、利用者の求めに応じて Web の代わりに電話やメールで対応するといった義務が生じることになります
### p18 アクセシビリティの達成基準
A11yの基準については、W3C、総務省、デジタル庁が公開しているガイドラインを参考にすればよい。
ガイドラインには、ARIA,HTML,CSS,スクリプトなどでどのように達成するか、といったことも記載されている
→ どんな感じなんだろ？🤔
引用：
>Web アクセシビリティ対応の指針となるのは、 W3C が勧告している WCAG（Web Content Accessibility Guidelines / Web コンテンツ・アクセシビリティガイドライン）の達成基準
> WCAG（JISX8341-3） の達成基準は A、AA、 AAA の 3 つの適合レベルに分かれており、目標とするレベルを決めます。ただし、WCAG では AAA を目標とすることは推奨されていません。多くの国が AA に適合させることを推奨しており、総務省が発行している「みんなの公共サイト運用ガイドライン」でも AA に適合させることが推奨されています
> 現在、WCAG 2.0 と同一内容の一致規格として国際規格の ISO/IEC40500:2012 と、国内規格の JISX8341-3:2016 が出ています（これらは 2003 年末に勧告された WCAG 2.2 の内容で更新される予定です）。そのため、国内では JISX8341-3:2016（もしくはその更新版）への準拠が必要 Webアクセシビリティのガイドラインと規格の関係 ――デジタル庁「ウェブアクセシビリティ導入ガイドブック」より
>達成基準を満たすための方法は、WCAG の解説書と達成方法集にまとめられています。ARIA、 HTML、CSS、スクリプトなどを使ったさまざまな達成方法が示されていますので、サイトの方針やコンテンツなどに合わせて適切な方法を使って対応します
参考文献：
- [Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳)](https://waic.jp/translations/WCAG22/)
- [WCAG 2.1 解説書](https://waic.jp/translations/WCAG21/Understanding/)
- [WCAG 2.1 達成方法集](https://waic.jp/translations/WCAG21/Techniques/)
- [ウェブアクセシビリティ導入ガイドブック｜デジタル庁](https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook)
- [総務省｜情報バリアフリー環境の整備｜みんなの公共サイト運用ガイドライン（2024年版）](https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html)
### p20 ARIA
HTMLの仕様を知り、CSSで色のコントラスト比が適切に設定できていれば、適合レベルA,AAは達成できる。
HTMLのセマンティックマークアップが綺麗にできるような設計が大事。この「綺麗さ」を構築するための前提知識として、ARIAの情報やWCAGの達成基準の把握が重要になる。
引用：
>HTML で適切にセマンティックマークアップを行うと、ARIA の情報も適切に示したことになり、多くの達成基準を満たすことができるのです
>セマンティックマークアップによって以下を把握しておくことが重要である
>・ARIA の情報をどう示したことになるのか
>・WCAG の達成基準がどのように満たされるのか
ARIA（Accessible Rich Internet Applications）は、 HTML でマークアップしたコンテンツ
> HTML では要素ごとにセマンティクスに合わせて「暗黙の ARIA セマンティクス（暗黙の ARIA ロールと aria-* 属性）」が設定されています
参考：
[Accessible Rich Internet Applications (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria/)
### p22 悪いARIAがあるぐらいならARIAなしの方がよい
[No ARIA is better than Bad ARIA](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/)
### p23 アクセシブル名
アクセシブル名（accessible name）は`aria-label`や`aria-labelledby`属性など、要素を識別するテキスト情報。
支援ツールのフォーカスで読み上げられるなど、要素の機能や目的を伝えるために使用される。
例えば、sectionタグ自体はその構造の内容を伝えているわけではないので、aria属性で意図を伝えるなど。
利用例：
- `<a href=""> More... </a>`
- → `<a href="" area-label="詳しい解説を読む"> More... </a>`
- section要素にアクセシブル名を指定し、スクリーンリーダに構造のランドマークを伝える
```html
<section aria-labelledby="latest">
<h2 id="latest">最新記事一覧</h2>
</section>
```
- button要素の現在の属性を示す
```html
<button role="switch" aria-checked="true">...</button>
```
## ch1 CSS
### p24 デフォルトCSS
ブラウザがデフォルトで CSS の設定を適用します。
この CSS が「UA スタイルシート（ユーザーエージェントスタイルシート /User-agent stylesheets）」です。
参考：
[Source/core/css/html.css - chromium/blink - Git at Google](https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css)
### カスケード
作成者スタイルシートで UA スタイルシートの設定を上書きできる仕組みが「カスケード」です。複数の CSS の設定が同一の HTML 要素に適用された場合に、どの設定が優先されるかを決定する仕組みです
## ch1 レンダリング
### p26.レンダリングまでの仕組み
WEBに描画されるまでの時間をクリティカルレンダリングパスと呼ばれる
HTMLとCSSを取得したら、DOM,CSSOMツリーができて、JavaScriptをもとにレンダーツリーが作られる。この後、ブラウザがレイアウトを計算して、ペイントする。
また別で、DOMをベースにアクセシビリティツリーも作られ、これはスクリーンリーダなどに渡される
><img src="../../../image/2025-09-07-01-19-12.png" width="300">
### レンダリングまでの仕組み
DOM ツリーと CSSOM ツリーができあがったら、ブラウザはこれらを合成してレンダーツリーを構築します。
`<head>` のように `display: none` で非表示に設定されたノードとその子孫ノードは含まれません
- headの部分ってCSSで非表示になってるから見えないらしい
- `display: block`とかにしたらどうなる？🤔
クリティカルレンダリングパスのメモ：
- レイアウト：要素ノードとテキストノードの位置とサイズを決定する処理
- ボックスツリー：各ノードのボックスを入れ子上に格納したツリー
- ペイント：各ノードを画面に描画する処理。GPU上のレイヤーに分けて描画する物がある場合、合成して表示される。
- GPU上のレイヤー：`video`, `canvas`, 3Dトランスフォーム、透明度の変更アニメーションなど
- アクセシビリティツリー：DOMをもとに、ARIAのroleやnameを整理したツリー。altが空のimgタグや`display:none`で非表示にした要素は反映されない
アクセシビリティツリーのプロパティのイメージ：
><img src="../../../image/2025-09-07-01-21-41.png" width="300">
## ch1 コンテンツモデル
### p32. タグと要素の違い
要素：開始タグと終了タグまでの部分を1要素とする。
この要素の作成を、マークアップと呼ぶ。
要素に指定する論理属性は、値を指定された時点で問答無用でtrueになるので注意。
`required="false"`, `required=""`, `required`もすべてtrueになるので、falseにしたい場合は属性を記載しない、という認識を持っておく。
参考：
特殊文字をブラウザに正しく表示するための文字参照
[HTML Standard named-characters](https://html.spec.whatwg.org/multipage/named-characters.html)
### コンテンツモデルとコンテンツカテゴリー
- 要素ごとにコンテンツモデルが定義される
- コンテンツモデル内に定義されているもの
- コンテンツカテゴリー
- 要素名
- トランスペアレント
- コンテンツカテゴリーは、要素のグループを示すためのもの
- トランスペアレントは親要素のコンテンツモデルを継承すること
🤔トランスペアレントの理解が曖昧・・・
### p.33 コンテンツカテゴリー
- body要素内の要素として、フローコンテンツ
- コンテンツの構造を示す要素として、セクショニングコンテンツ
- フォーム関連として、Form-associatedコンテンツ、リステッドコンテンツ、送信可能コンテンツ、リセット可能コンテンツ、ラベル可能コンテンツなどがある。
- 少なくとも１つは内包されていることを推奨する属性を示すパルパブルコンテンツ
- 複数のコンテンツカテゴリーに属する要素もある。
><img src="../../../image/2025-09-07-01-23-55.png" alt="コンテンツカテゴリーその1" width="300">
><img src="../../../image/2025-09-07-01-24-45.png" alt="コンテンツカテゴリーその2" width="300">
### ARIAロールの分類
要素が持つARIAロールは以下
- 文書構造
- ランドマーク：ナビゲーション時にページの構造を示すロール
- ライブリージョン：動的に更新されることを示す
- ウィンドウ：ウィンドウとして機能する
- ウィジェット：UIウィジェットを示す
><img src="../../../image/2025-09-07-01-25-24.png" alt="ARIAロールの役割" width="300">
🤔割とここら辺は流し見程度での理解になっている
🤔プルプバルコンテンツ、ウィジェット、ウィンドウあたりよくわからん
## ch1 display-type
### p36 CSSのディスプレイタイプ
ディスプレイタイプ
- ブロックレベル
- インラインレベル
- 非表示
- テーブル関連
- ルビ関連
## ch2 セクションとランドマーク
ページの構造を示す要素のことをセクショニング（ヘディング）コンテンツと呼ぶ。
header,footer,section,article,aside,nav,main,form,serachなど。
🤔階層を示す要素を「正しく使う」ことで、視認性が高く、アクセシビリティの高いページになる
ARIAロールとしては「ランドマーク」に分類され、スクリーンリーダーはランドマークと見出しへジャンプする機能を提供している。
### headerとfooter
ページのヘッダーとフッターを示す。
body要素が親であれば、暗黙ARIAロールとして、ヘッダーは「banner」、フッターは「contentinfo」となる。
sectionやmain要素内で使われた場合、ARIAロールは「generic」となり、ランドマークに分類される。
### form
フォームコントロールで構成される領域を示す。
ただし、form要素内はフォームコントロール以外の要素も内包できる。これはformがフローコンテンツにも属しているから。
form要素の属性としてフォームの種別を指定できる。actionで送信先URLを指定したり、method属性でHTTPのリクエストメソッドを指定したり、など。
method属性では、ダイアログを閉じるdialogなどもあったりするらしい。🤔
### main
メインコンテンツは、ページ内で1箇所だけに使用することが求められる。
暗黙のARIAロールは、mainとなる。
### search
例えばform要素をsearchでマークアップすることで、検索機能を提供していることを示すことが出来る
暗黙のARIAロールは、searchとなる。
```html
<search>
<form>
<label for="search">検索</label>
<input type="search" id="search" />
<button type="submit" aria-label="検索する">
<svg><!-- ... --></svg>
</button>
</form>
</search>
```
しっかり作るとこんな感じになる
<search>
<form style="display: flex; align-items: center; border: 2px solid #bfc9ca; border-radius: 6px; padding: 8px 12px; width: 400px;">
<button type="submit" aria-label="検索する" style="background: none; border: none; padding: 0; margin-right: 8px; cursor: pointer;">
<svg width="24" height="24" fill="none" stroke="#2d3c3c" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<line x1="17" y1="17" x2="21" y2="21"/>
</svg>
</button>
<label for="search" style="display: none;">検索</label>
<input type="search" id="search" placeholder="Search" style="border: none; outline: none; font-size: 20px; color: #7a8a8a; width: 100%; background: transparent;">
</form>
</search>
### nav
ナビゲーションリンクの領域を示す。
暗黙のARIAロールは、navigationとなる。
### aside
メインコンテンツなどについての補足や関連情報を示す。
サイドバーや目次、関連記事などのマークアップに使う。
暗黙のARIAロールは、complementary（補足）となる。
### section
汎用的なセクションを示す。nav, aside, articleの方が適切であれば、そちらを選ぶ。
暗黙のARIAロールは「region」となり、アクセシブル名と組み合わせることでランドマークとなる。もし複数のregionが存在した場合、スクリーンリーダはどのリージョンがどのコンテンツに対応しているのかわからなくなってしまう。
### article
ニュースや記事、カードなどのように、それ自体で自己完結したコンテンツを示す
暗黙のARIAロールは、articleとなる。
### hgroup
見出しとサブタイトルを示す領域。サブタイトル部分はpでマークアップすることが期待される。
暗黙のARIAロールは存在しない。articleの見出しに使ったりなど。
## p48~ ch2 ブロックレベルのセマンティクス
ページの構造よりも小さいまとまりとして使われる要素をブロックレベル要素と呼ぶ。
例えば、address,p,ul,pre,figure,div,menu,tableなど。
デフォルトのdisplay-typeはblockとなる。
ARIAロールは「文書構造」に分類されるものとなる。
### address 連絡先
親要素で意味が変わる
- article内のaddress: その記事の連絡先を示す。
- body内のaddress: そのページの連絡先を示す。
暗黙のARIAロールは、groupとなる。
### blockquote 引用
引用したコンテンツであることを示す。
使い方としては、[[Living Standard]]に準拠した記述を求められる。
- blockquote：cite属性で引用元のURLを記述し、引用内容を要素内に記述する。
- 引用元のタイトルは、blockquote要素の後のcite要素に記載する。
```html
<blockquote cite="https://example.com">
<p>ここに引用内容を書く</p>
</blockquote>
<cite>ここに引用先のタイトルを書く</cite>
```
暗黙のARIAロールは、blockquoteとなる。
### figure 図表とキャプション
figureは、図表、イラスト、写真を示す。
firurecationをつけるとキャプションを付けることもできる
暗黙のARIAロールは、figureとなる。
img要素との違いって何だろう？🤔
### hr 区切り位置
hrは、段落間の区切りであることを示す。構造の切れ目、というわけではない。
暗黙のARIAロールは、separatorとなる。
### p 段落
pは、段落を示す要素。
暗黙のARIAロールは、paragraphとなる。
pタグのコンテンツカテゴリーはフレージング。パラグラフを構成する物はこの「フレージングコンテンツ」に属する要素やテキストに限られることになる。
HTML Living Standardの定義：
>パラグラフは、特定のトピックを論じる1つまたは複数のセンテンス（文）からなるテキストブロックであり、より一般的なグループ（住所、フォームの一部、詩など）でも使用される
### pre 整形済みテキスト
preは、アスキーアートやコードハイライトの表示を示す。
暗黙のARIAロールは、genericとなる。
デフォルトのCSSとして、white-spaceプロパティがpreに設定されるのでインデント付きでテキスト表示され、フォントファミリーも等幅フォントのmonospaceに設定される。
コードを示す場合は、code要素とセットで記述する。
```html
<pre>
<code>
h1 {
color: red;
font-size:20px;
}
</code>
</pre>
```
### div 特別なセマンティクスを持たないブロックレベル
division（区分・分割）の略で、他に適当な要素がない場合に使用する
暗黙のARIAロールは、genericとなる。
### table テーブル
tableは、２次元的な情報の関係性を示す。
暗黙のARIAロールは、tableとなる。
基本のテーブル：`table`, `tr`, `th`, `td`
行列のグループやキャプション：`caption`, `colgroup`, `col`, `thead`, `tbody`, `thead`
[[WCAG]]の達成基準で、2次元の関係性を持つ場合はtableで表現することが求められている。
>2次元の関係性を持つ情報は、表形式で表示するかどうかにかかわらず、 `<table>`でマークアップすることが求められます。これはWCAGの達成基準「1.3.1: 情報及び関係性」を満たすことにつながります
### 見出し th の属性
thの暗黙ロールはcolumnheaderやrowheaderなどになる。
明示的に指定する場合、scope属性を使い、row,col,rowgroup,colgroupを指定する。
複数の行・列にまたがるセルを作成したい場合、rowspan, colspan属性を指定する。
### caption要素
テーブルにキャプションを付与したい場合に利用する。
### 行列のグループを示す thead,tbody,tfoot,col,colgroup
テーブルのメタ情報を示す。
- テーブルの行：thead
- テーブルの本体：tbody
- フッターのグループ（合計など）：tfoot
- 列のグループ：colgroup
### ul, ol 番号無し、番号付きリスト
ul: unordered list
ol: ordered list
olの属性
- reversed: 逆順の番号
- start: 開始番号の指定
- type: 番号を示すマーカーの種類(`1/a/A/i/I`)
暗黙のARIAロールは、ul,olはlist, liはlistitemとなる。
### menu 順序が重要でない番号無しリスト
menuは、順序が重要でないツールバーなどのリストを示す。
暗黙のARIAロールは、listとなる。
### dl dt dd 用語の説明のリスト
- dl: 説明のリストを示す要素
- dt: 用語
- dd: 用語の説明
```html
<dl>
<dt>ティム・バーナーズ＝リー</dt>
<dd>WWWを考案した人物</dd>
<dt>W3C</dt>
<dd>ティム・バーナーズ＝リーが設立</dd>
<dd>CSSやWAI-ARIAなどの規格を勧告</dd>
</dl>
```
暗黙のARIAロールは、listとなる。
### dialog
小さいウィンドウの形で表示するdialogを示す。
操作できる範囲をダイアログだけに制限するとモーダルダイアログと呼び、制御しないものはモードレスダイアログと呼ぶ。
開閉の設定にはdialogに用意されたメソッドやプロパティ、関数を利用する。
#### 動作イメージ
showModal()で開くとモーダルダイアログになり、トップレイヤーに追加され、他のコンテンツよりも上に表示される。
`::backdrop`も付加され、背後にあるすべての要素を多い隠す背景も利用できる。さらに、ダイアログ以外のコンテンツにはブラウザによってinertの不活性化の処理が適用され、操作できなくなる。
show()で開くとモードレスダイアログになり、ダイアログ以外の操作も可能になるなど様々な違いがある（p58のshowModal()とshow()の違いを参照）
ダイアログを閉じるためには、ダイアログ外をクリックするか、Escキーを押す。この動作はclodsedby属性で詳細に指定可能。
暗黙のARIAロールは、dialogとなる。
#### 動作サンプル
参考になりそうだから、実際に動かすと良さそう！🤔
showModal()
```html
<button id="open">開く</button>
<dialog id="dialog" aria-labelledby="message">
<h2 id="message">Get Started!</h2>
<button id="close" aria-label="閉じる">
<span aria-hidden="true">❌</span>
</button>
</dialog>
```
```js
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const dialog = document.getElementById("dialog");
openButton.addEventListener("click", function () {
dialog.showModal();
});
closeButton.addEventListener("click", function () {
dialog.close("closed");
});
dialog.addEventListener("close", function () {
console.log(dialog.returnValue);
});
```
```css
::backdrop {
background-color: rgb(0 0 0 / 0.6);
}
#close {
position: absolute;
top: 12px;
right: 12px;
filter: grayscale(1);
```
show()
```js
openButton.addEventListener("click", function () {
dialog.show();
});
```
ダイアログ内にフォームを置く
ダイアログを開くと、フォーカスがダイアログ内で最初にフォーカス可能な要素に移動する。この時フォーカスする要素はautofocus属性で指定できる。
formのmethodにdialogを指定すると、ボタンクリックでダイアログが閉じるようになる。このとき、ボタンのValue属性で指定した値がreturnValueに渡される。
```html
<dialog id="dialog" aria-labelledby="message">
<!-- ...略... -->
<form method="dialog">
<p>お知らせを受け取りますか？</p>
<button autofocus value="accept">受け取る</button>
<button value="cancel">あとで</button>
</form>
</dialog>
```
```css
dialog {
border-color: gray;
border
```
## p60 テキストレベルのセマンティクス
文章内の語句についてのマークアップを示す要素。
色々略しているが以下などが特徴的な要素
- code, em, strong, time, s, del, ins, span, b, i, u, data, small
- abbr, cite, car, ruby, wbr, map, datalist
HTMLでは「フローコンテンツ」と「フレージングコンテンツ」カテゴリーに分類され、ARIAロールは「文書構造」に分類される。
- code コンピュータ・コード
- em 強調 英語でいうとダブルクオーテーションみたいな意味合い
- strong 重要な語句を示す
- sub, sup 下付き、上付き文字を示す
- dfn 定義した語句を示す
- time datatime属性に時刻を指定する。ISO8601にマシンリーダブルな日時の記法が定義されている
- s 取り消し線が表示される
- del 削除したコンテンツ 取り消し線が表示される datetime属性で編集日時を明示できる
- ins 追加したコンテンツ 下線が表示される datetime属性で編集日時を明示できる
- span 特別なセマンティクスを持たない要素 divのテキスト版
- b, i, u spanでよくなった。 注目, 慣用句, 不明瞭な語句を示す
- q 引用した語句を示す
- bdi, bdo アラビア語に使う
- data value属性でマシンリーダブルな情報を付与していることを示す
- samp コンピュータからの出力内容を示す
- small 小さな文字で表示する但し書きを示す。コピーライト、ライセンス、注意など
- abbr 略語を示す。点線下線で示される
- cite 作品のタイトル、引用元のタイトルを示す
- kbd コンピュータへの入力内容
- mark ハイライトを示す
- var コンピュータや数学における変数を示す
- ruby, rp ベーステキストをrubyで書き、続けてrpでルビを書く
- br 改行を示す
- wbr 自動改行を許可する箇所を示す
- area 画像内のエリア情報を示し、リンクを設定する。
- map 複数のareaをまとめ、name属性でマップ名を示す リンクを画像内に配置する処理はイメージマップと呼ばれる
- datalist フォームコントロールの値の候補リストを示す 候補はoptionで指定する
## p70 エンベディッドコンテンツ
HTMLの「フローコンテンツ」と「フレージングコンテンツ」カテゴリー内には、さらに「エンベディッドコンテンツ」が存在する。
### img 画像要素
属性
- src 画像のURL
- alt 代替テキスト
- width height レイアウトシフトの防止
- decoding デコードの処理
- loading 遅延読み込み
- srcset sizes レスポンシブイメージ設定
- crossorigin クロスオリジン
- ismap サーバサイドイメージマップ
- usemap イメージマップ
- referrerpolicy リファラポリシー
- fetchpriority 先読みの優先順位
alt要素を空にするか、指定するか、alt要素自体を指定しないかでARIAロールが変わる。alt要素が空の場合、伝える情報がない画像（装飾）である、ということを明示することになる
decode属性
>※ デスクトップ環境のChromeでは、一度大きいサイズの画像を読 み込むとキャッシュされます。属性の設定や画面幅などを変更して も、キャッシュした大きいサイズの画像で表示されますので、動作 チェックなどの際には注意が必要です
### picture 複数の画像リソースを提供する要素
### audio video 音声、動画要素
- src
- poster
- preload
- controls
- autoplay
- loop
- muted
- playsinline
- width height
- crossorigin
### track 音声・動画のテキストトラック
### iframe インラインフレーム
- src
- srcdoc
- name
- sandbox
- allow
- allowfullscreen
- width height
- referrerpolicy
- loading
sandbox属性を指定することができるが、この時にsandbox=""とすると、全ての制限がかかる。また、制限は、allow-downloads, allow-forms, allow-popupなど、許容できる動作をallowしていく形で指定する
allow属性は、iframe内のコンテンツで使用できる機能を指定する。autoplayやcameraなど。詳細は[Permissions-Policy](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Permissions-Policy)というものに記載されている
### embed 外部リソースの埋め込み
プラグインを使用した外部リソースの表示に使う
### object 外部リソースの埋め込み
appication/typeでリソースの拡張子を指定する。PDFビューワなどの埋め込みとなる
### canvas ビットマップ形式の図形表示
MDNにcanvasで使用できる機能は規定されている
javascriptでcanvas内の描画の指示を行う
### svg ベクター形式の図形描画
MDNに規定されている
インラインSVGで書くか、aやbutton内にインラインSVGを使うかでARIAロールは別途指示する必要がある（1.1.1 非テキストコンテンツ）。フォーカス可能にするかであったり、そのsvgが何を示す要素なのかを明示してあげる
### MathML 数式を示す要素
## p86 インタラクティブ要素
HTMLではインタラクティブコンテンツに分類する要素
ブラウザによって、デフォルトでフォーカス可能な要素として扱われる。Tabキーでフォーカス状態になり操作もできる。
### details 開閉式ウィジェット
summary要素に概要となり、details要素の中身がコンテンツを示す。デフォルトだと閉じた状態でsummaryのみ表示されるが、クリックするとブラウザによってdetailsにopen属性が付加され、開いた状態になる
開閉のマーカーとなる▶は、`::details-content`で指定できる（p428）
detailsのグループにおいて、各detailsにname属性を付与することで、開けるdetailsは１つだけ、といった処理ができるようになる
### label フォームコーントロールのラベル
label要素内にフォームコントロールをまとめて記述するか、labelのfor属性でコントロールのID
を指定するかのどちらかで、フォームコントロールのラベルとみなされる
### a リンク
hrefのリンク形式
- ページ内リンク `#contact`だとid=contact, `#:~:text=Office`だと、ページ内テキストへのリンク
- メールアドレスリンク `mailto:
[email protected]`
- 電話番号へのリンク `tel-000-1234-5678`
a要素の属性
- href
- target
- download
- ping
- rel
- hreflang
- type
- referrerpolicy
## p90 フォームコントロール
### input 入力フィールド、ボタン
type属性の指定に応じてブラウザのバリデーションや入力構成が変わる。typeを省略した場合、textとして扱われる
- text テキスト
- search 検索
- url URL
- email メールアドレス
- tel 電話番号
- password パスワード
- date 年月日
- month 年月
- week 週
- time 時刻
- datetime-local 年月日と時刻
- number 数値
- range レンジ
- color 色
- checkbox
- radio
- file
- hidden
### button ボタン
type属性によって機能が変わる
- submit 送信
- reset リセット
- button 汎用ボタン
### select セレクトボックス
選択肢はoptionで指定し、標準で選択状態にするものはselectedを指定する。未指定の場合、最初のoptionが指定される
optgroup要素を使うことで、選択肢のグループを示すことが出来る
selectのsize,multiple属性を指定することで、複数選択が可能になる
### textarea テキストエリア
### progress プログレスバー
### output 処理結果の出路y句
form要素のoninputイベントハンドラの処理結果を示すなど
### meter 要素
low, high属性を指定することで、low, medium, highそれぞれ色分けしたメーター表示することが出来る
### fieldset フィールドセット
フォームコントロールのグループを示す。グループにはlegend要素でキャプション付与ができる。
## フォーム関連の要素で使用できる属性
- value属性 デフォルト値
- autocomplete属性 ブラウザに保存しているデータを呼び出すためのデータ種類の指定
- このデータ種類をtokenと呼ぶ。いっぱいある
- billing, name, username, current-password, one-time0code, organization, street-address, tel, email, cc-name, language, urlなど
- dirname 左書き、右書きの指定
- disabled 無効状態
- readlonly 読み取り専用
- form 処理対象となるform要素のidを示す。未指定の場合、祖先のformに属する
- formaction,method,target コントロールの処理に対して、formの属性で指定した設定を変更できる
- > form要素の属性としてフォームの種別を指定できる。actionで送信先URLを指定したり、method属性でHTTPのリクエストメソッドを指定したり、など。
- min, max, step 数値や日時の指定単位
- minlenth, maxlength, size 文字数の最小最大、横幅
- multiple 複数値選択の論理値
- pattern バリデーションの正規表現
- placeholder 入力に関するヒント クリックすると消える初期表示
- required 必須入力
## p103 スクリプト
- noscript
- script
- type属性の指定 type=text/javascript, module, importmap
- defer, async属性
- custom カスタム要素
- シャドウDOMをjsで定義することで、カプセル化された要素にできる
- slot要素 コンテンツを割り当てるプレースホルダを示す
- template要素
## p118 HTMLの基本構造とメタデータ
### メタデータ
- エンコードの種類、ビューポートの設定、タイトルが最低限有れば良い
- faviconの指定
- OGP（Open Graph プロトコル）
- X/twitter cardのメタ要素
### HTMLの基本構造
- DOCTYPE ブラウザを標準仕様に従って動作させるため、1行目に記述することが必須になっている
- 書いてないと、quirks modeなど異なるレンダリングモードになる場合がある
- html ルート要素 lang属性など言語の属性を指定できる
- head メタデータのコレクションを示す title要素は必須
- body Webページのコンテンツを示す
- title タイトルを示す
- style 内部スタイルシート（CSS）を指定する 複数記述することもできる
- base ベースURL
- link リソースへのリンク
- meta メタデータ
- charset, name, http-equiv属性など指定できる
- charsetはUTF-8のみが推奨
- name属性は様々なメタデータを指定できる description, refferer, robots, og:, twitter:など
- http-equiv HTTPヘッダーと同等の情報を示す HTTPヘッダーを変更できない場合に利用する
## p132 グローバル属性
- class
- id
- role
- aria-*
- accesskey
- autofocus
- contenteditable
- data-*
- dir
- draggable
- enterkeyhint
- hidden
- inert
- inputmode
- is
- item-*
- lang
- nonce
- popover
- slot
- spellcheck
- style
- tabbindex
- title
- translate
- on* イベントハンドラ（JSでも指定できるので、JSのaddEventListenerで管理したほうがよい）