html5とcss３実例紹介とデモ
•
3 gefällt mir•1,125 views
html5では 概要説明 現状のhtmlをまとめた内容 フォームなどのデモ CSS3では ie9で対応されていないアニメーションをjqueryで簡単に対応する方法を紹介
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Ähnlich wie html5とcss３実例紹介とデモ
Ähnlich wie html5とcss３実例紹介とデモ (20)
Mehr von Akihiro Sugiyama
Mehr von Akihiro Sugiyama (7)
html5とcss３実例紹介とデモ
- 2. 自己紹介 名前杉山 彰啓（スギヤマ アキヒロ） 経歴・独立系企業就職しロボットの研究をする ・デジハリ生となり、在学期間に退職 ・UI・UXを専門のデザイン会社へ就職 ・デジハリの講師のオファーを頂き会社を退職 デジタルハリウッド ソーシャルアプリクリエイター専攻 ・フリーランスとなる ・inopを立ち上げる ・inopを退職 ・もう一度フリーランスの道へ 2
- 4. 今日のアジェンダ １：HTML5 HTML5の振り返り HTMLとHTML5の違いとは HTML5の優れた点 ２：CSS3 CSS3の特徴 CSS3での落とし穴 4
- 6. HTML5 6
- 8. HTMLの現状は HTML5は正規式な勧告はまだされておらず HTML4.0やXHTMLなどの色々なバージョンが 乱立している状態となっている 8
- 9. HTML ・ Strict型と Transitional 型 Strict型は言語仕様に厳密に従って記述することが求められている文章型 Transitional型は移行型とよばれ、HTML4.01/XHTML1.0で定められていない 古い時代のHTMLの文法で記述してもエラーとしない文章型 ・ HTMLとXHTMLの違い HTML XHTML タグや属性の大文字/小文字どちらでも可小文字のみ 終了タグの省略 可 ○：<p>内容 ○：<p>内容</p> 不可 ×：<p>内容 ○：<p>内容</p> 属性の引用府(“”)の省略 可 ○：<table width=100> ○： <table width=”100”> 不可 ×：<table width=100> ○： <table width=”100”> 属性名の名前と値が同じ場合 の属性名の省略 可 ○：checked ○：checked=”checked” 可 ×：checked ○：checked=”checked” 9
- 10. HTML5 ・APIの充実 ・文章構造も大きく変化 ブラウザや検索エンジンが何を意味しているのかを 理解してくれるようになった ・IE9以上で色々と都合が良い (IE8以下の対応の場合は「js」を読込む必要性がある) 10
- 11. HTML5 従来のHTML <div id=”header”> <div id= ”menu”> <div id=”content”> <div id=”entry”> <div id=”footer”> HTML5 <header> <nav> <section> <article> <footer> 11
- 12. HTMLで悩む事といえば 何を活かし何を無くすか？ ・HTML5で作るべきか？ ・旧式のHTMLで作るべきか？ 12
- 13. 私なりの答え 案件によって仕様を選ぶ！ 基本的にはHTML5使用で問題はない！ ・コーポレートサイトでIE8以下も対応したい ・パフォーマンス重視したい とかであれば従来のHTMLを使用していく 13
- 14. 現状のブラウザの使用率は？ 2014年７月1日～2014年8月１日の情報 参考：http://lhsp.s206.xrea.com/misc/browser-share-version.html 14
- 15. 朗報 IE8のサポートは 2016年１月12日で終了（予定） 参考：http://www.itmedia.co.jp/news/articles/1408/08/news058.html 15
- 16. HTML5 特徴 16
- 18. HTML5の特徴_2 audio要素 video要素 canvas要素 WebGL 参考：http://www.htmq.com/api/l ■音楽と映像 ■グラフィック ■位置 Geolocation API ■ファイル/ストレージ File API Webstorage ■通信 WebSocket API 18
- 19. HTML5 サポート表 PC ブラウザの HTML5 サポートを調べる方法 http://www.findmebyip.com/litmus/ 19
- 20. CSS3 20
- 21. CSS3とは ・CSS３とは webフォント、角丸、シャドウなど、今までグラフィッ クツールに頼っていた表現がCSS3で対応することが出来 るようになった ・CSS3とHTMLのバージョンの関連性 HTMLやXHTML、HTML5との組み合わせは自由 ・ブラウザの対応状況 すべてのブラウザがCSS3に対応しているわけではない 21
- 22. CSS3 サポート表 PC ブラウザの CSS3 サポートを調べる方法 http://www.findmebyip.com/litmus/ 22
- 25. 注意① ・ベンダープレフィックスとは CSS3もブラウザ独自の拡張や草案段階のもが存在し、 拡張機能であることを示す為の、識別子のこと ・ブラウザごとのベンダープレフィックス -ms- -webkit- -moz- -0- 25
- 27. 注意② ・IE９で使用できない主なCSS3 Text Shadow CSS Animations CSS Gradients CSS Transforms 3D CSS Transitions 27
- 29. 注意② そんな時の対応は 29
- 30. 注意② 「JS」で！！ 29
- 32. 注意② <script> $(function() { $("#item2").animate({zIndex:1},{ //300msかけてアニメーション duration:300, step:function(now){ $(this).css({transform:'scale(' + (now) + ')'}); }, complete:function(){ $('#item2').css('zIndex', 0); } }); }); </script> 31
- 34. ちょっとした工夫が面白い 33