講師プロフィール会社概要株式会社ケイシーシー講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ

Size: px

Start display at page:

Download "講師プロフィール会社概要株式会社ケイシーシー講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ"

しょうじかりこめ
9 years ago
Views:

1 HTML5 プロフェッショナル認定試験レベル 1 ポイント解説無料料セミナー 2015 年年 8 月株式会社ケイシーシー福田浩之

2 講師プロフィール会社概要株式会社ケイシーシー講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コースなど幅広い分野のセミナーを担当 2

3 アウトライン 1. HTML5 プロフェッショナル認定資格レベル 1 試験概要 2. 技術解説項目 3

4 HTML5 プロフェッショナル認定資格レベル 1 試験概要

5 HTML5 プロフェッショナル認定資格の種類マルチデバイスに対応した静的な Web コンテンツを HTML5 を使ってデザイン作成できるシステム間連携や最新のマルチメディア術に対応した Web アプリケーションや動的 Web コンテンツの開発設計ができる 5

6 レベル 1 とレベル 2 の資格体系 HTML5 プロフェッショナル認定試験レベル 1 所要時間 :90 分 ( アンケート等の時間を含む ) 出題数 : 約 60 問受験料料 :\15,000 ( 税別 ) 認定条件 : HTML5 レベル 1 試験の合格認定の有意性の期限 :5 年年間 HTML5 プロフェッショナル認定試験レベル 2 6 試験実施形式コンピュータベーストテスト (CBT) で実施しますマウスによる選択方式がほとんどですがキーボード入力力問題も多少出題されます試験はピアソン VUE より配信されています所要時間 :90 分 ( アンケート等の時間を含む ) 試験問題数 :40 ~ 45 問受験料料 :\15,000 ( 税別 ) 認定条件 :HTML5 レベル 2 試験に合格しかつ有意な HTML5 レベル 1 認定を保有していること認定の有意性の期限 :5 年年間

7 認定の証明認定証認定カード認定者ロゴ ( 名刺用 ) 7 認定証認定カードは認定されてから 2 週間程度度でご登録されたご住所にお届けしています認定者ロゴは認定後すぐに名刺刺等でご利利用していただけます

8 HTML5 レベル 1 の出題範囲重要度 1.W ebの基礎知識 H T T P, H T T P S プロトコル 7 HTM Lの書式 8 ネットワークサーバ関連技術の概要 6 W eb 関連技術の概要 6 2.C SS3 スタイルシートの基本 6 C SSデザイン 9 カスケード ( 優先順位 ) 2 8

9 HTML5 レベル 1 の出題範囲重要度 3. 要素 HTM L4.01 以前の要素および属性 7 HTM L5で新しく加わった要素および属性 10 HTM L5で廃止されたタグおよび属性 5 4. レスポンシブ W ebデザインマルチデバイス対応ページの作成 4 メディアクエリ 4 スマートフォンサイト最適化 3 5. オフライン W ebアプリケーション ( 概要とマニフェスト ) オフライン W e b アプリケーション 2 9

10 HTML5 レベル 1 傾向と対策幅広い出題範囲 ᵒ 出題範囲詳細をもとにしてすべて網羅羅する ᵒ 得意分野をつくる実務に則した問題 ᵒ 参考書だけの勉強ではなく実機で確認する ᵒ CSS などはサンプルを作成し実際に確認することで理理解が深まる HTML5 レベル 1 対応認定教材 10

11 HTML5 レベル 1 傾向と対策 CBT(Computer Based Testing) 試験 ᵒ コンピュータを操作して問題に解答 ᵒ 試験中問題は何度度も繰り返し参照可能 ᵒ 試験終了了と同時に結果が判明試験時間の有効活用 ᵒ 90 分で約 60 問の問題 ᵒ 四者択一または五者択一複数選択記入式の 3 パターン問題はしっかり読むあやふやな問題はチェックをつけて後から解答する全体的に見見直す時間を確保する 11

12 技術解説項目 1.CSSデザイン 2.HTML5で新しく加わった要素および属性 3. メディアクエリ

13 1.CSS デザイン重要度度重要度度 9 望まれるスキル HTML5 で新しく加わった要素や属性に関して仕様に沿った HTML コードを正しく記述する事ができ要件を受けてどのようなコードを記述するのが適切切か判断する事ができるポイント解説 CSS セレクタ 13

