PowerPoint Presentation

Size: px

Start display at page:

Download "PowerPoint Presentation"

みいかしもかさ
6 years ago
Views:

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

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

レベル 1 とレベル 2 の資格体系 HTML5 プロフェッショナル認定試験レベル 1 所要時間

税別 ) 認定条件 : HTML5 レベル 1 試験の合格認定の有意性の期限 :5 年間

アンケート等の時間を含む ) 試験問題数 :40~45 問受験料 : 15,000 ( 税別 )

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

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

10 技術解説項目 1.CSSデザイン 2. 要素と属性の意味 ( セマンティクス ) 3. メディアクエリ

11 1.CSS デザイン重要度重要度 9 望まれるスキル要件に沿ったデザインを CSS を利用して実現する際にどのような実現方法が適切か判断でき仕様に沿った正しいコードを記述する事ができるポイント解説 CSS セレクタ 11

12 例題 12 以下の 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> 次のページに続く

13 例題 <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> 13

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

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

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

17 2. 要素と属性の意味 ( セマンティクス ) 重要度重要度 10 望まれるスキル HTML 要素や属性のセマンティクスを理解しコンテンツの意味を解釈しながら適切な HTML 要素や属性を使って HTML コーディングができるポイント解説フォーム :input 要素の属性 17

18 例題以下の要素の説明として正しいものをすべて選択せよ <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 要素の入力は必須である 18

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

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

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

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

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

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

25 Open the Future with HTML5. 25

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

講師プロフィール会社概要株式会社ケイシーシー講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ HTML5 プロフェッショナル認定試験レベル 1 ポイント解説無料料セミナー 2015 年年 8 月株式会社ケイシーシー福田浩之講師プロフィール会社概要株式会社ケイシーシー http://www.kcc.co.jp/ 講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java