1: HTML

セマンティクス: 意味づけ
- ページの中身を意味づけして、人間以外にもわかるようにする
  - 検索エンジンもわかるようになる
    - 構造化データ
      - セマンティックWeb
- なぜ構造化データにするのか
  - リーダーモードに対応するため
    - セクションとドキュメント構造が利用される
  - データ利用時に便利
コンテンツモデル
- タグの相互関係のルール
  - 7つのカテゴリー
- フロー
  - <body>内で使えるタグ
- ヘディング
- セクショニング
- フレージング
  - 語句などのテキスト単位で意味づけする
- エンベディッド
  - 画像やビデオなどの外部リソースを表示する
- インタラクティブ
  - リンクやフォーム
- メタデータ
  - <head>内のみで使用する
- 特別なカテゴリー
  - パルパブル・コンテンツ(Palpable）
    - ユーザーが実際に感知可能な（見る、聞く、感じるなどすることができる）コンテンツ
      - アクセシビリティを向上させる目的で使用される
      - メタデータを含まない
  - トランスペアレント（Transparent）
    - aタグなど
  - スクリプト・サポーティング（Script-supporting）
    - script, template
- セクショニング・ルート（Sectioning Root）
  - body, figureなど
- フォーム
  - フォーム関連（Form-associated）
    - label
  - リスティッド（Listed）
    - fieldset
  - 再関連付け（Reassociateable）
  - 送信（Submittable）
  - リセット（Resettable）
  - オートキャピタライズ（autocapitalize-inheriting）
  - ラベル付け

2: Webページの作成とメタデータ

<!DOCTYPE html>
- DOCTYPE宣言がない場合
  - Quirks modeで表示される
    - スタイルシートが古い解釈で適用される
<svg>や<math>は別の名前空間として処理される
<meta name="viewport" content="width=device-width">
- デバイスの画面サイズに合わせてページを表示する
  - モバイルフレンドリー対応

3: コンテンツのマークアップ

セクション関連
グルーピング・コンテンツ
- 基本的な文書整形とセマンティックスの付加
- <p>, <figure>, <main>など
テキストレベル・セマンティックス
- 基本的な文書整形とセマンティックスの付加
- <a>, <span>など
- 改行を認める箇所を指示する: <wbr>
エディット（編集）
- 編集箇所のマークアップ
- <ins>, <del>など
インタラクティブ
- <details>, <dialog>など
スクリプト
グローバル属性
- accesskey, tabindex, class, contentEditableなど

4: CSSの適用

セレクタ
- 子孫セレクタ：半角スペース「A B」
  - Aの階層下のすべてのB
- 子セレクタ： > 「A > B」
  - Aの1階層下のB
- 兄弟セレクタ（隣接セレクタ）： + 「A + B」
  - Aの直後に記述した同階層のB
- 兄弟セレクタ（関節セレクタ）： ~ 「A ~ B」
  - Aの後に記述したすべての同階層のB
属性セレクタ
- リンク先のファイルの拡張子に応じてデザインを変える
  - pdfならcontentをPDFのイメージにする
  - [href$="pdf"]::beforeなど

5: ボックスのレイアウト

widthとheightで指定する横幅と高さにpaddingとborderのサイズを含めたい
- box-sizing: border-box
インラインボックス間のスペースを削除したい場合は、HTMLソースの改行を削除する
- <div class="boxA">A</div><div class="boxB">B</div>

6: フレキシブルボックスレイアウト

flex: 伸長比縮小比ベースサイズ
- 伸長比は余ったフリースペースがある場合に適用される
  - 余ったスペースが指定された伸長比で配分される
    - 300pxの余りで、flex: 1が3つなら100pxずつ配分される
- 縮小比はフレックスコンテナの方が小さい場合に適用される
  - ネガティブフリースペースをベースサイズに縮小率を掛け合わせた比率で分割する
    - 120pxはみ出ていて、100px, 200px, 300pxのベースサイズであれば、-20px, -40px, -60pxの配分となる
- flex: 0 0 autoでベースサイズをautoにするとアイテムの中身に合わせた横幅となる
- flex: 0 0 auto; width: 100px: ペースサイズをwidthで指定も可能
- flex: 1 1 0でContainerを均等割にすることもできる
  - フリースペースがコンテナの横幅となるから
  - flex: 1はこれの省略記法（伸長比のみ）
flex-wrap: wrapで折り返すと、ラインごとにフリースペースを算出して伸長比・縮小比の処理を実行する
フレックスアイテムを非表示にする方法
- display: none: アイテム自体がなくなる
- visibility: hidden: アイテムは構成されるが表示はされなくなる
- visibility: collapse: hiddenと同じ処理だが元の表示スペースは残らない

7: グリッドレイアウト

repeat()でレスポンシブなグリッドを作る
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))

9: テキスト

ベースラインからの距離で位置揃えを指定する
- img { vertical-align: -15px; }

10: エンベディッド・コンテンツ

object-fit
- object-fit: cover 表示エリア全体を覆うように画像を広げる
- object-fit: contain 画像が表示エリアに収まるようにする

11: フォーム

name: コントロール名
- コントロール名=入力データとして送信される

APPENDIX

width: min(100%, 650px)
- 画像の最低幅を指定して小さくなりすぎないようにする
width: max(70%, 320px)
- ボタンを基本320pxとして、最大幅を70%として大きくなりすぎないようにする

【技術書まとめ】HTML5&CSS3デザイン 現場の新標準ガイド [第2版]

1: HTML

2: Webページの作成とメタデータ

3: コンテンツのマークアップ

4: CSSの適用

5: ボックスのレイアウト

6: フレキシブルボックスレイアウト

7: グリッドレイアウト

9: テキスト

10: エンベディッド・コンテンツ

11: フォーム

APPENDIX

【技術書まとめ】HTML5&CSS3デザイン現場の新標準ガイド [第2版]