HTML5 Will Take You Higher! ～HTML5は実務で使える段階へ～
•
3 likes•1,228 views
2014-06-26に鹿児島市のソフトプラザかごしまで開催された一般社団法人鹿児島県情報サービス産業協会(KISA)主催のセミナーの講演スライドです。
More Related Content
Similar to HTML5 Will Take You Higher! ～HTML5は実務で使える段階へ～
Similar to HTML5 Will Take You Higher! ～HTML5は実務で使える段階へ～ (20)
Recently uploaded
Recently uploaded (10)
HTML5 Will Take You Higher! ～HTML5は実務で使える段階へ～
- 1. HTML5 Will Take You Higher! ∼HTML5は実務で使える段階へ∼
- 2. 目次 ✦ 自己紹介 ✦ HTML5って？ ✦ 実務で使えるHTML5 ✦ 便利ツール ✦ 学習サイト ✦ 本日のまとめ
- 3. 自己紹介
- 9. HTML5って？
- 11. ★Webアプリケーションを作ることを志向 ✴ 狭い意味でのHTML5は文書構造だけ ✴ 広い意味では見た目の装飾をする「CSS3」、 デバイスの機能を利用可能にする 「JavaScript API」を含む HTML5って？
- 15. HTML5って？ ★実例 ✴ IDを必要としないビデオ通話アプリ ✴ talky - https://talky.io/
- 17. ★実例 ✴ 表示をHTML5で行う モバイルOS （アプリもHTML5） - Firefox OS - Tizen HTML5って？ Firefox OS スクリーンショット
- 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
- 24. 実務で使えるHTML5
- 25. HTML編（5つ紹介）
- 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-*属性 例）<div data-beertype=”ホワイトエール”> 城山ブルワリー ベルギーホワイト </div>
- 30. 実務で使えるHTML5（HTML 3/5） ★プラグインなしで動画や音声を埋め込み ✴ video要素、audio要素 例）<video controls 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属性 例）<html lang="ja" manifest="manifest.appcache"> … <p>オフライン時でもこのファイルは見ること ができます</p>
- 37. ★入力例の表示 ✴ input要素placeholder属性 例）<input type= text name= curry_shop placeholder="例）カレー屋 匠"> 実務で使えるHTML5（HTML 5/5）
- 39. CSS編（6つ紹介）
- 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）
- 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）
- 61. 便利ツール
- 62. ★ブラウザのサポート状況を確認する ✴ Can I use... 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. ✴ ドットインストール http://dotinstall.com/ ✴ CodeAcademy （英語に抵抗が少なければおすすめ） http://www.codecademy.com 学習サイト
- 67. 本日のまとめ
- 68. ★ HTML5の活用領域はかなり広い！ ★ 実務で使えるHTML, CSS, JavaScript APIは だいぶ増えてきた！ ★ ツール類、学習サイトが充実してきた！ 本日のまとめ
- 72. 世界を目指しましょう！