Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

かなりマニアックな資格だが、故あってウェブデサイン検定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で変更・廃止された要素

https://qiita.com/aikumi/items/a727413e912396368cc1

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away