More than 5 years have passed since last update.

HTML5プロフェッショナル認定試験無料セミナー

Last updated at 2014-02-22Posted at 2014-02-22

開催日：
2014年2月22日（土）　13時30分～16時30分
主催：LPI-JAPAN

認定試験は２つのレベル

レベル1 マークアッププロフェッショナル（静的なコンテンツを作成できる）
レベル2 アプリケーションデベロップメントプロフェッショナル（動的Webコンテンツが作成できる）

対象範囲

レベル１はJavaScriptの知識が必要ない。マークアップ、CSS3、レスポンシブデザインが主な対象となる。

試験概要

所要時間:90分
問題数:60問
優位性の期限:5年間
受験料:15,000

出題構成

Webの基礎知識、要素で67%をしめる。その他はCSS3が20%、レスポンシブWebデザインが10%

2月4日付で追加された新要素

Template要素

内容をスクリプトで挿入する範囲。HTML5.1から移行。

rb要素

ルビ要素。

rtc要素

同じくルビ要素

これらが加わりHTML5の要素は現在111種類

HTML5文書の全体構造

HTML5の特徴としては<!DOCTYPE html>、<meta charset="UTF8">が特徴的

base

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF8">
<tytle></tytle>

スタイルシートとスクリプトのデフォルト値が設定された。
type=text/css、type=text/javascriptと記載する必要がなくなった。

HTML5で削除された要素。

合計13の要素が削除された。

acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
tt

HTML5で変更された要素

現在も仕様が変更されているので、今後変更される可能があるので注意

要素名	役割
b	以前は太字。現在は注目してほしいキーワードにつける。
cite	その部分が作品のタイトルであることを示す。人名には使用しない
dl	用語解説型リスト。HTML4ではdefinition Listの略だったが、HTML5ではdescription Listの略。定義の意味がなくなったので注意。
hr	段落単位での内容の区切りを示す。セクションの中で話題や場面が変わる部分などで使用することを想定。
i	イタリックで表記されるような部分。学名や船の名前、言語が異なっている部分などに使用する
s	その部分を取り消したことを示す。すでに正しくない情報となってしまった部分や、無関係となった部分などに使用。
small	メインコンテンツには含まれない部分において、一般に小さな文字で掲載される部分。ページ下のCopyright情報とか
strong	その部分が重要であることを示す。強調の意味合いはなくなった。入れ子にすることで重要性の度合いを高めることができる。
u	中国語の固有名詞とそうでない部分を区別したり、スペルが間違っている部分を示したい部分を示したい場合に使用。

HTML5で追加された要素

セクションを示す要素

要素名	役割
section	章や節のようなセクションを示す。（他のセクション要素が適当で無いセクションにはこれを使用する。
article	ニュース記事、ブログ記事のように内容がそれだけで完結しているセクションをしめす。ブログの各コメントも該当する
aside	メインコンテンツには含まれていない部分のセクションを示す。広告やリンクのリストなど。
nav	主要なナビであることを示す。主要でないナビゲーションには使用しない。音声ブラウザなどの利用者がすぐにナビゲーションに移動できるようにするため。

暗黙のセクション

セクションのタグがなくても、見出しのタグがあれば、セクションがあるものと認識する。

見出しの階層が前の見出しと同じか高ければ、前のセクションを終了して新しいセクションを開始する。
見出しの階層が前の見出しよりも低ければ、今のセクションの中でサブセクションを開始する。

ただし暗黙のセクションは@RiskList(削除されるかもしれない仕様)に入っているので注意。

ページの構造を示す要素

要素名	役割
header	Webページのいわゆるヘッダー部分を示す要素。一般に、ロゴ画像や検索フォーム、ナビゲーションなどを含む部分。
main	メインコンテンツを示す要素。各ページで共通している・重複している要素は含めない。
footer	そのfooter要素のあるセクションに関する情報を入れる要素。上にあってもOK。ブログの「次の記事へ」、「前の記事へ」とか

テキスト関連の要素

要素名	役割
bdi	双方向テキストの中の分離・独立(isoleate)された範囲。
mark	テキストの特定の部分を目立つようにして（ハイライト表示にして）注目してもらいたい場合に使用。
time	コンピュータが読み取り可能な形式の日付・時刻をdatetime属性の値または要素内容で示す。
data	要素内容をコンピュータが読み取り可能な形式にしたデータをvalue属性（必須）の値で示す。
wbr	英単語の途中など、通常は行の折り返しが行われない範囲において、改行可能な位置を示す。空要素。

ルビ関連の要素

要素名	役割
ruby	ルビを振る範囲全体
rb	ruby base text。ルビをふる漢字部分
rt	ruby text。ルビ・ふりがな
rtc	ruby text container。rt要素のグループ。
rp	ruby parentheses。ルビ未対応用の括弧。

ルビ要素の例

ruby

<ruby>
 <rb>女満別</rb>
 <rt>めまんべつ</rt>
</ruby>

ルビ要素の例２

ruby

<ruby>
 女<rb>満</rb><rb>別</rb>
 <rt>め</rt><rt>まん</rt><rt>べつ</rt>
 <rtc>
  <rt>me</rt><rt>man</rt><rt>betsu</rt>
 </rtc>
</ruby>

図表・図番を示す要素

要素名	役割
figure	メインコンテンツから参照される図表
figcaption	figure要素のキャプション

音声や動画などを組み込む要素

要素名	役割
audio	音声データを組み込む要素。音声データのurlをsource属性に指定
video	動画データを組み込む要素。動画データのurlをsource属性に指定
source	形式の異なる複数のデータを指定したい場合に使用
track	同期させるテキスト・トラック（字幕など）を指定する要素
embed	プラグインを使用するデータを組み込むための要素
canvas	ビットマップの動的グラフィックを表示。JavaScriptで制御

