• 検索結果がありません。

HTML5プロフェッショナル認定試験 Level.1 学習のポイント

N/A
N/A
Info
ダウンロード
Protected

Academic year: 2018

シェア "HTML5プロフェッショナル認定試験 Level.1 学習のポイント"

Copied!
51
0
0

読み込み中.... (全文を見る)

今ダウンロードする ( 51 ページ )

全文

(1)

プロフ ッショナル認定試験

evel.

学習 ポ ント

.

.

プロフ ッショナル認定試験ポ ント解説無料セミナーㄽ大阪

ソフト

株式会社

(2)

自己紹介

鈴⽊雅貴が

き

Nへへソ

株式会社

デ HへMばす

認定校

HへMばす推進室

主 でSS 開発環境 わ

HへMばす

認定試験

さ 教科書

を執筆

デ はi』よ」ら, はobo, はi』oァァオ 販売中

さ β試験

認定取得

個⼈ ⽇本語組版周 仕様 翻訳

れttァ:ここイウカウ「i『a.るitれウb.ioこょイイ-jaこ

どPべて

関連

い

(3)

本日 話す

試験

い

試験概要

試験範囲

試験範囲

ン 解説

Wらb 基礎知識

要素

でSSし

ン

Wらb

ン

(4)
(5)

試験概要

公式

情報 あ

れttァ:ここれt『」すらxa『.jァこoウt」i』らこ

のaェaSょィろァt 出

のaェaSょィiァt 何

や 使い⽅

範囲 含

知

い ⽅

(6)

試験範囲

公式

情報 あ

、 …

れttァ:ここれt『」すらxa『.jァこoウt」i』らこobjらょtiェらイ.れ

t『」#」ェさ

(7)

試験範囲 広い

時間も限

い

、本⽇ 広

い試験範囲 学習

上

情報 持

帰

も う

⽬的

がXきHへぱばじげごさこでSSざげさ

も試験範

(8)
(9)

Web 基礎知識

い

出題構成: しご%

れttァ:ここれt『」すらxa『.jァこoウt」i』らこobjらょtiェらイ.れ

t『」#」ェさ_ささ

⼀⾒Hへぱばす 関係 薄い う 思え

、Hへぱばす

、

こ

コー ・Wらゆ

・ ー こ

(10)

学習 ポ ント

⾃分

ー

⽴ 上 運⽤

際

必要

う知識、 いう観点

い

う

あ

Wらゆ

う 仕組

Wらゆ

表⽰

押

え

く

い

う

(11)

Webサ ト

(12)

登場人物

Pで: 略

Wらゆ

: Pでや

上 動作

、Wらゆ

⽤

が以降

き

ー

ン: ー

ー ョン 動作

コン ュー 機器

Wらゆ ー : ー

ン上 Wらゆ

提供

ー ソ

く 概要 説明

Pで

ー

ン

(13)

Webサーバへ

クセス

対象 Wらゆ ー

う⾒

っ

ネ

ワー 上

無数

ー

存在

IP

使う

さざしげじすずげせ89げさざし

う 数字 羅列

IP

を住所代わ

⽬的

ー

ー を送信

仕組 が機器同⼠ 通信きを規定

い

IPがIをtらィをらt Pィんtんょんlき

Pで

ー

ン

さ2し.じす6.、。9.さ2し

Wらb ー

(14)

君

P ドレス 覚え い

ㄼ

実際 IP

利⽤

機会 少 い

Yaれoo IP

？にooる」ら っ

とNSがとんmaろを Namら Sらィェろょらき 使う

数字 覚え

い

"らxa『ァ」ら.ょo『"

う

ン名

呼

名前を付け IP

紐 け 管理

ン名

対応

IP

を知 仕組

とNS

とNS ー

問い合わせ

教え

え

詳 く

のPNIで

ン名

く

れttァイ:ここエエエ.』iょ.aよ.jァこjaこよo『こイオイtら『.れt『」

Pで

ー

ン

らxa『ァ」ら.ょo『

さ2し.じす6.、。9.さ2し

Wらb ー

(15)

機器同士

た

…

ー

