開催日：
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>
media
@media screen{
...
}
幅や解像度など、従来の属性にメディアの特性を指定できるのがメディアクエリ
HTML5
<link media="screen かつ幅が600px以上" ...>
<style media="screen かつ幅が1024px以下" ... >
</style>
メディアクエリの書式
- メディア and (メディア特性:値)
いくつでも連結できる。
メディア and (メディア特性:値) and (メディア特性:値) ....
not メディア and (メディア特性:値) and (メディア特性:値) ....
条件を逆にするonly メディア and (メディア特性:値) and (メディア特性:値) ....
古いブラウザ対策
メディア特性とその値（抜粋）
| メディア特性 | 説明 | 値 |
|---|---|---|
| width | 表示領域の幅（スクロールバーも含む） | 実数+単位 |
| min-width | 表示領域の最小の幅（スクロールバーも含む） | 実数+単位 |
| max-width | 表示領域の最大の幅（スクロールバーも含む） | 実数+単位 |
| height | 表示領域の高さ（スクロールバーも含む） | 実数+単位 |
| device-width | 出力メディアの画面の幅 | 実数+単位 |
| min-device-width | 出力メディアの画面の最小の幅 | 実数+単位 |
| max-device-width | 出力メディアの画面の最大の幅 | 実数+単位 |
| resolution | 出力メディアの解像度 | 実数+単位 |
| orientation | 縦長・縦横同じ(portrait)/横長(landscape) | portrait,lanscape |
メディアクエリの使用例
<link media="screen and (max-width: 1000px)" ... >
<link media="screen and (min-width: 1000px)" ... >
オフラインWebアプリケーション キャッシュマニフェスト
オフラインWebアプリケーションとは？
- Webアプリケーション（Webサイト）をオフラインでも動作させる仕組み。 ### キャッシュマニフェストとは？
- キャッシュするファイル、キャッシュしないファイル、その他の関連情報の指示ファイル（テキスト形式）
キャッシュマニフェストの使用例
CACHE MANIFEST #必ず１行目に記述
styles/default.css #省略すると「CACHE:」
CACHE: #キャッシュさせて使うファイルを指定
styles/default.css
NETWORK:
* #「CACHE:」で指定されていないファイルは全て
SERING: #キャッシュ(モード)の設定
prefer-online #可能ならばネットからファイルを取得。デフォルトはfast(キャッシュを使う)
FALLBACK： #取得失敗時の代替ファイルを指定
offline.html
キャッシュマニフェストの指定方法
manifest
<!DOCTYPE html>
<html lang="ja" manifest="***.appcache">
...
</html>
- 拡張子 → .appcache
- MIMEタイプ →text/cache-manifest
- エンコーディング → UTF-8