HTML5プロフェッショナル認定試験
Level.1
学習のポイント
2014.03.15
HTML5プロフェッショナル認定試験ポイント解説無料セミナー＠大阪
NTTソフトウェア株式会社
鈴木雅貴
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

自己紹介 鈴⽊雅貴(すずきまさたか) NTTソフトウェア株式会社• HTML5アカデミック認定校になりました HTML5推進室
 主にCSSと開発環境まわり
 『HTML5プロフェッショナル認定試験 レベル1 教科書』を執筆しました• Kindle, Kobo, Kinoppyで販売中

 レベル1はβ試験にて認定取得

 個⼈で⽇本語組版周り仕様の翻訳
 http://suzukima.github.io/css-ja/
 EPUBなどに関連しています アヒル好き

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

2本日お話すること

 試験について
 試験概要 試験範囲 試験範囲のポイント解説

 Webの基礎知識
 要素
 CSS3
 レスポンシブWebデザイン
 オフラインWebアプリケーション

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/3試験についてCopyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

試験概要

公式サイトに情報がありますhttp://html5exam.jp/outline/JavaScriptは出ませんただ、JavaScriptが何なのかや、使い⽅などは範囲に含まれるので、知っておいた⽅がよ
いでしょう

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

5

試験範囲

公式サイトに情報があります、が…
http://html5exam.jp/outline/objectives.h
tml#lv1

え。

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/6試験範囲は広い時間も限られていますので、本⽇は広い試験範囲を学習する上でのとっかかりとなる情報を持って帰ってもらうことを⽬的とします(X)HTML4.01/CSS2.1までも試験範囲には含まれますが、ここでの解説は省略させていただきます

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

7

Webの基礎知識

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Webの基礎知識について

出題構成: 30%
http://html5exam.jp/outline/objectives.html#lv1_11

⼀⾒HTML5と関係が薄いように思えますが、HTML5によって、デザイナ/コーダ・Webプログラマ・サーバ/ネットワークエンジニアは、⾃分の担当部分だけでなく⾃らの領域を越えた知識やスキルが必要とされています
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

9学習のポイント⾃分でサービスを⽴ち上げ運⽤する際に必要となるだろう知識、という観点でみるとよいでしょうあとはWebサイトがどのような仕組みでWebブラウザに表⽰されるのかを押さえておくとよいでしょう本⽇はここを解説します

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

10

Webサイト
表示の仕組みCopyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

登場人物など
 PC: 略 Webブラウザ: PCやスマホ上で動作する、Webサイト⽤ブラウザ(以降ブラウザ)
 サーバマシン: サーバアプリケーションが動作するコンピュータ機器
 Webサーバ: サーバマシン上でWebサイトを提供するサーバソフトウェア
 ざっくり概要で説明します
ブラウザ

WebサーバPC

サーバマシン

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

12

Webサーバへのアクセス 対象のWebサーバをどう⾒つける?

 ネットワーク上には無数のサーバが存在 IPアドレスを使う

 123.456.789.123のような数字の羅列
 IPアドレスを住所代わりにして⽬的のサーバにアクセスしてデータを送信する
 この仕組み(機器同⼠の通信)を規定しているのがIP(Internet Protocol)
123.456.789.123へ!

ブラウザ

PC

Webサーバ

サーバマシン
123.456.789.123

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

13

君はIPアドレスを覚えているのか？
 実際にIPアドレスを利⽤する機会は少ない
 YahooのIPアドレスは？Googleは?

 DNS(Domain Name Service)を使う

 数字は覚えづらいので、"example.com"のようなドメイン名と呼ばれる名前を付け、IPアドレスと紐づけて管理 ドメイン名から対応するIPアドレスを知る仕組みがDNS
 DNSサーバに問い合わせると教えてもらえる
 詳しくは「JPNICのドメイン名のしくみ」
https://www.nic.ad.jp/ja/dom/system.html
example.comは?

DNSサーバ

ブラウザ

Webサーバ123.456.789.123PC

123.456.789.123へ!

サーバマシン
example.com
123.456.789.123

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

14

