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

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属性を付与した場合の効果はどれか。

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】