本日のサンプルファイル
https://hackwork.jp/html5̲20161120/

HTML5プロフェッショナル認定試験
レベル1ポイント解説無料セミナー
株式会社クリーク・アンド・リバー社 認定講師
高井 歩

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

本日の概要• HTML5 レベル1試験について• レスポンシブWebデザイン• マルチデバイス対応ページの作成• メディアクエリ• スマートフォンサイト最適化
2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTML5プロフェッショナル認定資格とは• 次世代のWebプロフェッショナルのスキルの向上に貢献するために、
HTML5を活用したWebページやWebアプリケーションなどのデザイン、設計、構築に関する体系だった知識とスキルを備えたHTML5のプロフェッ
ショナルを中立的な立場で公平かつ厳正に認定する資格制度です。
• Webデザイナー、Webプログラマー、スマートフォンアプリ開発者、
サーバーサイドエンジニアなどの、Web開発プロジェクトやWebサービスに関わるあらゆるプロフェッショナルが対象です。
• 多くの企業が推進する次世代Web言語の認定資格として、
HTML5のプロフェッショナルのスキルの向上に役立ちます。
また、企業内や研修機関での『技術力を担保する客観的基準』としても活用できます。

3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

二つのレベル
対象
Webデザイナー/

マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデザイン・作成できる。

HTMLコーダー

Webシステム
開発者

Webディレクター/グ
ラフィック
デザイナー

フロントエンドプロ
グラマー

スマートフォンアプ
リ開発者

サーバーサイドエンジニア

スマートフォンアプ
リ開発者

フロントエンドプロ
グラマー

サーバーサイド
エンジニア

Webデザイナー/

対象

システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

Webシステム
開発者
Webディレクター

HTMLコーダー© LPI-Japan 2014. All rights reserved.

4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レベル1とレベル2の資格体系
HTML/HTML5マークアップ
HTML5に関するタグの用途、構造の組み立て方に関する技術
ビジビリティ
JavascriptやCSS3などを用いて、デザイン仕様に沿った見やすい表示を行うための技術
レスポンシブWebデザイン
一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術
オフラインWebアプリケーション
通信が常時接続状態ではない環境でも、効率的にWebコンテンツを動作させるための技術
Javascriptプログラミング
Javascriptを使って、動的なWebコンテンツを作成する技術
マルチメディア
３D・動画・音声ファイルなどのマルチメディアコンテンツの表
示・再生に関する技術
ユーザビリティ
ナビゲーション、地図表示など操作しやすいコンテンツを作成する
ための技術
パフォーマンス
データベースや、並列処理を使ってコンテンツを効率良く高速に動作させるための技術© LPI-Japan 2014. All rights reserved.