機器同士はつなげたけど…
 どのサーバを使えばいいの？

 機器上にはWebサーバ以外にもFTPやSSHなどのサーバが動作している
 Webサーバを指定するにはどうする？

 TCPを使う

 サーバごとにポート番号を決め、指定(Webサーバは80番)
 このあたりのアプリケーション間通信の仕組みを規定しているのがTCP(Transmission Control Protocol)
 TCPは通信路を確⽴するのがポイント 他にもエラーチェックや再送などの仕組みがある
ブラウザ

Webサーバ(80)

80

通信路確立
PC

123.456.789.123:80へ!

サーバマシン
example.com
123.456.789.123

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

15

ポート番号なんて使ったことがない
 URLで通信プロトコルを指定している "http://example.com/"のhttp://で、HTTP(HyperText Transfer Protocol)を使っての通信を宣⾔している
 Webサーバとの通信にはHTTPを使うので、これで80番ポートを指定したことになる
 これでブラウザとWebサーバが無事つながった

http://example.com/へ!
ブラウザ

Webサーバ(80)

80

通信路確立
PC

サーバマシン
example.com
123.456.789.123

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

16つながったのでコンテンツを表示 先ほどのHTTPでコンテンツを取得する

1. 確⽴された通信路上で、ブラウザからWebサーバへ、x.htmlをくださいというリクエストを送信する
2. Webサーバはブラウザへレスポンスとしてx.htmlの中⾝を返す
3. TCPで確⽴した通信路を閉じる
4. ブラウザはx.htmlを表⽰する

http://example.com/x.html

x.htmlください

ブラウザ

⾒えた!

Webサーバ(80)x.htmlですPCx.htmlサーバマシン
example.com
123.456.789.123

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

17

Webの基礎知識

このあたりを把握しておくと、いろいろな情報がつながって理解しやすくなると思いますあとは繰り返しになりますが、サービスを⽴ち上げ運⽤する上で必要になる知識を⾝につける、という観点で学習していくとよいでしょう

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

18

要素

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

要素について出題構成: 37%
http://html5exam.jp/outline/objectives.h
tml#lv1_13

HTML5はもちろんのこと、HTML4.01以前も対象となっています

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

20

学習のポイントHTML4.01を押さえたうえで、5への変更点を学ぶ
何が変わったの？
 定型句がシンプルになっている
 要素に意味を持たせられるようになっている
 スタイル的な機能は排除されている
 新しいインタフェースや機能が使えるようになっている

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

21

定型句がシンプルに
 ⽂書型宣⾔HTML4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

HTML5<!DOCTYPE html>

 ⽂字エンコーディング
HTML4.01 Transitional<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5(一例)<meta charset="UTF-8">

 他にもありますが、楽になりました
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/22

要素に意味を持たせられるように
 セクションを明⽰する要素によりアウトラインを意識した作成が可能に
 アウトラインとは

 HTML⽂書では⽬次のようなもの
 アウトラインのイメージ

1. あああ2. いいい1. いいいのあああ
2. いいいのいいい セクションとは ⽂書の⼀区分
 アウトラインでは⼀階層を形成
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

23

セクションを明示する要素
 以下の要素でセクションが明⽰される
要素名

説明

section

⼀般的なセクションを表し、⾒出しとセットで使⽤

article単体で完結できるセクション(1フィードに含める内容)

aside

あるコンテンツに関係しているが、切り離せるもの
サイドバー、広告など

nav

主要なナビゲーション

bodybody セクション明⽰はないが関連する要素
要素名

説明

h1~h6

セクションの⾒出しheaderセクションのヘッダ

footerセクションのフッタ

address

直近祖先のセクションに関する連絡先

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/24

アウトライン生成の例
 以下のHTMLがあったとする<body><h1>Apples</h1><p>Apples are fruit.</p><section><h2>Taste</h2><p>They taste lovely.</p><section><h3>Sweet</h3><p>Red apples are sweeter than green ones.</p></section></section><section><h2>Color</h2><p>Apples come in various colors.</p></section></body> アウトラインを確認してみよう

demo validator.nu http://validator.nu/Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/25

意味を持たせられるメリット
 アウトラインにより、構造がページの理解を助けとなるような⼈々に⼤きな利点をもたらす
 いわゆるアクセシビリティの向上
 これが標準として⽤意されているのが⼤きなポイント

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

