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

HTMLとCSSの基礎についてもう一度おさらいするために本書を手に取った。

各セクションにおいて気になった箇所をメモした。

# 1: HTML

- セマンティクス: 意味づけ
    - ページの中身を意味づけして、人間以外にもわかるようにする
        - 検索エンジンもわかるようになる
            - 構造化データ
                - セマンティックWeb
    - なぜ構造化データにするのか
        - リーダーモードに対応するため
            - セクションとドキュメント構造が利用される
        - データ利用時に便利
- コンテンツモデル
    - ![スクリーンショット 2023-05-18 9.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282504/855333a8-b95f-c4e3-601c-7113010acadc.png)
    - タグの相互関係のルール
        - 7つのカテゴリー
    - **フロー**
        - `<body>`内で使えるタグ
    - ヘディング
    - セクショニング
    - **フレージング**
        - 語句などのテキスト単位で意味づけする
    - エンベディッド
        - 画像やビデオなどの外部リソースを表示する
    - インタラクティブ
        - リンクやフォーム
    - メタデータ
        - `<head>`内のみで使用する
    - 特別なカテゴリー
        - パルパブル・コンテンツ(Palpable）
            - ユーザーが実際に感知可能な（見る、聞く、感じるなどすることができる）コンテンツ
                - アクセシビリティを向上させる目的で使用される
                - メタデータを含まない
        - トランスペアレント（Transparent）
            - aタグなど
        - スクリプト・サポーティング（Script-supporting）
            - script, template
    - セクショニング・ルート（Sectioning Root）
        - body, figureなど
    - フォーム
        - ![スクリーンショット 2023-05-18 9.34.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282504/f6cb4803-e8bc-6f09-a4a5-8cbc77715edd.png)
        - フォーム関連（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ずつ配分される
            - ![スクリーンショット 2023-06-06 9.00.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282504/ddfb9710-7a0b-3bab-610a-f70d4584ff48.png)
    - 縮小比はフレックスコンテナの方が小さい場合に適用される
        - ネガティブフリースペースをベースサイズに縮小率を掛け合わせた比率で分割する
            - 120pxはみ出ていて、100px, 200px, 300pxのベースサイズであれば、-20px, -40px, -60pxの配分となる
            - ![スクリーンショット 2023-06-06 9.12.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282504/44ec4d2e-a49b-651f-100a-c46b5a0fd122.png)
    - `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と同じ処理だが元の表示スペースは残らない
    - ![スクリーンショット 2023-06-06 10.31.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282504/c3d7cb3d-cad8-f555-8938-2f79ce21a320.png)



# 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%として大きくなりすぎないようにする