5

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レベル1とレベル2の資格体系
ベーシックレベル認定名： HTML5 Level1 (Markup Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level1 Exam

所要時間：90分
試験問題数：約60問

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明できます。

受験料：\15,000 （税抜）"HTML5を使って静的なWebコンテンツを作成することができる。

認定条件： HTML5 レベル1試験に合格する"ユーザビリティ・ビジビリティの高いWEBコンテンツを設計・作成することができる。

こと"スマートフォンや車載システムなど、様々なデバイスに対応したコンテンツ作成ができる。

認定の有意性の期限：5年間

アドバンストレベル

認定名： HTML5 Level2 (Application Development Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level2 Exam

所要時間：90分

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明できます。
"動的に動作させて高いユーザビリティを実現するリッチユーザインターフェイス
アプリケーションを作成することができる。
"マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成することができる。
"システム間連携を行いリアルタイムな情報を提供するアプリケーションを作成することができる。

試験問題数：40〜45問
受験料：15,000
認定条件：HTML5 レベル2試験に合格し、かつ有意なHTML5レベル1認定を保有していること。
認定の有意性の期限：5年間© LPI-Japan 2014. All rights reserved.

6

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

出題範囲
主題

項目

Webの基礎知識

・HTTP,HTTPSプロトコル(☆7)
・HTMLの書式(☆8)
・ネットワーク・サーバ関連技術の概要(☆6)
・Web関連技術の概要(☆6)

CSS3

・スタイルシートの基本(☆6)
・CSSデザイン(☆9)
・カスケード（優先順位）(☆2)

要素

・HTML4.01以前の要素および属性(☆7)
・HTML5で新しく加わった要素および属性(☆10)
・HTML5で廃止されたタグ(☆5)

レスポンシブWebデザイン

・マルチデバイス対応ページの作成(☆4)
・メディアクエリ(☆4)
・スマートフォンサイト最適化(☆3)

オフラインWebアプリケーション

7

・オフラインWebアプリケーション(☆2)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レスポンシブWebデザイン

8

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レスポンシブWebデザイン
スクリーンサイズに応じてレイアウト、デザインが変更されるWebページのデザイン

max-width:1080px

max-width:768px

岩波ホール : https://www.iwanami-hall.com
9

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

マルチデバイス対応ページの作成

知識問題 コードリーティング問題 記述問題

10

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

マルチデバイス対応ページの作成
リセットCSS•
レイアウト• 固定レイアウト• 可変レイアウト• Fluid Grid•
Fluid Image•(出題範囲外)HTML5.1•

11

viewportは「スマートフォンサイト最適化」
で解説

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

リセットCSS•

各Webブラウザが持つデフォルトのCSSをリセットするためのCSS•

marginやpadding、list-styleなどのスタイルを除去するものが多い(残しつつ共通化するものはノーマライズCSSと呼ばれる)•

様々なリセットCSSが公開されている。
•

Eric Meyerʼs “Reset CSS” 2.0•

HTML5 Doctor CSS Reset•

Yahoo! (YUI 3) Reset CSSなど(上記3つはhttp://cssreset.comの集計による2016年DL数top3)

12

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

リセットCSSの例
Firefox13

Chrome

IE11

Safari

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題1
リセットCSSの説明として正しくないものを選択しなさい。
A. Webブラウザ間の差異を吸収する
B. ユーザエージェントスタイルシートをリセットする
C. 既存のスタイルをできるだけ残す
D. リセットCSSの後で独自のスタイルをセットする

14

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レイアウトマルチデバイス対応時のページレイアウトの課題•

物理的な画面サイズの違い•

15

モバイル端末の縦(portrait)横(landscape)•

画面解像度の違い•

マウス、タッチなど操作方法の違い

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

固定レイアウト•

レイアウトが固定で、画面サイズが小さくなるとス
クロールバーが表示される。

•

サイズ指定、位置指定はpx単位で行なう。

スクロールバーが表示される

財務省:http://www.mof.go.jp/index.htm
16

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

可変レイアウト

17•

固定レイアウトに対して、表示領域のサイズに応じてコンテンツやレイアウトが変化するWebサイトの
作りかた。

•

レスポンシブWebデザインやFluidGridなど様々な手法、概念がある。

•

サイズ指定、位置指定は%やem単位のような相対値で行なうことが多い。

•

メディアクエリを使用してCSSを切り替えることもある。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Fluid Grid•

表示領域を格子状に区切り、その格子に合せてコンテンツなどを配置していく手法をグリッドシステムと呼ぶ。(グリッドシステムは固定/可変どちらも可能)•

グリッドシステムをウィンドウサイズなどからの相対値にすることで、デバイスに応じたレイアウトにする手法がFluid Grid。

Grid System

18

Fluid Grid System

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Fluid Image

19•

通常、画像のサイズは表示領域の大きさにかかわらず一定。

•

画像のサイズも表示領域の大きさの相対値にすることで、画像だけ(相対的に)大きく表示されたりする問
題を防ぐ手法がFluid Image。

•

以下のようにmax-widthを指定することで親要素のサイズを越えないようにできる。
img {max-width: 100%;}
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Fluid Imageの例
HTML

CSS

<div class="nonﬂuid"><img src="images/img.png" width="300"></div><div class="ﬂuid"><img src="images/img.png"></div>
30%
30%
固定
サイズ

Fluid
Image
20

div {
border:solid 3px black;width:30%;}.ﬂuid img {max-width: 100%;}
サイズが変わらないため
親要素からはみ出る

親要素に合せて小さくなる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTML5.1の画像の取り扱い 試験範囲外•

HTML5.1 は 2016.11.1に勧告された。

•

picture要素<picture><source srcset="largeLogo.png" media="(min-width: 600px)"><img src="smallLogo.png" alt="Logo"></picture>•

img要素のsrcset属性•

使い分けの指針
サイズ(解像度)変更なら srcset属性• 内容やレイアウトの変更なら picture要素•

21

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題2
Fluid Gridの特徴として正しくないものを2つ選択しなさい。
A. Gridの幅を相対値で指定する。
B. 同サイズのタイル状のパネルで配置する。
C. Gridの幅をpxで指定する。
D. 表示領域を格子状に区切る。

22

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

メディアクエリ
知識問題 コードリーティング問題 記述問題

23

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

メディアクエリ• メディアクエリ• メディアタイプ• メディア特性• 単位(ピクセル,dpi,dpcm)

24

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

メディアクエリ•

デバイスの特性(スクリーンの大きさや種類)に応じて
CSSを切り替える技術。

•

CSSを読み込むlink要素のmedia属性または、CSS
内で@media規則で指定。

•

メディアタイプとメディア特性を組み合わせて適用
条件を指定する。

media属性での指定例<link href="(URL)" rel="stylesheet" media="(メディアクエリ)">@media規則での指定例@media (メディアクエリ) { body { font-size: 10pt } }25

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

メディアタイプ•

出力デバイスの種類を条件にする
Media Queries Level 4(ドラフト)で非推奨

メディア
タイプ
all

すべてのデバイスに適合

print

印刷、印刷プレビュー

screenspeech26

概要

カラーのコンピュータ画面
スピーチシンセサイザ(読み上げソフト)

tty

固定幅の表示端末

tv

低解像度なテレビ

projection

プロジェクタhandheld

携帯デバイスbraille

点字ディスプレイ

embossed

点字印刷

aural

音声出力

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

メディア特性•

幅や高さなどの量や値を条件にすることができる。
特性

概要

特性

概要

width

表示領域の幅device-aspect-ratio

出力領域の縦横比

height表示領域の高さ

color

色要素毎のビット数

device-width

出力領域の幅color-index

使用可能パレット数

device-height

出力領域の高さ

monochrome

モノクロのビット数

orientation

縦/横表示

resolution

デバイスの解像度

aspect-ratio

表示領域の縦横比

scan

テレビの操作方式

grid

文字表示/画像表示はmin/max接頭辞を付けることができる(min-widthなど)
27

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

メディアクエリで使える演算子•

複数のメディアタイプやメディア特性の条件を結合してより複雑な条件を表現する
演算子
and
not
only
,

28

概要
二つのクエリが共にtrueの時true
クエリの結果を否定
メディアクエリ非対応ブラウザから
スタイルシートを隠す
or に相当二つのクエリの少なくとも片方がtrueならtrue

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/単位(ピクセル,dpi,dpcm)•

px … 表示画面の点ひとつ、画素、ドット•

dpi … Dots Per Inch 1インチあたりの画素数•

dpcm … Dots Per CentiMeter 1cmあたりの画素数

1inch

1cm
1cm

1inch
矩形内のピクセル総数では無く、1辺あたりのピクセル数

29

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

メディアクエリの例
幅800px以下(max-width: 800px)

max-,min-はどちらもその値を含む。
max-width:800pxは800px以下、
min-width:800pxは800px以上。

幅700px以上かつ横画面(min-width: 700px) and (orientation: landscape)
幅700px以上もしくは横画面(min-width: 700px) , (orientation: landscape)
全てのモノクロデバイス(全てのデバイスかつカラーでは無い)
all and (not color)30

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題3
メディアタイプとして正しく無いものを選択しなさい。

A. screen
B. smartphone
C. print
D. speech

31

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

スマートフォンサイト最適化
知識問題 コードリーティング問題 記述問題

32

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

スマートフォンサイト最適化• CSSスプライト• 高解像度画面向け対応• viewport,density,initial-scale• ファビコン、アイコン設定• スタンドアローンモード• 電話番号へのリンク• script要素のasync属性、defer属性
33

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

CSSスプライト

34•

複数の小さなアイコンなどをひとつの画像にまとめることで、ファイルサイズを小さく、ファイルの転送回数を減らす技法。

•

一般にbackground-imageとして表示させる。

•

それぞれの画像はbackground-positionとwidth,heightを指定して表示させる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

CSSスプライトの例
6回Webサーバへのリクエストが必要

1回Webサーバへのリクエストが必要

約4Kb 6=>24Kb

9Kb

http://spritegen.website-performance.org
でCSSスプライト化
35

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

CSSスプライトのCSS
HTML<span class="sprite sprite-dice-4"></span>
CSS.sprite {background-image: url(csssprite.png);
background-repeat: no-repeat;
display: block;}-143px.sprite-dice-4 {width: 128px;-143pxheight: 128px;
background-position: -143px -143px;}
36

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題4
CSSスプライトのメリットでは無いものを選択しな
さい。
A. ファイルサイズの総計を減らす。
B. ダウンロード回数を減らす。
C. CSSを単純化する。
D. キャッシュを有効活用する。

37

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

高解像度画面向け対応

38•

iOSデバイスや、android端末などのモバイルデバ
イスでは、一般的なPCにくらべて高解像度の画面を備えている(iOSのRetinaディスプレイなど)。

•

実際のピクセル数と論理的なCSSピクセル数が異なることがある。(縦横2画素で1ピクセルを表現することで文字の表示を滑らかにするなど)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

density•

CSSピクセルと物理ピクセルの比率(密度)•@media (-webkit-min-device-pixel-ratio: 2){...
}-webkitとついているがiOSの場合、値が2ならRetinaディスプレイ。
今ではApple以外
Androidの場合、値は様々。
のブラウザでも対応している。

•

39

resolutionというメディア特性も用意されている。
(単位はdpi/dpcm)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

viewport•

モバイル機器などで、表示領域のサイズを表わす。

•

デフォルト値は980px。

•

Webブラウザは要素をレイアウトする際にviewportを基準にする。
(PCのWebブラウザのウィンドウ内の表示領域のように)
デバイスの
表示領域

40

viewport

PC用のWebサイトを
スマホの表示幅に合わせると見辛いかレイアウトが崩れるため、PCに近い表示
領域を用意した

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

initial-scale•<meta name="viewport">で使用するプロパティ。

•

content属性に記述する。
例) content="initial-scale=1.0"•

表示初期状態でのズーム倍率。

•

通常は1.0にすることが多い。

•

関連するプロパティ

41

Webブラウザにより対応に差があるため注意•

minimum-scaleは最小倍率•

maximum-scaleは最大倍率•

user-scalable=yesならユーザによるズーム可、noならズーム不可
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

viewportの例<meta name="viewport"
content="width=device-width,initial-scale=1">•

モバイルデバイスでは、画面の幅とviewportを一致させることが多い。(width=device-width)•

初期の表示倍率は1倍•

Webブラウザの種類、バージョンによって動作が異なるので検証が必要。

42

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題5viewportの正しい指定を選択しなさい。
A. <viewport initial-scale="1.0">
B. <meta name="viewport" initial-scale="1.0">
C. <meta name="viewport" content="initial-scale=1.0">
D. <viewport content="initial-scale=1.0">

43

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ファビコン•

Webブラウザのタブに表示されるアイコン•<link rel="icon" href="images/favicon.ico"
type="image/vnd.microsoft.icon">•

大きな画像を用意しておいて、ファビコン生成をしてくれるWebサイトを利用すると簡単に作成できる。

faviconhttps://ao-system.net/favicongenerator/ など
44

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

アイコン設定(iOS)
iOSデバイスで、Webページを"ホーム画面に追加"した際にホームに表示するアイ
コンを指定することができる。
「apple-touch-icon.png」をサイトのルートディレクトリに設置

デバイスに
合わせる

もしくは、
<link rel="apple-touch-icon" href="アイコンファイル名" sizes="120x120">をHTMLファイルのヘッド要素内に記述する(サイズ別に複数記述可)。
画像ファイル名に"-precomposed"を付けると加工されずにそのままアイコンに使用される(iOS6までは光沢処理が行なわれていたがiOS7からなし)。

元画像
45

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

アイコン設定(Android)
Androidの場合、iOSと同様の指定も可能だが、存在しなけ
ればファビコンがホーム画面のアイコンに使用される。

元画像

46

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

スタンドアローンモード•

iOSのMobile Safariに実装されている機能•

フルスクリーンモードでネイティブアプリのように見せる•<meta name="apple-mobile-web-app-capable" content="yes">

ホーム画面に追加

47

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

電話番号へのリンク

48•

電話番号指定したリンクをタップするとその電話番号に発信する•<a href="tel:117">時報(有料)</a>

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題6
電話の発信ができるHTMLの記述を選択しなさい。
※(電話番号)は有効な電話番号とする

A. <a href="tel:(電話番号)">電話を掛ける</a>B. <input type="tel" value="(電話番号)">
C. <a href="phone:(電話番号)">電話を掛ける</a>D. <input type="phone" value="(電話番号)">49

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

script要素のasync属性、defer属性
JavaScriptの実行によるブロック問題•

scriptタグが読み込まれると、HTML要素のレンダリン
グやDOM構築がブロックされるため、読み込みや処理に時間が掛ると表示が遅く見える•

body終了タグの直前にscriptを記述することで、ブロックの影響を低減する手法が一般化•

body.onloadイベントやjQueryのreadyメソッドなど、DOM構築完了後にまとめて実行するニーズ→async,defer属性で解決できる。
50

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

javascriptによるブロック実例<h1>async属性なし</h1><script src="js/large.js"></script><script src="js/small.js"></script><img src="images/img.png">
h1は表示されている"large script"とアラート(OK待ち)
imgは表示されていない(ブロック)51

ファイルサイズ(大)"large script"とアラート
ファイルサイズ(小)"small script"とアラート

h1は表示されている"small script"とアラート(OK待ち)
imgは表示されていない(ブロック)

img表示

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

async属性

52•

script要素にasync属性を付けることで、他の処理をブロックせずにスクリプトを実行できる。

•

インラインスクリプトは実行できない。

•

document.writeは実行できない。

•

スクリプトファイルを読み込み終った順に実行される。

•

スクリプトの実行順序は維持されない。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

async属性 実例
ファイルサイズ(大)"large script"とアラート<h1>async属性あり</h1><script src="js/large.js" async></script><script src="js/small.js" async></script> ファイルサイズ(小)"small script"とアラート<img src="images/img.png">
h1は表示されているimgは表示されている(ブロックなし)"small script"とアラート(OK待ち)

h1は表示されているimgは表示されている(ブロックなし)"large script"とアラート(OK待ち)

先に読み込まれたsmall.jsが先に実行された
53

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

defer属性•

async属性同様、スクリプト読み込みを非同期に行ない、onloadイベント発生直前にスクリプトを実行する。

→bodyの終了タグ直前にスクリプトファイルを読み込む必要がない。

54•

スクリプトの実行順序は維持される。

•

インラインスクリプトには適用されない。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

defer属性 実例
ファイルサイズ(大)"large script"とアラート<h1>defer属性あり</h1><script src="js/large.js" defer></script><script src="js/small.js" defer></script> ファイルサイズ(小)"small script"とアラート<img src="images/img.png">
h1は表示されているimgは表示されている(ブロックなし)"large script"とアラート(OK待ち)

55

h1は表示されているimgは表示されている(ブロックなし)"small script"とアラート(OK待ち)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題7
script要素のasync属性について間違っている説明を選択しなさい。
A. スクリプトの実行順序は不定である。
B. body.onloadの直前に実行される。
C. 非同期に実行される。
D. インラインスクリプトには適用されない。

56

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

本日の概要• HTML5 レベル1試験について• レスポンシブWebデザイン• マルチデバイス対応ページの作成• メディアクエリ• スマートフォンサイト最適化
57

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

練習問題正解58•

問題1: C ノーマライズCSSの説明です。

•

問題2: B,C タイルレイアウト及び固定レイアウト。

•

問題3: B smartphoneはありません。

•

問題4: C 一般にCSSは複雑化します。

•

問題5: C name属性とcontent属性で指定します。

•

問題6: A href属性にtel:電話番号で指定します。

•

問題7: B defer属性の説明です。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/