フォーム関連の要素

要素名	役割
meter	ある範囲のどの位置かを示すフォーム部品（メーター）
progress	タスクの進捗状況を示すフォーム部品（プログレスバー）
datalist	input要素の選択肢（サジェスト機能のように入力候補を表示）
output	他のフォーム部品からの計算結果を表示させるフォーム部品 at risk
keygen	公開鍵暗号における秘密鍵・公開鍵のペアを生成するフォーム部品

その他の要素

要素名	役割
details	特定の操作(▶をクリックなど)で表示される詳細情報。at risk
summary	details要素で最初から表示させる見出しや説明などの情報 at risk
dialog	インタラクティブな操作のためのダイアログボックスやウインドウ、インスペクタなど at risk
template	内容をスクリプトで挿入する範囲

属性関連の追加と変更

グローバル属性

属性名	値
id	固有の名前
class	種類の名前
title	補足情報
lang	言語コード
style	CSSの「プロパティ:値;」
accesskey	ショートカットキー
tabindex	タブキーによる移動の順序
dir	文字表記の標高(ltr/rtl/auto)
contenteditable	編集の可不可（true/false）
draggable	ドラッグの可不可（true/false）
dropzone	ドロップ時の挙動(copy/move/link)
spellcheck	スペルチェックの有無（true/false）
translate	ローカライズ時に翻訳するかどうか(yes/no)
hidden	非表示（指定するとtrue/指定しないとfalse）

これだけは覚えておくべきCSS3の仕様

セレクタとは？

スタイルの適用先を示す部分がセレクタ

Selector

div#wrapper {  //セレクタ
   width: 900px; //プロパティ: 値;
   padding: 1em; //プロパティ: 値;
   ...
}

属性セレクタ

CSS2.1	CSS3
[属性名]	[属性名^="開始文字列"]
[属性名="属性値全体"]	[属性名$="終了文字列"]
[属性名~="属性値の一つ"]	[属性名*="含まれる文字列"]
[属性名｜="属性値の-の前"]

CSS2.1とCSS3の擬似要素の書式の違い

CSS3からはコロンが２つになった。

CSS2.1	CSS3
:first-letter	::first-letter
:first-line	::first-line
:before	::before
:after	::after

セレクタの組み合わせ

セレクタA セレクタB Aの中に含まれるB
セレクタA セレクタB Aの子要素であるセレクタB
セレクタA セレクタB Aの直後にあるB
セレクタA セレクタB AよりもあとにあるB

CSS3の擬似クラス

擬似クラス名	意味
:first-child	最初の要素に適用
:first-of-type	最初の要素に適用（同一要素）
:last-child	最後の要素に適用
:last-of-type	最後の要素に適用（同一要素）
:nth-child(n)	前からn番目に適用
:nth-last-child(n)	後ろからn番目に適用
:nth-of-type(n)	前からn番目に適用（同一要素）
:last-of-type(n)	最後からn番目に適用（同一要素）
:only-child	一人っ子の要素に適用
:only-of-type	一人っ子の要素に適用(同一要素)
:disabled	disabled状態の要素に適用
:enabled	enabled状態の要素に適用
:checked	checked状態の要素に適用
:target	「#◯◯◯」リンクのジャンプ先に適用
:root	ルート要素（html要素）に適用
:empty	内容が空の要素に適用
not(セレクタ)	「セレクタ」に該当しない要素に適用

:not()自体は擬似クラスとしてはカウントされない。
()内のセレクタだけを普通のセレクタとしてカウント

セレクタによる優先順位

CSS競合時の優先順位について

CCの表示していが競合した場合の優先度はセレクタで決められる。
セレクタを使用しない「style属性」による指定は最優先される

セレクタによる優先順位の計算方法

セレクタに含まれる次のものをそれぞれカウントして3桁の数字を作成。
その3桁の数字が大きなモノほど優先順位が高くなる。

セレクタによる優先順位の計算例

セレクタ	計算結果
div	001
.inner	010
div.inner	011
#logo	100
div#logo	101
body div#logo	102

色と半透明の指定方法

RGBからRGBAに

rgb( Red, Green, Blue)からrgba( Red, Green, Blue, Alpha)

Alphaが不透明度。

HSLA

hsla(Hue, Saturation, Lightness, Alpha)

左の引数から順に、色相、彩度、明度、不透明度。

その他にもopacity値も存在する。

回転・移動・拡大縮小

transformプロパティ

関数形式で表現される。

transform: rotate(45deg)
transform: translate(50px)
transform: scale(1.5)

transform: translate(100px, 50px)はposition: relative; left: 100px; top: 50pxと同じ。

transform: translate(50px) scale(50)など一度に複数の命令を設定できるのが便利な点。

トランジション

プロパティの変化を滑らかにする。パディングの変更、背景色の変更や、transformで移動させるなど。
transform: rotate(36000deg)などと指定して、transition:を設定すれば、滑らかに回転する。

アニメーション

トランジションは２つの間の状態変化を滑らかにしていた。
アニメーションはkeyframeの名前に関連する複数の事象に変化を加える。

animetion

@keyframes test{
 0% { //アニメーションの所要時間の％で指定。
   background-color: red;
 }
 25% { 
   background-color: yellow;
 }
 100% { //0%と100%は必ず指定する必要がある。
   background-color: red;
 }
}

他にもプロパティがあるのでそれぞれ覚えておく。

これだけは覚えておくべきその他の基礎知識

メディアクエリ

レスポンシブデザインを作るために非常な重要な機能。
仕様も確定しているので、覚えておくこと。

従来のメディアの指定方法

media

<link media="screen" ...>
<style media="screen" ... >
</style>