26

スタイル的な機能の排除
 HTML５の要素からは、要素および属性によるスタイル指定機能は排除されている
 スタイル指定は基本CSSでやることに 廃⽌された要素例: big, center, font, strike, tt 排除された理由は以下

 アクセシビリティの低下
 メンテナンスコストの増加• <font color="">を各ページ変更よりCSSの⽅が楽 ⽂書サイズの増⼤ 残ったのはstyle要素および属性
 スタイル的機能の要素の⼀部は機能を変えて再定義されているのもポイント b, i, hr, s, small, uCopyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/27

新しいインタフェースや機能 フォームのinput要素で使えるtype属性が⼤幅に増加
 HTMLだけでマルチメディアコンテンツを再⽣できるaudio要素/video要素
 プラグインを使⽤せずビットマップ画像を描画できるcanvas要素
demoCopyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

28

CSS3

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

CSS3について

出題構成: 20%
http://html5exam.jp/outline/objectives.h
tml#lv1_12

CSS3はもちろんのこと、CSS2.1以前も対象となっています

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/30

学習のポイントCSS2.1を押さえたうえで、3への変更
点を学ぶ
何が変わったの？
 画像が必要だった修飾がCSSで可能に 便利セレクタの⼤幅追加 簡単にマルチカラムレイアウト実現
 CSSのみで変形、アニメーション実現

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/31

CSS3で可能になった修飾の例
 ボックスの⾓丸

 border-radiusプロパティ

 グラデーション

 linear-gradient()/radial-gradient()

 ボックスに影 box-shadowプロパティ

 テキストに影 text-shadowプロパティ

 CSSだと瞬時に変更できて便利Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

demo

32

便利セレクタの大幅追加(以下は一部)
 属性セレクタに前⽅/後⽅/部分⼀致が追加
 [attr^="val"], [attr$="val"], [attr*="val"] 結合⼦に隣接セレクタ"+"が追加
 構造を利⽤した疑似クラスが⼤幅追加 :nth-child(), nth-of-type(), last-childなど

 CSSによる修飾がしやすくなっています
demo

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/33

簡単にマルチカラムレイアウト
 Multi-column Layout Moduleで、複数段組みレイアウトを簡単に実現可能 column-count, coloum-gapプロパティなど

 Flexible Box Layout Moduleで、floatを使わずにボックスを横並びにできる display: flexとflex-directionプロパティなど

 CSSによるレイアウトの⾃由度が増しています
demoCopyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

34

CSSで変形、アニメーション transformプロパティでボックスの移動や変形が可能
 translate(), rotate(), scale(), skew()など

 transition関連プロパティで、要素の変化を滑らかにすることが可能
 例えば、:hoverでの変化を滑らかにするなど animation関連プロパティで、要素の変化を連続して⾏うことが可能 @keyframesを指定するのが特徴

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

demo35

レスポンシブ
WebデザインCopyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レスポンシブWebデザインについて出題構成: 10%http://html5exam.jp/outline/objectives.h
tml#lv1_14

タイトルはレスポンシブWebデザイン
ですが、スマートデバイスに特化した内容も盛り込まれているので要注意

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/37

学習のポイントレスポンシブWebデザインがどういうものかを押さえる
実現⽅法を押さえる

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/38

レスポンシブWebデザインとは
 多種多様なデバイスが登場し続ける状況の中、デバイスごとに対応サイトを開発するのはコストがかかり、また将来登場する端末への対応も不明
 そこで、レスポンシブWebデザインと呼ばれるWebサイト開発⼿法が登場 広い意味では利⽤中であるユーザの状況や環境に合わせ、そのユーザにより良い体験を提供しようという考え⽅
 ⼿法を表す場合には、1つのHTMLで、デバイスの特性(主に画⾯横幅)に応じてレイアウトやデザインを変更する⼿法を指す

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

39

レイアウトを切り替える方法
 デバイス特性を利⽤してCSSを切り替えるMedia
Queriesを利⽤し、同じCSSでデバイスごとに⾒た⽬を切り替えるCSS

HTMLCSSCSS

