IT()で飯を喰う!

見習いSEが、気になるニュースや小ネタを書いていくブログ/はてなブログの方は相互RSS大歓迎でございます!

HTML5プロフェッショナル認定試験 レベル1の学習に使えそうなサイト6つ

こんにちは。またまた久しぶりの更新です。

先日、LPI-Japanが主催するHTML5プロフェッショナル認定試験 
レベル1ポイント解説無料セミナー」
に参加してきました。

下記リンクの講義資料にも紹介されていますが、
実際に使ってみてとても便利だなあと感じたので、
自身の備忘録の兼ねてご紹介。

html5exam.jp

HTML5プロフェッショナル認定試験レベル1とは

公式ページが分かりやすく説明していますが、HTML5の知識を問う試験です。
試験範囲を見る限り、HTML5といいつつCSSとか周辺知識とかを
知らないと到底受かりそうにありません(´;ω;`)ブワッ

html5exam.jp

validator.nu

記述したhtmlのアウトラインを表示してくれるサイト
htmlにエラーがあるとうまく動きません。
正しく入力すると、一番下の方にアウトラインが表示されます。
Validator.nu

HTML5 Sectioning Element Flowchart

ページの構造を考える時に、ページが持つ意味や役割によってタグを
使い分けるためのフローチャート
もちろんこれに必ず従わなければならないわけではありませんが、
各要素が持つ意味を理解するという観点で参考になるかと思います。

HTML5 Doctor Resources | HTML5 Doctor
※ページ内「HTML5 Sectioning Element Flowchart」の下に
 日本語フローチャートがあります。

Specify Calculator

CSSを貼り付けると、詳細度を教えてくれるサイトです。
詳細度はCSSの優先順位にも影響するので、
こうやって自動判定してくれるサイトは非常にありがたい。
Specificity Calculator

JS Bin

サイト上で、HTMLやCSS、JSを記述すると
自動的に結果を表示してくれる。
要素タグやCSSを実際に書いて試して見ると良さそう。
JS Bin - Collaborative JavaScript Debugging

JSFiddle

JS Binと同じく、サイト上でHTMLやCSS、JSを
記述して自動的に表示してくれる。
jsfiddle.net

Mozilla Developers Network

FirefoxThunderbird などで有名なMozillaさんがHTML、CSS
様々なWebに関する技術情報をまとめてくれています。
developer.mozilla.org

おまけ:W3Cのチェックも忘れずに

htmlに関する技術的な使用はW3Cによってまとめられています。
原文サイト(英語)を見るのが多分いいんでしょうが、
一応日本語サイトもあります。
www.w3.org