14 例例題 14 以下の sample.html ファイルをブラウザーで表示した場合テーブル内背景色の組み合わせとして正しいものを選択せよ sample.html <!doctype html> <html> <head> <meta http- equiv="content- Type" content="text/html; charset=utf- 8" /> <style> tr:nth- child(2n) td{ background- color : #0000ff} tr:nth- of- type(3) td{ background- color : #ff0000} tr:first- child td{ background- color : #00ff00} tr[id^="test"] td { background- color : #00ffff} </style> </head> 次のページに続く

15 例例題 15 <body> <table border="1" id="t1"> <caption align="top">*** 製品一覧表 ***</caption> <tbody id="tbody"> <tr><td>a100</td><td name="name"> デスクトップ PC</td></tr> <tr id="css_ test"><td>b200</td><td name="name"> ノート PC</td></tr> <tr><td>c300</td><td name="name"> プリンタ </td></tr> <tr id="test_ css"><td>d400</td><td name="name"> マウス </td></tr> </tbody> </table> <P id="kekka"> 商品を選択してください </P> </body> </html>

16 例例題 A. 緑青赤水色 B. 緑赤水色青 C. 青緑赤水色 D. 青赤水色青 16

17 CSS セレクタ #idvalue 値 id 属性の値が idvalue の要素用途 E F E > F [attribute=value] [attribute^=value] [attribute$=value] E:nth-child(n) E:nth-of-type(n) E:first-child E 要素を先祖にもつすべてのF 要素 E 要素を親にもつF 要素属性名 attributeの値がvalueをもつ要素属性名 attributeの値がvalueから始まる要素属性名 attributeの値がvalueで終わる要素 n 番目の子であるE 要素 n 番目のE 要素と同じ型の要素最初の子要素であるE 要素 17

18 色指定値用途 #f00 # で始まる 3 桁のカラーコードで指定 rgb(255,0,0) rgba(255,0,0,0.2) hsl(0,100%,50%) rgb( ) による指定 (0 ~ 255) または (0% ~ 100%) rgb( ) に透明度度 a (1 ~ 0) を加えた指定色相彩度度輝度度による指定 hsla(0,100%,50%,0.2) hsl( ) に透明度度 a (1 ~ 0) を加えた指定 18

19 2.HTML5 で新しく加わった要素および属性重要度度重要度度 10 望まれるスキル HTML5 で新しく加わった要素や属性に関して仕様に沿った HTML コードを正しく記述する事ができ要件を受けてどのようなコードを記述するのが適切切か判断する事ができるポイント解説フォーム :input 要素の属性 19

20 例例題以下の要素の説明として正しいものをすべて選択せよ <form method="post" action="sample.php"> <label for="sid"> 商品名 </label> <input id= sid name= sname class= scls required pattern="^[0-9a- Za- z]+$" > </form> A. input 要素に値が未入力力の場合プレースホルダとして商品名が表示される B. idが "sid" の要素に対してラベルとして商品名が関連付けられる C. input 要素には半角英数字を入力力しなければならない D. input 要素のtype 属性が省省略略されているためエラーとなる E. input 要素の入力力は必須である 20

21 input 要素の属性属性 autofocus placeholder required pattern max/min 役割自動的にフォーカスを合わせる入力力欄に初期値として表示される入力力必須入力力値のパターンを正規表現で指定する最大値 / 最小値 21

22 input 要素の type 属性に追加された値値用途値用途 tel 電話番号入力力フィールド number 数値入力力フィールド url url 入力力フィールド range 範囲入力力フィールド入力力フィールド color 色入力力フィールド date 日付入力力フィールド search 検索索フィールド time 時刻入力力フィールド 22

23 3. メディアクエリ重要度度重要度度 4 望まれるスキルメディアクエリを利利用して画面サイズなどの様々な環境に合わせて表示を変えるページを作成する事ができるポイント解説メディアクエリメディア特性 23

24 例例題デバイスを横置き ( 高さより幅が広い表示 ) の場合に CSSを適用させるメディアクエリの指定として正しいものを選択せよ screen and (orientation: landscape) screen and (device- aspect- ratio: portrait) screen and (scan: landscape) screen and (width: portrait) 24

25 メディアクエリデバイスの種類幅高さ向き解像度度などコンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易易に変更更できるメディアタイプとメディア特性を利利用してスタイルシートの適用条件を決定する横幅 410 以上横幅 410 未満 25

26 メディアタイプ / メディアタイプ { メディア特性 : 値 } メディアタイプメディア特性値用途値用途 all すべてのデバイス width 横幅 print プリンタ height 高さ screen projection tv 画面プロジェクタテレビ orientation deviceaspect-ratio 横置き :landscape 縦置き :portrait アスペクト比水平ピクセル数 / 垂直ピクセル数 scan テレビの走査方式 26

27 Open the Future with HTML5. 27

PowerPoint Presentation

PowerPoint Presentation HTML5プロフェッショナル認定試験レベル1 無料技術セミナー 2017 年 1 月株式会社ケイシーシー福田浩之 ; http://creativecommons.org/licenses/by/3.0/ LPI-Japan 2015. All rights reserved. 講師プロフィール会社概要株式会社ケイシーシー http://www.kcc.co.jp/ カスタマイズ

講師プロフィール 会社概要株式会社ケイ シー シー 講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワーク セキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ

講師プロフィール会社概要株式会社ケイシーシー講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