使え いい ？

機器上

Wらb ー 以外

なへPやSSH

ー

動作

い

Wらb ー を指定

う

？

へでP 使う

ー

ー 番号

を決

指定が

Wらb ー

。ご番き

あ

ー

ン間通信 仕組 を規定

い

へでPがへィaをイmろイイろんを でんをtィんl Pィんtんょんlき

へでP 通信路を確⽴

ン

他

ー

や再送

仕組

あ

Pで

ー

ン

らxa『ァ」ら.ょo『

さ2し.じす6.、。9.さ2し

Wらb ー が。ごき

123.456.789.123:80

へ

!

(16)

ポート番号

使 た

い

べRば 通信

コ

指定

い

"れttァ:ここらxa『ァ」ら.ょo『こ"

れttァ:ここ

HへへPがHオァらィへらォt へィaをイりらィ Pィんtんょんlき

を使

通信

を宣⾔

い

Wらb ー

通信

HへへPを使う

。ご番

ー を指定

Wらb ー

無事

Pで

ー

ン

らxa『ァ」ら.ょo『

さ2し.じす6.、。9.さ2し

Wらb ー が。ごき

http://example.com/

へ

!

(17)

た

コンテンツ 表示

先ほ

HへへP コン ン

取得

さ. 確⽴

通信路上

Wらb ー

x.れt『」をく

い いう

を送信

2. Wらb ー

ン

x.れt『」 中⾝

を返

し. へでP 確⽴

通信路を閉

じ.

x.れt『」を表⽰

Pで

ー

ン

らxa『ァ」ら.ょo『

さ2し.じす6.、。9.さ2し

Wらb ー が。ごき

http://example.com/x.html

x.れt『」く

い

x.れt『」

⾒え !

(18)

Web 基礎知識

あ

把握

く 、い い

情報

理解 や く

思い

あ

繰 返

、 ー

⽴ 上 運⽤

上 必要

(19)
(20)

要素

い

出題構成: しせ%

れttァ:ここれt『」すらxa『.jァこoウt」i』らこobjらょtiェらイ.れ

t『」#」ェさ_さし

Hへぱばす も

、

(21)

学習 ポ ント

Hへぱばじげごさ 押 え うえ 、す

変更点 学ぶ

何 変わ

？

定型句

ン

い

要素 意味を持 せ

う

い

的 機能 排除

い

(22)

定型句 シンプル

⽂書型宣⾔

⽂字 ンコー

ン

他 もあ

、楽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>

HTML4.01 Transitional

HTML5

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">

HTML4.01 Transitional

(23)

要素 意味 持たせ

う

セ

ョン

明⽰

要素

ン

意識

作成 可能

ン

HへMば⽂書

⽬次

う

ン

ー

セ

ョン

⽂書 ⼀区分

ン

⼀階層を形成

1. あああ

2. いいい

(24)

セクション 明示す 要素

以下 要素 セ

ョン 明⽰

セ

ョン明⽰

い 関連

要素

要素名

説明

イらょtio』

⼀般的

ンを表

⾒出

使⽤

aィtiょ」ら

単体 完結

ンがさ

ー

含

内容き

aイiよら

あ

ン ン

関係

い

切 離せ

ー 広告

』aェ

主要

ビ ー

ン

boよオ

boよオ

要素名

説明

れさ~れ6

ン ⾒出

れらaよらィ

ン

りootらィ

ン

(25)

トラ ン生成 例

以下 Hへぱば あ

ン 確認

う

ェa」iよatoィ.』ウ

れttァ:ここェa」iよatoィ.』ウこ

<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>

(26)

意味 持たせ

メリット

ン

、構造

ー

理解

助

う ⼈々 ⼤

利点 も

いわ

セ

向上

標準

⽤意

い

⼤

(27)

スタ ル的 機能 排除

Hへぱば５ 要素

、要素

び属性

指定機能 排除

い

指定 基本でSS や

廃⽌

要素例: biる, ょら』tらィ, りo』t, イtィi「ら, tt

排除

理由 以下

ビ

低下

ン

ン

増加

デ だりo』t ょo」oィ="">を各 ー 変更

