HTML5&CSS3の実例紹介＆DEMO
2014/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
従来のHTML
<div id=”header”>
<div id=
”menu”>
<div id=”content”>
<div id=”entry”>
<div id=”footer”>
HTML5
<header>
<nav>
<section>
<article>
<footer>
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

注意②
・IE９で使用できない主なCSS3
Text Shadow
CSS Animations
CSS Gradients
CSS Transforms 3D
CSS Transitions
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