Download as PDF, PPTX
Uploaded byFuminori Mori
HTML5 Will Take You Higher! ～HTML5は実務で使える段階へ～
2014-06-26に鹿児島市のソフトプラザかごしまで開催された一般社団法人鹿児島県情報サービス産業協会(KISA)主催のセミナーの講演スライドです。
HTML5 Will Take You Higher! ～HTML5は実務で使える段階へ～
- 1. HTML5 Will TakeYou Higher! ∼HTML5は実務で使える段階へ∼
- 2. 目次 ✦ 自己紹介 ✦ HTML5って？ ✦実務で使えるHTML5 ✦ 便利ツール ✦ 学習サイト ✦ 本日のまとめ
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. HTML5って？ ★実例 ✴ IDを必要としないビデオ通話アプリ ✴ talky -https://talky.io/
- 16.
- 17. ★実例 ✴ 表示をHTML5で行う モバイルOS （アプリもHTML5） - FirefoxOS - Tizen HTML5って？ Firefox OS スクリーンショット
- 18.
- 19. HTML5って？ ★実例（ニュース） ✴ デジタルサイネージの表示 ✴ 通常時は広告・公共情報、災害時は災害情報 ✴NTT、スマホで情報をリレーして街中のデジタル サイネージを連携させるシステムを実験 http://www.rbbtoday.com/article/ 2013/11/19/114056.html
- 20. HTML5って？ ★実例（ニュース） ✴ 車載ディスプレイのブラウザ＆アプリ ✴ ブラウザ表示をWebkitベースに変更 ✴車載組込ブラウザの過去7年と今を40分でまとめ てみる http://www.slideshare.net/naohikowatanabe/ 740-30295639
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. 実務で使えるHTML5（HTML 1/5） ★意味付けをする新しい要素 ✴ nav,article, section, aside, header, footer, main ...etc 例）<article> <h1>ベルギーのチョコレート</h1> <p>ゴディバもおいしいけどピエール・マルコ リーニもね。</p> </article>
- 27. ※IE8は JavaScript (HTML5shiv)で補うことが可能
- 28. 実務で使えるHTML5（HTML 2/5） ★すべての要素に任意の属性を設定 ✴ data-*属性 例）<divdata-beertype=”ホワイトエール”> 城山ブルワリー ベルギーホワイト </div>
- 30. 実務で使えるHTML5（HTML 3/5） ★プラグインなしで動画や音声を埋め込み ✴ video要素、audio要素 例）<videocontrols width="800" height="600"> <source src="video.mp4" type="video/ mp4"> <source src="video.webm" type="video/ webm"> </video>
- 33. 実務で使えるHTML5（HTML 4/5） ★オフライン時に閲覧するファイルリストを 指定 ✴ html要素のmanifest属性 例）<htmllang="ja" manifest="manifest.appcache"> … <p>オフライン時でもこのファイルは見ること ができます</p>
- 34.
- 35.
- 37. ★入力例の表示 ✴ input要素placeholder属性 例）<input type=text name= curry_shop placeholder="例）カレー屋 匠"> 実務で使えるHTML5（HTML 5/5）
- 39.
- 40. 実務で使えるHTML5（CSS 1/6） ★角丸表示 ✴ border-radiusプロパティ 例）div{ background: green; border-radius: 10px; }
- 42. 実務で使えるHTML5（CSS 2/6） ★ウインドウ幅によって表示を変える ✴ @media 例）#wrapper{ width: auto; margin: 0 auto; } @media only screen and (min-width:600px) { #wrapper { width: 600px; } }
- 44. ★端末内にないフォントを使って文字を表示 ✴ @font-face 例）@font-face { font-family:"Butterfly Effect"; src: url(UnT_efeitoBorboleta.eot); } body { font-family: "Butterfly Effect"; } 実務で使えるHTML5（CSS 3/6）
- 46. ★複数の背景指定 ✴ backgroundプロパティ 例）div { background:url(bg1.png) no-repeat 0 0, url(bg2.png) no-repeat 0 0 skyblue; } 実務で使えるHTML5（CSS 4/6）
- 48. ★レイアウトに影響しない線 ✴ outlineプロパティ 例）input:focus {outline: 2px solid orange; } 実務で使えるHTML5（CSS 5/6）
- 50. ★変形 ✴ transformプロパティ 例）div { transform:rotate(30deg); -webkit-transform: rotate(30deg); } 実務で使えるHTML5（CSS 6/6）
- 52.
- 53. 実務で使えるHTML5（JavaScript 1/4） ★ブラウザにデータを保存 ✴ localStorage,sessionStorage 例）var storage = sessionStorage; storage.setItem("height","172"); var myheight = storage.getItem("height");
- 55. ★ウインドウ幅によって動きを変える ✴ matchMedia 例）if (window.matchMedia("(min-width: 600px)" ).matches) { /* ウインドウ幅600px以上の時 */ } else { /* ウインドウ幅599px以下の時 */ } 実務で使えるHTML5（JavaScript 2/4）
- 57. ★グラフなどの描画領域を確保 ✴ canvas要素 例）var ctx= document.getElementById("myChart"). getContext("2d"); ctx.fillRect(0,0,50,50); 実務で使えるHTML5（JavaScript 3/4）
- 58.
- 59.
- 61.
- 62. ★ブラウザのサポート状況を確認する ✴ Can Iuse... http://caniuse.com/ ✴ Quirksmode http://www.quirksmode.org/ 便利ツール
- 63. ★ブラウザごとの違いを吸収する ✴ Modernizr(HTML5 shiv+ α) http://modernizr.com/ ✴ normalize.css http://necolas.github.io/normalize.css/ ✴ jQuery http://jquery.com/ 便利ツール
- 64. ★手っ取り早く形にするフレームワーク ✴ Bootstrap（最も知られているフレームワーク） http://getbootstrap.com/ ✴ 主要なフレームワーク http://webnaut.jp/CSS-Framework-Comparative-Chart/ ✴いろーんなフレームワーク http://usablica.github.io/front-end-frameworks/ compare.html 便利ツール
- 65.
- 66.
- 67.
- 68. ★ HTML5の活用領域はかなり広い！ ★ 実務で使えるHTML,CSS, JavaScript APIは だいぶ増えてきた！ ★ ツール類、学習サイトが充実してきた！ 本日のまとめ
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.