でSS ⽅ 楽

⽂書

増⼤

残

イtオlら要素

び属性

的機能 要素 ⼀部 機能 変え 再定義

い

も

ン

(28)

新しい ンタフ ースや機能

ー

ろをァウt要素 使え tオァら属性

⼤幅 増加

Hへぱば

コン ン

再⽣

aウよろん要素こェろよらん要素

ン 使⽤

画像

描画

ょaをェaイ要素

(29)
(30)

C

い

出題構成: ざご%

れttァ:ここれt『」すらxa『.jァこoウt」i』らこobjらょtiェらイ.れ

t『」#」ェさ_さ2

でSSし も

、でSSざげさ以前

(31)

学習 ポ ント

でSSざげさ 押 え うえ 、し

変更

点 学ぶ

何 変わ

？

画像 必要

修飾 でSS 可能

便利

⼤幅追加

簡単

実現

(32)

C

可能

た修飾 例

⾓丸

boィよらィ-ィaよiウイ

ー ョン

」i』らaィ-るィaよiら』tがきこィaよia」-るィaよiら』tがき

影

box-イれaよoエ

キ

影

tらxt-イれaよoエ

でSS

瞬時 変更

便利

(33)

便利セレクタ 大幅追加 以下 一部

属性セ

前⽅こ後⽅こ部分⼀致 追加

みattィも="ェa」"め, みattィ$="ェa」"め, みattィ*="ェa」"め

結合⼦ 隣接セ

"+" 追加

構造 利⽤

疑似

⼤幅追加

:』tれ-ょれi」よがき, 』tれ-oり-tオァらがき, 」aイt-ょれi」よ

でSS

修飾

や く

い

(34)

簡単 マルチ ラムレ

ト

ぱウltろけょんlウmを ばaオんウt ぱんよウlら 、複数

段組

簡単 実現可能

ょo」ウ『』-ょoウ』t, ょo」oウ『-るaァ

なlらォろゆlら てんォ ばaオんウt ぱんよウlら 、りlんat

使わ

横並び

よiイァ」aオ: り」らx り」らx-よiィらょtio』

でSS

⾃由度 増

い

(35)

C

変形、 ニメーション

tィaをイりんィm

移動や

変形 可能

tィa』イ」atらがき, ィotatらがき, イょa」らがき, イ「らエがき

tィaをイろtろんを関連

、要素 変化

滑

可能

例え

:れoェらィ

変化を滑

aをろmatろんを関連

、要素 変化

連続

⾏う

可能

(36)
(37)

レスポンシブWebデザ ン

い

出題構成: さご%

れttァ:ここれt『」すらxa『.jァこoウt」i』らこobjらょtiェらイ.れ

t『」#」ェさ_さじ

ン

Wらゆ

ン

(38)

学習 ポ ント

ン

Wらゆ

ン

ういう

も

押 え

(39)

レスポンシブWebデザ ン

多種多様

登場 続

状況

中、

対応

開発

コ

、

将来登場

端

末

対応も不明

そ

、

ン

Wらゆ

ン 呼

Wらゆ

開発⼿法 登場

広い意味

利⽤中 あ

ー

状況や環境 合わせ

そ

ー

良い体験を提供

う いう考え⽅

⼿法を表 場合

さ

HへMば

特性が主

画⾯横幅き 応

や

ンを変更

⼿

(40)

レ

ト 切 替え 方法

特性 利⽤

でSS 切 替え ぱらよろa

Qウらィろらイ 利⽤ 、同 でSS

⾒

⽬ 切 替え

他 ものaェaSょィろァt ⽤い ⽅法

もあ

、

主流

ー

ン

Pで

Hへぱば

でSS

でSS

でSS

(41)

メリット デメリット

将来登場

⾒越

対応可能

べRば 同

SどO的 有利

発⽣

い

読 込 時間を短縮可能

HへMば １

済

を削減

が可能性き

設計・製造 難易度 ⾼い

•

さHへMばをでSS

使い わ

難 い

•

逆

⾼

向け

動画や画像 切 替え 必要

•

回線 細い

を⼩ く

