HTML5&CSS3の実例紹介＆DEMO2014/09/08

1

自己紹介

名前 杉山　彰啓（スギヤマ　アキヒロ）

経歴 ・独立系企業就職しロボットの研究をする・デジハリ生となり、在学期間に退職・UI・UXを専門のデザイン会社へ就職・デジハリの講師のオファーを頂き会社を退職　　デジタルハリウッド ソーシャルアプリクリエイター専攻

・フリーランスとなる・inopを立ち上げる・inopを退職・もう一度フリーランスの道へ

2

自己サービス

スマートフォンアプリをデザインの観点でまとめたサイト

http://design-app.net/

※随時更新中！

3

今日のアジェンダ

１：HTML5　HTML5の振り返り　HTMLとHTML5の違いとは　HTML5の優れた点

２：CSS3　CSS3の特徴　CSS3での落とし穴

4

今日のゴール

1つでも「参考になった！」という情報を持って帰ってもらうこと！

5

HTML5

6

HTML5とは

2008年：HTML5の草案としてW3Cが発表

2014年：HTML5を正式勧告を目指す!

7

HTMLの現状は

HTML5は正規式な勧告はまだされておらずHTML4.0やXHTMLなどの色々なバージョンが乱立している状態となっている

8

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

HTML5

・APIの充実・文章構造も大きく変化　　ブラウザや検索エンジンが何を意味しているのかを　　 理解してくれるようになった・IE9以上で色々と都合が良い　　(IE8以下の対応の場合は「js」を読込む必要性がある)

10

HTML5

<div id=”header”>

<div id=”menu”>

<div id=”content”>

<div id=”entry”>

<div id=”footer”>

従来のHTML

<header>

<nav>

<section>

<article>

<footer>

HTML5

11

HTMLで悩む事といえば

何を活かし何を無くすか？　・HTML5で作るべきか？　・旧式のHTMLで作るべきか？

12

私なりの答え

案件によって仕様を選ぶ！

基本的にはHTML5使用で問題はない！・コーポレートサイトでIE8以下も対応したい・パフォーマンス重視したいとかであれば従来のHTMLを使用していく

13

現状のブラウザの使用率は？

2014年７月1日～2014年8月１日の情報

参考：http://lhsp.s206.xrea.com/misc/browser-share-version.html

14

朗報

IE8のサポートは2016年１月12日で終了（予定）

参考：http://www.itmedia.co.jp/news/articles/1408/08/news058.html

15

HTML5 特徴

16

HTML5の特徴_1

フォームが従来より優れた機能に

デモ

17

HTML5の特徴_2

audio要素 video要素

canvas要素 WebGL

参考：http://www.htmq.com/api/l

■音楽と映像

■グラフィック

Geolocation API■位置

File API　Webstorage■ファイル/ストレージ

WebSocket API■通信

18

HTML5 サポート表

PC ブラウザの HTML5 サポートを調べる方法

http://www.findmebyip.com/litmus/

19

CSS3

20

CSS3とは

・CSS３とは　webフォント、角丸、シャドウなど、今までグラフィックツールに頼っていた表現がCSS3で対応することが出来るようになった

・CSS3とHTMLのバージョンの関連性　HTMLやXHTML、HTML5との組み合わせは自由

・ブラウザの対応状況　すべてのブラウザがCSS3に対応しているわけではない

21

CSS3 サポート表

PC ブラウザの CSS3 サポートを調べる方法

http://www.findmebyip.com/litmus/

22

CSS3のちょっとした落とし穴に注意

23

注意①

ベンダープレフィックス

24

注意①

CSS3もブラウザ独自の拡張や草案段階のもが存在し、拡張機能であることを示す為の、識別子のこと

・ブラウザごとのベンダープレフィックス

-ms- -webkit- -moz- -0-

・ベンダープレフィックスとは

25

注意②

IE9では動作しないCSS3がある

26

注意②

Text ShadowCSS AnimationsCSS GradientsCSS Transforms 3DCSS Transitions

・IE９で使用できない主なCSS3

27

注意②

IE9ではCSS3のアニメーションができない！！

知らず「IE9から対応で」と言ってしまった・・・私

28

注意②

そんな時の対応は

29

注意②

「JS」で！！

29

注意②

CSS3のアニメーションをjsで作成してみました

30

注意②

<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

注意②

IE9でCSS3が動作しない状態でもjsができればなんとかなる！

32

ちょっとした工夫が面白い

33

ご清聴ありがとうございました

34