スマートフォン

demo

タブレットPC 他にもJavaScriptを⽤いる⽅法などもあるが、これが主流
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/40

メリットとデメリット
 メリット 将来登場するデバイスも⾒越して対応可能
 URLが同じとなるため、SEO的に有利
 リダイレクトが発⽣しないため読み込み時間を短縮可能
 HTMLが１つで済むのでコストを削減できる(可能性) デメリット 設計・製造の難易度が⾼い• 1HTMLをCSSのみで使いまわすのは難しい• 逆にコスト⾼になることも モバイル向けには動画や画像も切り替える必要• 回線が細いモバイルにはファイルサイズを⼩さくしたい 画⾯フローの変更には対応できない
 HTML/CSSのサイズが増加し、下⼿をするとページ表⽰や動作が重くなる
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

41

レスポンシブWebデザインの実現手法
 Media Queries(前述) Fluid Grid

 画⾯サイズにあわせてグリッドの幅やレイアウトを変更する

 Fluid Image 画⾯サイズに合わせて画像サイズを変更する

 これ以外にもあるが基本はこの3つ
 実際はフレームワークをベースに作ることも多い

demo

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

42

オフラインWebアプリケーション(概要とマニフェスト)
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

オフラインWebアプリケーションについて出題構成: 3%http://html5exam.jp/outline/objectives.html#lv1_15

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/44

学習のポイント3%で
概要とマニフェストCopyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

45

オフラインWebアプリケーションとは ブラウザがオフラインでも静的コンテンツを閲覧可
能なWebアプリケーション
 ブラウザは、キャッシュマニフェストというファイルを読み取り、キャッシュマニフェストに指定されたコンテンツをローカルに保存⇒この仕組みによりオフライン閲覧が可能
クライアント（Webブラウザ）

サーバ
クライアントからのリクエスト

ファイルダウンロード
⼀部コンテンツはローカルに保存

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

46

メリットとデメリット
 メリット ブラウザがオフライン状態でも、Webアプリケーションを閲覧させることが可能 (2回⽬のアクセス以降)ローカルファイルはネットワーク経由のファイルより速く読み込まれる 全てのファイルをサーバから取得しないため、サーバ負荷の軽減が可能

 デメリット サーバ側のファイルを更新した場合、ユーザのローカルキャッシュファイルも更新が必要 キャッシュマニフェストの記述を誤った場合、変更ファイルが更新されないことがある

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

47

キャッシュマニフェストの記述方法
 キャッシュマニフェストのサンプル
CACHE MANIFEST# 先頭文字を#で始めることにより、コメントを記述可能# 本例ではパスをキャッシュマニフェストからの相対パスで記載# ここはCACHE:セクション# このセクションにはローカルキャッシュするファイルを記載
index.html
app.jsNETWORK:# このセクションにはキャッシュしないファイルを記載
submit.cgi
FALLBACK:# このセクションには代替ファイルを記載/ offline.html

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

48

付録Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ベンダプレフィックス
 CSSで標準化の進む機能がブラウザで先⾏実装された場合、プロパティや値の先頭にベンダプレフィックスと呼ばれる特定の接頭語を付ける必要がある
 例えば、FirefoxがプロパティAの先⾏実装を⾏った場合は、以下のようになる-moz-プロパティA: 値; どのようなベンダプレフィックスがあるかはベンダ固有の話なので、試験にはでないと思われます しかし、現状は次のようになっている MozillaやGoogleは今後ベンダプレフィックスをつけないと表明
 ベンダプレフィックスは標準化がある程度進むと外すことが推奨 ただ昔のブラウザを対象にすることはある ので、現状はベンダプレフィックスあり/なしを併記しておくのがよいでしょう
Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/50

ブラウザでの対応状況調査方法
 各ブラウザにおける要素やCSS機能の対応状況、ベンダプレフィックスの有無などは頻繁に変更される
 ⾃分で調べているとつらい caniuseで調査するとよい
 http://caniuse.com/

 使い⽅は検索フォームで使いたい機能を検索するか、⼀覧から選ぶだけ ぱっと調べるには⾮常に便利です 試験には出ません

Copyright© 2014 NTT Software Corporation. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/51