Submit Search
Upload
HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
•
3 likes
•
1,228 views
Fuminori Mori
Follow
2014-06-26に鹿児島市のソフトプラザかごしまで開催された一般社団法人鹿児島県情報サービス産業協会(KISA)主催のセミナーの講演スライドです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 74
Download now
Download to read offline
Recommended
2012-03-10 九州GTUG in 鹿児島でのHTML5&Google Chromeについての発表
2012: A Web Odyssey
2012: A Web Odyssey
Fuminori Mori
2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote
Takahiro Nakahata
体験してみようWordPress.com
体験してみようWordPress.com
Yusuke Hayasaki
WordCamp Tokyo 2012のハンズオン「ちゃっちゃとCoolなポートフォリオを作りましょう」で発表したスライドです。ハンズオンのため作り方抜きで、事前説明です。
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
WTM77 Web Touch Meeting
会社を作って1年たっての考察
会社を作って1年たっての考察
Masanori Oobayashi
2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる
Yusuke Yamamoto
10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか?や、この勉強会についてご紹介しました。 [ 勉強会詳細: ] ( http://r360studio.com/coworklabo/ )
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
Createjs jp study #4 20130726
Createjs jp study #4 20130726
Seigo Tanaka
Recommended
2012-03-10 九州GTUG in 鹿児島でのHTML5&Google Chromeについての発表
2012: A Web Odyssey
2012: A Web Odyssey
Fuminori Mori
2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote
Takahiro Nakahata
体験してみようWordPress.com
体験してみようWordPress.com
Yusuke Hayasaki
WordCamp Tokyo 2012のハンズオン「ちゃっちゃとCoolなポートフォリオを作りましょう」で発表したスライドです。ハンズオンのため作り方抜きで、事前説明です。
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
WTM77 Web Touch Meeting
会社を作って1年たっての考察
会社を作って1年たっての考察
Masanori Oobayashi
2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる
Yusuke Yamamoto
10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか?や、この勉強会についてご紹介しました。 [ 勉強会詳細: ] ( http://r360studio.com/coworklabo/ )
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
Createjs jp study #4 20130726
Createjs jp study #4 20130726
Seigo Tanaka
2014/2/28 Enterprise x HTML5 Application Conference 2014での講演資料です。 SAPジャパンの井口さんとのコラボレーションです。
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
2015-07-04開催のHTML5 Conference 2015 in 鹿児島で行ったセッション「入門HTML5/CSS3」のスライド。
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Fuminori Mori
2012/03/10 九州GTUG in 鹿児島 「HTML5の話」
HTML5の話
HTML5の話
Hiroyuki Nozaki
第7回HTML5とか勉強会での、Publickey 新野さんのスライド資料です。
記事には書けなかったHTML5の話
記事には書けなかったHTML5の話
Shumpei Shiraishi
WDHA#038 CMS会議 AOMORI で紹介した a-blog cms 2.1を活用したWeb制作のワークフロー のスライドです。
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Kazumich YAMAMOTO
WordCamp Tokyo2015ハンズオンスライド(配布版)
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!
人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!
Mitsuo Kawashima
2013 年 9 月 22 日開催の NSEG 第 43 回勉強会で発表した「HTML と CSS の社内勉強会を主催した話」のスライドです。
HTML と CSS の社内勉強会を主催した話
HTML と CSS の社内勉強会を主催した話
suno88
8月4日に開催されたHTML初心者向け勉強会の内容です!
HTML初心者向け勉強会
HTML初心者向け勉強会
SakiKomuro
xRLT Vol.2
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
KoichiNakagawa4
モダンなモバイル開発のススメ
モダンなモバイル開発のススメ
Daichi Kamemoto
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
2015/09/27 concrete5事例紹介セミナーで使用したスライドです。 HTML Exporterアドオン導入の背景、使用方法などをまとめてます。
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
Yuzuru Sano
2012/11/16 Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
Japan SharePoint Group #17 @東京・青山
「Onedrive for Business」をチョットだけカスタマイズしてみる
「Onedrive for Business」をチョットだけカスタマイズしてみる
Kosuke Kuromiya
第9回 Office 365 勉強会でお話させて頂いた資料です。
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
MVP Community Camp 2015 にてお話をさせて頂いた資料です。 MVP Community Camp http://mvp.microsoft.com/ja-jp/ComCamp.aspx
Office 365 とのつき合い方
Office 365 とのつき合い方
Hirofumi Ota
書籍『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベントのスライド
実践!構造化マークアップ
実践!構造化マークアップ
Hiroyuki Ogawa
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
html5では 概要説明 現状のhtmlをまとめた内容 フォームなどのデモ CSS3では ie9で対応されていないアニメーションをjqueryで簡単に対応する方法を紹介
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Akihiro Sugiyama
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
2024年4月に社内向けに開催した勉強会資料の社外公開版です
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
More Related Content
Similar to HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
2014/2/28 Enterprise x HTML5 Application Conference 2014での講演資料です。 SAPジャパンの井口さんとのコラボレーションです。
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
2015-07-04開催のHTML5 Conference 2015 in 鹿児島で行ったセッション「入門HTML5/CSS3」のスライド。
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Fuminori Mori
2012/03/10 九州GTUG in 鹿児島 「HTML5の話」
HTML5の話
HTML5の話
Hiroyuki Nozaki
第7回HTML5とか勉強会での、Publickey 新野さんのスライド資料です。
記事には書けなかったHTML5の話
記事には書けなかったHTML5の話
Shumpei Shiraishi
WDHA#038 CMS会議 AOMORI で紹介した a-blog cms 2.1を活用したWeb制作のワークフロー のスライドです。
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Kazumich YAMAMOTO
WordCamp Tokyo2015ハンズオンスライド(配布版)
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!
人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!
Mitsuo Kawashima
2013 年 9 月 22 日開催の NSEG 第 43 回勉強会で発表した「HTML と CSS の社内勉強会を主催した話」のスライドです。
HTML と CSS の社内勉強会を主催した話
HTML と CSS の社内勉強会を主催した話
suno88
8月4日に開催されたHTML初心者向け勉強会の内容です!
HTML初心者向け勉強会
HTML初心者向け勉強会
SakiKomuro
xRLT Vol.2
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
KoichiNakagawa4
モダンなモバイル開発のススメ
モダンなモバイル開発のススメ
Daichi Kamemoto
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
2015/09/27 concrete5事例紹介セミナーで使用したスライドです。 HTML Exporterアドオン導入の背景、使用方法などをまとめてます。
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
Yuzuru Sano
2012/11/16 Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
Japan SharePoint Group #17 @東京・青山
「Onedrive for Business」をチョットだけカスタマイズしてみる
「Onedrive for Business」をチョットだけカスタマイズしてみる
Kosuke Kuromiya
第9回 Office 365 勉強会でお話させて頂いた資料です。
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
MVP Community Camp 2015 にてお話をさせて頂いた資料です。 MVP Community Camp http://mvp.microsoft.com/ja-jp/ComCamp.aspx
Office 365 とのつき合い方
Office 365 とのつき合い方
Hirofumi Ota
書籍『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベントのスライド
実践!構造化マークアップ
実践!構造化マークアップ
Hiroyuki Ogawa
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
html5では 概要説明 現状のhtmlをまとめた内容 フォームなどのデモ CSS3では ie9で対応されていないアニメーションをjqueryで簡単に対応する方法を紹介
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Akihiro Sugiyama
Similar to HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
(20)
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
HTML5の話
HTML5の話
記事には書けなかったHTML5の話
記事には書けなかったHTML5の話
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!
HTML と CSS の社内勉強会を主催した話
HTML と CSS の社内勉強会を主催した話
HTML初心者向け勉強会
HTML初心者向け勉強会
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
モダンなモバイル開発のススメ
モダンなモバイル開発のススメ
Htmlのコトバ
Htmlのコトバ
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
「Onedrive for Business」をチョットだけカスタマイズしてみる
「Onedrive for Business」をチョットだけカスタマイズしてみる
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Office 365 とのつき合い方
Office 365 とのつき合い方
実践!構造化マークアップ
実践!構造化マークアップ
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Recently uploaded
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
2024年4月に社内向けに開催した勉強会資料の社外公開版です
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20Lカタログ
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
NewSQLの可用性構成パターン (OCHaCafe Season 8 #4 発表資料) 2024年5月8日(水) NTTデータグループ 技術開発本部 小林 隆浩
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(7)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
1.
HTML5 Will Take
You Higher! ∼HTML5は実務で使える段階へ∼
2.
目次 ✦ 自己紹介 ✦ HTML5って? ✦
実務で使えるHTML5 ✦ 便利ツール ✦ 学習サイト ✦ 本日のまとめ
3.
自己紹介
4.
自己紹介 名前 森 史憲(もり ふみのり) 出身・現住所 鹿児島市 特徴 丸メガネ、丸ぼうず(休止中) 2014年5月4日 枕崎市 火之神公園
5.
自己紹介 フリーランスのHTMLコーダー ★基本的にはコーダーですが、 鹿児島ではディレクションもお受け してます! ★基本はシステム用のテンプレート HTMLのコーディング ★最近は対象ブラウザが「IE9以上」 という案件も出てきてます。 Suite HAIR DESIGN http://www.suite-hairdesign.com/ ディレクション/コーディング/運用
6.
自己紹介 雑誌記事 / 書籍執筆 ★HTML5&CSS3 ポケットリファレンス (技術評論社) ★イラストいっぱいで子供さんの プログラミング教育にもおすすめ! ★Amazon、7netショッピングや 全国の書店でお求めいただけます! ★電子版は技術評論社の電子書籍 サイトでお求めいただけます!
7.
自己紹介 Webサイト制作技術講師 ★Webサイト制作技術専門講座 NPO法人 鹿児島インファーメーション ★HTML5&CSS3およびjQuery、 HTML5 APIを学習する講座
8.
カレーLOVE! カレー屋 匠 ★匠盛 (和牛・黒豚あいがけ) ビールLOVE! 城山観光ホテルの地ビール ★ベルギーホワイト ★スタウトエール黒糖 チョコレートLOVE! パティスリー・ヤナギムラ ★薩摩チョコチップス 自己紹介
9.
HTML5って?
10.
★HTML5はHTMLの5つめのバージョン ★これまでのバージョンであるHTML4、 XHTML1と互換性がある HTML5って?
11.
★Webアプリケーションを作ることを志向 ✴ 狭い意味でのHTML5は文書構造だけ ✴ 広い意味では見た目の装飾をする「CSS3」、 デバイスの機能を利用可能にする 「JavaScript
API」を含む HTML5って?
12.
http://en.wikipedia.org/wiki/HTML5 狭い意味のHTML5 ↓ 広い意味のHTML5→
13.
HTML5って? ★実例 ✴ 幅によってレイアウトを変更するWebサイト -レスポンシブWebデザイン スマホ版 PC版
14.
HTML5って? ★実例 ✴ 3DCGを利用した ゲーム -翠星のガルガンティア http:// fly.gargantia.jp/
15.
HTML5って? ★実例 ✴ IDを必要としないビデオ通話アプリ ✴ talky -
https://talky.io/
16.
なぜHTML5は街へ出るの? https://talky.io/
17.
★実例 ✴ 表示をHTML5で行う モバイルOS (アプリもHTML5) - Firefox
OS - Tizen HTML5って? Firefox OS スクリーンショット
18.
★実例 ✴ アプリからTVに 動画配信を指示 ✴ Chromecast向け アプリ開発 https://github.com/ googlecast HTML5って?
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.
http://helloracer.com/webgl/
22.
★実例(ニュース) ✴ スマート家電をHTML5アプリで操作 ✴ Kadecot(カデコ)プロジェクト http://kadecot.net/ HTML5って?
23.
http://kadecot.net/
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>
29.
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>
31.
32.
33.
実務で使えるHTML5(HTML 4/5) ★オフライン時に閲覧するファイルリストを 指定 ✴ html要素のmanifest属性 例)<html
lang="ja" manifest="manifest.appcache"> … <p>オフライン時でもこのファイルは見ること ができます</p>
34.
★html要素のmanifest属性 例)manifest.appcache CACHE MANIFEST index.html 実務で使えるHTML5(HTML 4/5)
35.
★html要素のmanifest属性 例).htaccess AddType text/cache-manifest .appcache 実務で使えるHTML5(HTML
4/5)
36.
37.
★入力例の表示 ✴ input要素placeholder属性 例)<input type=
text name= curry_shop placeholder="例)カレー屋 匠"> 実務で使えるHTML5(HTML 5/5)
38.
39.
CSS編(6つ紹介)
40.
実務で使えるHTML5(CSS 1/6) ★角丸表示 ✴ border-radiusプロパティ 例)div
{ background: green; border-radius: 10px; }
41.
42.
実務で使えるHTML5(CSS 2/6) ★ウインドウ幅によって表示を変える ✴ @media 例)#wrapper
{ width: auto; margin: 0 auto; } @media only screen and (min-width:600px) { #wrapper { width: 600px; } }
43.
44.
★端末内にないフォントを使って文字を表示 ✴ @font-face 例)@font-face { font-family:
"Butterfly Effect"; src: url(UnT_efeitoBorboleta.eot); } body { font-family: "Butterfly Effect"; } 実務で使えるHTML5(CSS 3/6)
45.
46.
★複数の背景指定 ✴ backgroundプロパティ 例)div { background:
url(bg1.png) no-repeat 0 0, url(bg2.png) no-repeat 0 0 skyblue; } 実務で使えるHTML5(CSS 4/6)
47.
48.
★レイアウトに影響しない線 ✴ outlineプロパティ 例)input:focus {
outline: 2px solid orange; } 実務で使えるHTML5(CSS 5/6)
49.
50.
★変形 ✴ transformプロパティ 例)div { transform:
rotate(30deg); -webkit-transform: rotate(30deg); } 実務で使えるHTML5(CSS 6/6)
51.
52.
JavaScript編(4つ紹介)
53.
実務で使えるHTML5(JavaScript 1/4) ★ブラウザにデータを保存 ✴ localStorage,
sessionStorage 例)var storage = sessionStorage; storage.setItem("height","172"); var myheight = storage.getItem("height");
54.
55.
★ウインドウ幅によって動きを変える ✴ matchMedia 例)if (window.matchMedia(
"(min-width: 600px)" ).matches) { /* ウインドウ幅600px以上の時 */ } else { /* ウインドウ幅599px以下の時 */ } 実務で使えるHTML5(JavaScript 2/4)
56.
57.
★グラフなどの描画領域を確保 ✴ canvas要素 例)var ctx
= document.getElementById("myChart"). getContext("2d"); ctx.fillRect(0,0,50,50); 実務で使えるHTML5(JavaScript 3/4)
58.
chart.js→ http://www.chartjs.org/
59.
★緯度・経度の取得 ✴ navigator.geolocation 例)navigator.geolocation.getCurrentPosition( function(pos){ //正常処理 }, function(pos){ //エラー処理 }); 実務で使えるHTML5(JavaScript
4/4)
60.
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は だいぶ増えてきた! ★ ツール類、学習サイトが充実してきた! 本日のまとめ
69.
HTML5を実務で どんどん取り入れて
70.
いち早く新しい価値を 生み出しましょう
71.
鹿児島ならではの問題を 解決する製品で
72.
世界を目指しましょう!
73.
ご清聴ありがとうございました! m(__)m
74.
http://codepen.io/ moonglows76/public-list/
Download now