HTML5の資格を取った時のメモ ④サンプルコード、問題

2017年に受験した時の記録です。

HTML5の資格を取った時のメモ
1. [HTML](https://qiita.com/krsm/items/99dc39ae95412bc7b0b2)
2. [CSS](https://qiita.com/krsm/items/dad429f65b4a64c54195)
3. [その他範囲、試験対策](https://qiita.com/krsm/items/f98a791de22a0cbfce75)
4. [サンプルコード、問題](https://qiita.com/krsm/items/d997a994b3155c8da110) ←この記事

***

7hかけて優しい本のHTML/CSS練習問題と確認。
2回目の正答数は HTML 27/38、CSS 18/24。
CSSは基礎が全然ダメで問題を覚えてしまっている感じ。
以下は試験のためのサンプルコード 

## img, picture, source要素

### img に srcset属性を使う（サイズ変更のみの場合）

```
<img
    src="earth_m.jpg"
    srcset="earth_m.jpg, earth_l.jpg 2x"
    alt="">
```
※srcset例 ピクセル密度記述子：2x、幅記述子：400w
※ピクセル密度記述子は省略可能(1xになる)（カンマを含むURL注意）
※ピクセル密度記述子(2x)と幅記述子(400w)は混在不可
※幅記述子をつける場合は省略不可

### picture を使う（スクリーンサイズによって違う内容の画像を表示する場合のみ）

```
<picture>
    <source media="(min-width:768px)" srcset="earth.jpg, universe.jpg 2x">
    <source media="(min-width:320px)" srcset="city.jpg">
    <img src="ants.jpg" alt="">
</picture>
```

### 備忘

```
<!-- 30em以下：1カラム、50em：2カラム、それ以上：3カラムになる -->
<img
    sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 60px)"
    srcset="s.jpg 400w, m.jpg 800w, l.jpg 1600w"
    src="s.jpg" alt="">
```

※vw は view port に対する割合(％)
※**sizes を指定したら必ずsrcset＋幅記述子をつける**（sizesで指定した幅に合う画像を選択するため）
※sizes の最後の条件無し指定はdefault値

```
<img sizes="100vw" src="s.jpg" srcset="s.jpg 450w, m.jpg 900w" alt="">
```

## ネストさせる要素
- **figure, figcaption 要素**（※sectioning root）

```
<figure>
    <figcaption>キャプション</figcaption>
    <img src="fig01.jpg">
</figure>
```
※figcaption は figure の中ならどこでもOK

- details, summary 要素（※sectioning root）

```
<details open="open"><!-- 開いておく -->
    <summary><h1>ここをクリックすると開閉します</h1></summary>
    <p>詳細！詳細！詳細！</p>
</details>
```
※summary は details 内先頭に配置する

## id などで紐づける要素
form, fieldset, legend 要素、form 属性（※sectioning root）

```
<form id="main" action="animal.php" method="post"></form>

<!-- ここだけ fieldset の枠で囲まれる -->
<fieldset form="main">
    <legend>好きな動物</legend>
    <label><input type="radio" name="animal" value="dog">犬</label>
    <label><input type="radio" name="animal" value="cat">猫</label>
</fieldset>

<label>
    名前：<input type="text" form="main" name="name" size="40">
</label>
<input type="submit" value="送信" form="main">
```

## menu, menuitem 要素、contextmenu 属性

```
<img src="a.jpg" alt="" contextmenu="pictmenu">
<menu id="pictmenu">
    <menuitem label="コピー" type="command" onclick="***">
    <menu><!-- サブメニュー -->
        <menuitem label="チェック" type="checkbox" checked>
        <hr><!-- 区切り線 -->
        <menuitem label="名前を付けて保存" onclick="***">
    </menu>
</menu>

##  input, datalist 要素、list 属性

<form>
    <input type="search" name="area" list="arealist">
    <datalist id="arealist">
        <option value="とやま">
        <option value="いしかわ">
    </datalist>
</form>
```
※datalist は他のフォームの選択肢として表示されるため、datalist 要素自体は表示されないので注意。（select, option, optgroup との違いを確認）

## img, map, area 要素、usemap, name 属性

```
<img src="a.jpg" alt="ボタン" usemap="#imgbutton">
<map name="imgbutton">
    <area shape="rect" coords="0, 0, 100, 200" href="/next.html" alt="">
</map>
```

## ドキュメントの内容によって使い分ける要素
s, del

### s : 取り消し後も意味がある情報

```
<p>アイスティーとレモネード！</p>

１本 500円

<strong>なんと今だけ 400円！</strong>
```

### del：訂正された情報（後から書き換える ins とセットで使う）

```
<del>１本 500円</del>
<ins>訂正：１本 650円になります</ins>
```
※del, ins はトランスペアレントだけど s はトランスペアレントじゃないよ！

## 練習問題
自分用に練習問題を作った。答えは反転。

### 問題１
fieldset要素に disabled属性を付与した場合の効果はどれか。

1. form 属性で指定した form 要素が無効になる
2. fieldset 要素内の入力フォームが無効になる
3. submit ボタンを押してもデータが送信されない
4. fieldset 要素とその内容が非表示になる

### 問題2
次の{1}に入るのはどれか。
1. legend
2. caption
3. figcaption
4. summary

```
<figure>
    <table>
        <{1}>決算表</{1}>
        <tr><td></td></tr>
    </table>
</figure>
```

### 問題3
次の{1}{2}{3}に入る組み合わせはどれか。
1. span, rowgroup, row
2. colgroup, colspan, col
3. rowspan, rowgroup, row
4. rowgroup, rowspan, row
5. colspan, colgroup, col

```
<table>
    <caption>アンケート結果</caption>
    <tr>
        <th {1}="2" scope="{2}">どちらが好き？</th>
    </tr>
    <tr>
        <th scope="{3}">犬</th>
        <th scope="{3}">猫</th>
    </tr>
    <tr>
        <td>15人</td>
        <td>18人</td>
    </tr>
</table>
```

### 練習問題の解答
問題1：【2】
問題2：【3】
問題3：【5】