い

画⾯

ー 変更

対応

い

HへMばこでSS

増加

下⼿を

ー 表⽰や

(42)

レスポンシブWebデザ ン 実現手法

ぱらよろa Qウらィろらイが前述き

なlウろよ にィろよ

画⾯

あわせ

幅や

を

変更

なlウろよ Imaるら

画⾯

合わせ 画像

を変更

以外 もあ

基本

し

実際

ー ワー

ー

作

も多い

(43)

フラ ン

(44)

フラ ンWeb プリケーション

い

出題構成: し%

れttァ:ここれt『」すらxa『.jァこoウt」i』らこobjらょtiェらイ.れ

(45)

学習 ポ ント

し%

概要

(46)

フラ ンWeb プリケーション

ン も静的コン ン

閲覧可

能 Wらゆ

ー ョン

、キャ

ュ

いう

読 取 、キャ

ュ

指定

コン ン

ー

保存

⇒

仕組

ン閲覧 可能

ー

ン

ン ー

⼀部コン ン

ー

保存

(47)

メリット デメリット

ン状態

Wらb

ー

ンを

閲覧 せ

可能

が2回⽬

以降き ー

ネ

ワー

経由

速く読 込

全

を ー

取得

い

ー 負荷

軽減 可能

ー 側

を更新

場合

ー

ー

キ

更新 必要

キ

記述を誤

場合 変更

(48)

キャッシュマニフ スト 記述方法

キャ

ュ

ン

CACHE

 

MANIFEST

#

 

先頭文字を# 始め こ

、コメントを記述可能

#

 

本例

パスをキャッシュマニフェストか

相対パス 記載

#

 

ここ

CACHE:

セクション

#

 

こ セクション

ローカルキャッシュす ファイルを記載

index.html

app.js

NETWORK:

#

 

こ セクション

キャッシュし いファイルを記載

submit.cgi

FALLBACK:

(49)
(50)

ベンダプレフ ックス

でSS 標準化 進 機能

先⾏実装

場合、

や値 先頭

ン

呼

特定 接頭語 付

必要 あ

例え 、なろィらりんォ

A 先⾏実装 ⾏

場合 、以下

う

う

ン

あ

ン 固有 話

試験

い 思わ

、現状 次

う

い

Moカi」」aやにooる」ら 今後 ン

を け い 表明

ン

標準化 あ 程度進

外

推奨

昔

を対象

あ

、現状

ン

あ こ

併

記

く

い

う

(51)

ブラ ザ

対応状況調査方法

各

要素やでSS機能 対応状況、

ン

有無

頻繁 変更

⾃分 調

い

い

ょaをろウイら 調査

い

れttァ:ここょa』iウイら.ょo『こ

使い⽅ 検索

ー

使い い機能 検索

、⼀覧

選ぶ

調

⾮常 便利

参照

今ダウンロードする ( PDF - 51 ページ - 544.46 KB )

関連したドキュメント

< F2D365F204F B8C B94C5816A >

(2)

PowerPoint プレゼンテーション

BIGIグループ 株式会社ビームス BEAMS 株式会社アダストリア 株式会社ユナイテッドアローズ JUNグループ 株式会社シップス

も っ と 多 く の 人 に 伝 え た い

三洋電機株式会社 住友電気工業株式会社 ソニー株式会社 株式会社東芝 日本電気株式会社 パナソニック株式会社 株式会社日立製作所

定期試験に代わるリポ

[r]

関西学院通信

春学期入学式 4月1日、2日 履修指導 4月3日、4日 春学期授業開始 4月6日 春学期定期試験・中間試験 7月17日～30日 春学期追試験 8月4日、5日

2022年度 大学院入学試験要項 社会学研究科

＜第２次＞ 2022年 2月 8 日（火）～ 2月 15日（火）

2021年度 大学院入学試験要項 社会学研究科

を体現する世界市民の育成」の下、国連・国際機関職員、外交官、国際 NGO 職員等、

入 学 試 験 日 程

⚙．大雪、地震、津波、台風、洪水等の自然災害、火災、停電、新型インフルエンザを含む感染症、その他