PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

よしじろうわくや
5 years ago
Views:

2 アカデミック認定校プロフェッショナル認定資格合格者 Lv1: 27 名 Lv2: 5 名 2017 年 6 月現在 2

3 本日解説する主な内容 3

4 4

5 HTML4.01 に比べて複雑な処理が容易になり文書構造をより明確に書けるようになった動画や音声をシンプルに扱えるようになった新たな属性が増えフォーム周りの機能が強化された文書構造を表すタグなどが増えより明確な文書構造を示すことができるようになった様々な API が追加されより高度な機能を持ったウェブアプリケーションを構築できるようになったなど 5

6 6

7 7

8 Lv.1 8

9 9

10 10 調査期間 2015/9/ /11/2 有効回答数 1,064 件

11 11

12 12

13 13

14 14

15 15

16 16

17 17

18 18

19 19

20 20

21 21

22 22

23 合否結果約 60 問 23

24 24

25 旧バージョンは月日まで 25

26 26

27 27

28 HTTP 通信 1 の情報ほしい!(HTTP リクエスト ) 2 の情報あげる!(HTTP レスポンス ) ブラウザの開発者ツールを使うとメソッド (GET POST 等 ) やステータスコード ( 等 ) など確認することができます頻繁に使うツールなので使い方を覚えておくとよいです 28

29 HTTP,HTTPS の違い https の s は Secure= 安全なという意味でデータを暗号化した状態で通信しています運営する側としては多少の予算はかかりますがユーザーからの信頼性セキュリティ向上といったメリットがあります検索エンジンも今後 https か否かで評価が変わる動きを見せています入力フォームなどがない静的なサイトでも SSL を導入するケースが増えてきています 29

30 DOCTYPE 宣言文書がどのバージョンの HTML や XHTML で作成されているかを示す記述です HTML5 はとてもシンプルな書き方になりましたがルールがあります基本形は <!DOCTYPE +1 個以上のスペース + HTML +0 個以上のスペース + > 大文字小文字は問わない HTML は含まないといけない <!doctype html> <!DOCTYPE HTML > <!doctype> html がない <!DOCTYPE HTML> < の後にスペースがある 30

31 文字コードの指定値として utf-8,shift_jis,euc-jp などがあげれられますこちらも大文字小文字は問いません <meta charset="utf-8"> 31

32 32

33 セレクタたくさん種類があり覚えておく必要はありますがあまり乱用すると見づらく後々修正する場合にややこしくなるのでシンプルなソースを心がけて使用していきましょう E:nth-child(n) n E:nth-of-type(n) E n E ~ F E F E > F E F E + F E F E[foo] foo E など 33

34 nth-child と nth-of-type の違い div p:nth-child(5){ color : red; } <div> <p>1 つ目の p タグ </p> <p>2 つ目の p タグ </p> <p>3 つ目の p タグ </p> <h6> 間に h6 タグ </h6> <p>4 つ目の p タグ </p> <p>5 つ目の p タグ </p> <p>6 つ目の p タグ </p> </div> div p:nth-of-type(5){ color : red; } <div> <p>1 つ目の p タグ </p> <p>2 つ目の p タグ </p> <p>3 つ目の p タグ </p> <h6> 間に h6 タグ </h6> <p>4 つ目の p タグ </p> <p>5 つ目の p タグ </p> <p>6 つ目の p タグ </p> </div> 34

35 アニメーションメリット css だけで実装可能単純なアニメーションなら JavaScript を利用するより簡単に実装ができる JavaScript が書けない人でもアニメーションの実装ができる JavaScript を利用したアニメーションとパフォーマンスの遜色がない 35

36 2 つの機能 div { animation: name 1s ease infinite alternate; name { 0% { width: 50px; } 50% { width: 100px; } 100% { width: 200px; } } 36

37 37

38 セクショニングコンテンツ HTML5 から文書構造を明確にするタグが追加されましたセクショニングコンテンツはセクションの範囲を定義するコンテンツですあくまで構造を表すものなのでレイアウト目的での使用は避けましょう <header>,<footer> はセクショニングコンテンツではありません 38

39 インタラクティブコンテンツユーザーが操作できるコンテンツです ( 下記は controls 属性を付与した場合 ) <video controls autoplay poster="image.jpg"> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> <p> 動画を再生するには video タグをサポートしたブラウザが必要です </p> </video> など 39

40 40

41 〇メリット URL が同一のためリダイレクトの設定が不要 1 ソース管理なのでメンテナンスが容易デメリット 1 ソースで作成することを考慮して設計デザインをしないと構築しづらくなるデバイス毎で使用している画像が多くある場合リクエスト数が多くなり重たくなる 41

42 メディアクエリ css2でも大まかなメディア用スタイルを指定することはできましたがスマートフォンタブレットが普及されたことあり機能が強化されました Javascriptで対応する方法もありますがメディアクエリを使えばシンプルに振り分けられますメディアタイプの一部 42

43 <link href="css/style.css" rel="stylesheet" media="screen and (max-width: 320px)" screen and (max-width: 320px){ ブラウザ幅が 320px 以下に適用 screen and (min-width: 321px) and (max-width: 768px){ ブラウザ幅が 321px 以上 768px 以下に適用 screen and (orientation: portrait) { デバイスの向きが縦の場合 screen and (orientation: landscape) { デバイスの向きが横の場合 } 43

44 フルードグリッド 50% 33% %

45 45

46 オフラインウェブアプリケーションオフライン状態でもウェブアプリケーションを利用できるようにするためキャッシュマニフェストという仕様が追加されましたブラウザのキャッシュをコントロールしサーバの負荷を軽減したりオフライン時でも動作するウェブアプリケーションを作るなど可能です 46

47 マニフェストファイルを作成一般的に拡張子は appcache 文字コードは utf-8 1 行目に CACHE MANIFEST と記述セクションを分けてそれぞれファイルを指定 <html manifest= sample.appcache"> 47 一般的に.htaccessもしくはにマニフェストファイルのMIMEタイプが text/cache-manifestであることを指定 (Webサーバによって設定方法は異なります )

48 Canvas マルチメディアグラフィックス系 API の一つとして Canvas API があります <canvas> 要素を html に配置し javascript を使用して図形文字などを描画し色や影をつけたり回転させたりなどが可能ですアニメーションさせることもできますが実際には Canvas API にそれらの機能はなく javascript で描画自体を繰り返して実現させます WebGL( ブラウザ上で 3DCG プログラミングができる ) を利用すれば高度な 3D での表現ができます 48

49 49

50 教材 : LPI-Japan HTML5 認定教材を使う ( たくさん教材があるので自分に合ったものを使いましょう ) 実際に書く : JS Bin CodePen などブラウザ上で即座に確認できるサービスを使えば捗ります 7 割以上で合格なので配点の高い ( 重要度が高い ) 部分から重点的に学習してもよいかもしれません 50

51 私は未経験でこの業界に飛び込みもともとそこまで Webに詳しくなかったので基本的な知識が浅いまま業務をこなしていましたこの試験をきっかけに知識の幅が広がり Webに対しての理解が深まりました実務作業で活かせる知識を身につけれるので是非ともお勧めしたい資格です 51

52 52

53 53

54 Open the Future with HTML5. 54

自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェ

OSC 2017 Tokyo / Fall HTML5 プロフェッショナル認定資格レベル 1 ポイント解説セミナー 2017 年 9 月 9 日 ( 土 )@OSC 2017 Tokyo / Fall 吉原健株式会社フォーク自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事吉原健 24