2017年に受験した時の記録です。
HTML5の資格を取った時のメモ
1. HTML
2. CSS
3. その他範囲、試験対策
4. サンプルコード、問題 ←この記事
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>
<s>１本 500円</s>
<strong>なんと今だけ 400円！</strong>
del：訂正された情報（後から書き換える ins とセットで使う）
<del>１本 500円</del>
<ins>訂正：１本 650円になります</ins>
※del, ins はトランスペアレントだけど s はトランスペアレントじゃないよ！
練習問題
自分用に練習問題を作った。答えは反転。
問題１
fieldset要素に disabled属性を付与した場合の効果はどれか。
- form 属性で指定した form 要素が無効になる
- fieldset 要素内の入力フォームが無効になる
- submit ボタンを押してもデータが送信されない
- 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】