ウェブデザイン検定2級 対策


かなりマニアックな資格だが、故あってウェブデサイン検定2級を受けることになった。
筆記勉強時にまとめた情報を一覧にまとめたので共有。
特にHTMLまわり、規格まわり、JSまわりをまとめた。

勉強時使用サイト

https://kakomon.club/webdesign/
このサイトが良かった!過去問ひたすら解ける

HTMLタグについてまとめ

HTML5タグ一覧
https://www.tagindex.com/html5/elements/
http://www.htmq.com/html5/

HTML5コンテンツモデルガイド
https://webgoto.net/html5/

HTML5なにが入れ子にできるか
https://yoshikawaweb.com/element/

HTML4, HTML5のタグ一覧
http://blog.asterlist.com/2013/01/2301.html

HTML5で変更・廃止された要素

2016年HTML5.1勧告時の仕様変更 (引用: http://roka404.main.jp/blog/archives/300)

HTML5.1勧告時の注意すべき仕様変更点は以下の通り。

【追加】
・picture要素とsrcset属性の追加
・details要素とsummary要素の追加
【削除】
・ネストされたセクション要素の見出しに全てh1を置くこと
・tfoot要素をtbody要素の前に置くこと
【変更】
・セクション要素の中のheader/footer要素は入れ子にできる
・figcaption要素はfigure要素のどこに書いても良い
・img要素のalt属性は削除してはいけない(たとえtitle属性がついていたり、友達にe-mailを書くような場合であっても)
など…

[参考:HTML5からHTML5.1への変更点(W3C・英語)]

2017年HTML5.2勧告時の仕様変更 (引用: http://roka404.main.jp/blog/archives/300)

HTML5.2勧告時の注意すべき仕様変更点は以下の通り。

【追加】
・dialog要素の追加
・link要素のrel属性値に“canonical”、“noreferrer”、“apple-touch-icon” の値が追加
・WAI-ARIA1.1に準拠
【削除】
・keygen、menu、menuitem要素が廃止
【変更】
・dl要素の直下にdiv要素を記述できる
・body要素内にstyle要素を記述できる(ただしパフォーマンス面の問題から従来どおりhead要素内に記述することを推奨)
・複数のmain要素を記述できる(ただし最初にユーザに見せるのは1つだけで、他はhidden属性で隠す)
・fieldset要素内のlegend要素の中に見出し要素を記述できる
など…

iframe

HTML4.01 Strict, XHTML1.0 Strict, XHTML1.1では認められていません。

規格系まとめ

WAI-ARIA = Web Accessibility Initiative が定めた Accessible Rich Internet Applications の使用
各要素の「Roles (役割)」「States (状態)」「Properties (特性)」の記述を仕様に合わせて記述することにより
、支援技術に伝達することができます。
参考: https://website-usability.info/2014/04/entry_140415.html

JavaScriptについてまとめ

querySelectorAll()で取得できるのは、配列でなくNodeList

addEventListener

JSのイベント登録関数
対象要素.addEventListener(イベント種類, トリガー関数, false)

<おまけ>
※ 第3引数は、イベント伝搬の方式を「true / false」で指定するのですが通常はfalseを指定しておきましょう。
trueを指定すると通常の伝搬より先にイベントをcatchできます。(参: http://d.hatena.ne.jp/teramako/20070126/about_useCapture_of_addEventListener)

<代表的なイベント一覧>
イベント種類 内容
load Webページの読み込みが完了した時に発動(画像などのリソースすべて含む)
DOMContentLoaded Webページが読み込みが完了した時に発動(画像などのリソースは含まない)
click マウスボタンをクリックした時に発動
mousedown マウスボタンを押している時に発動
mouseup マウスボタンを離したときに発動
mousemove マウスカーソルが移動した時に発動
keydown キーボードのキーを押したときに発動
keyup キーボードのキーを離したときに発動
keypress キーボードのキーを押している時に発動
change フォーム部品の状態が変更された時に発動
submmit フォームのsubmitボタンを押したときに発動
scroll 画面がスクロールした時に発動
引用: https://www.sejuku.net/blog/57625