Post on 21-Jun-2015
description
さらに一歩踏み込んだCSS3の使い方！
コツとポイントを理解して
楽しくサイトを彩る方法
Photo and Design sonsun
鍋坂 理恵
鍋坂理恵Rie Nabesaka
香川県生まれのWebデザイナー制作会社で各種制作を経て独立カメラマンの夫・５歳の息子育児・家事・仕事に奮闘中
CSS3について
CSS3で実装するメリット
・画像を使わなくても実装できることが増えた
・従来では難しかった表現が可能に
・ファイルサイズの軽減
・アニメーションが軽い
・高解像度ディスプレイでもキレイ！
http://www.findmebyip.com/litmus/
主なCSS3プロパティ
box-shadowtext-shadowborder-radiusopacityrgba() hsla()
box-sizingBackground SizeMultiple backgroundsborder-image
FlexBoxCSS ColumnsMedia Queries
CSS AnimationsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS Transitions
主なCSS3プロパティ
box-shadowtext-shadowborder-radiusopacityrgba() hsla()
box-sizingBackground SizeMultiple backgroundsborder-image
FlexBoxCSS ColumnsMedia Queries
CSS AnimationsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS Transitions
比較的使いやすいプロパティ
主なCSS3プロパティ
box-shadowtext-shadowborder-radiusopacityrgba() hsla()
box-sizingBackground SizeMultiple backgroundsborder-image
FlexBoxCSS ColumnsMedia Queries
CSS AnimationsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS Transitions
今日はこのプロパティに注目！
Transforms, Transitions, Animations
アニメーション実装ができるプロパティ
Transforms, Transitions, Animations
アニメーション実装ができるプロパティ
http://www.findmebyip.com/litmus/
記述方法を理解しよう
Transforms
Transforms
2D Transform 3D Transform
・・・拡大縮小、変形、回転、ゆがみ などの表現
translate
rotate
scale
skew
matrix
移動
回転
拡大縮小
ゆがみ(傾斜)
変形指定
translate
rotate
scale
skew
matrix
perspective
移動
回転
拡大縮小
ゆがみ
変形指定
遠近効果
Transforms 記述方法
.box1 { transform: rotate(20deg); }
関数 値
2D transform
.box1 { transform: rotate(20deg);}
CSS
<div class="box1">SAMPLE</div>
右回りに20度回転させる
記述方法
2D transform 記述方法
.box1 { transform: skewX(15deg);}
CSS
X軸に15度傾斜させる
<div class="box1">SAMPLE</div>
2D transform の基準点 記述方法
デフォルトでは要素の中央
2D transform の基準点 記述方法
基準点を設定するtransform-originプロパティ
.box1 { transform-origin: 100% 100%; }
X軸 Y軸
left, right, top, bottomの指定も可能
2D transform の基準点 記述方法
.box1 { transform: rotate(20deg);}
.box1 { transform: rotate(20deg); transform-origin: 100% 100%;}
3D transform 記述方法
X軸、Y軸に加え、Z軸の指定が可能に
3D transform 記述方法
X軸、Y軸に加え、Z軸の指定が可能に
perspective（遠近効果）
3D transform 記述方法
奥行きを表現する、perspective関数
.box3 {transform: perspective(200) rotateY(20deg);}
.box3 {transform: perspective(80) rotateY(20deg);}
3D transform 記述方法
perspectiveプロパティ
#container {perspective: 200;}
.box1 {transform: rotateY(50deg);}
.box2 {transform: rotateY(-50deg);}
3D transform の基準点 記述方法
X軸、Y軸、Z軸の基準点が設定できるデフォルトではX軸Y軸は要素の中心、Z軸は「０」となる
.box { transform: perspective(250) rotateY(20deg); transform-origin: 100% 100% 0;}
.box { transform: perspective(250) rotateY(20deg); transform-origin: 0% 0% 0;}
要素の裏返し 記述方法
裏面を表示させるかどうか backface-visibilityプロパティbackface-visibility: hidden; ・・・表示させないbackface-visibility: visible; ・・・表示させる
transform: rotateY(180deg);
X方向なら垂直に反転
CSS3でアニメーション表現を行う、Transitions と Animations
アニメーション全体
始点 終点
transition
アニメーション全体
0% 50%
無限ループが可能
細かく設定できる 75% 100%
animation
Transitions
Transitions
アニメーションの
始点と終点の設定
アニメーションの長さを設定
アニメーション全体の
速度進行を調節する
アニメーションの遅延の設定
Transitions ４つのプロパティ 記述方法
transition-property
transition-duration
transition-timing-function
transition-delay
Transitions ４つのプロパティ 記述方法
transitionを適用させるプロパティを設定する ・プロパティ名 （background-colorなど。カンマ区切りで複数設定も）・all （すべてのプロパティ）・none （適用しない）
transition-duration: 2s;
transitionの変化にかかる時間を設定する・s（秒数）・ms（ミリ秒数） この２つだけでも
アニメーションできる
transition-property: all;
Transitions ４つのプロパティ 記述方法
アニメーションの加速や減速などを調節する
transition-delay: 0.5s;
イベントを起こしてから、アニメーションが開始するまでの時間設定・s（秒数）・ms（ミリ秒数）
transition-timing-function: ease-out;
・ease・linear
・ease-in・ease-out
・ease-in-out
Transitions ４つのプロパティ 記述方法
ショートハンドで記述することも可能（半角スペースで区切る）
transition: background-color 2s linear;
アニメーション対象
アニメーションの長さ
減速や加速の設定
Transitions ４つのプロパティ 記述方法
ショートハンドで記述することも可能（半角スペースで区切る）
transition: background-color 2s linear;
アニメーション対象
アニメーションの長さ
減速や加速の設定
実際に動きを見てみましょうdemo
Animations
Animations
キーフレームによる
細かい指定
アニメーションを途中から変化できる
ユーザーアクションに
関係なく再生できる
無限ループが設定できる
@keyframesでアニメーション名を定義して、フレームごとの設定を行う
@keyframes 'アニメーション名' {}
アニメーション始点
Animations
アニメーション終点
0% 50% 75% 100%
記述方法
@keyframes 'animation' { 0% { background-color: #ff0b00; } 50% { background-color: #ffd800; } 100% { background-color: #54ff00; }}
Animations 記述方法
Animations 基本プロパティ
animation-name
animation-duration
記述方法
@keyframesで実行させたいアニメーションの名前を指定する
@keyframesで実行させたいアニメーション全体の長さを指定する・s（秒数）・ms（ミリ秒数）
この２つは必ず設定する
Animations 主な関連プロパティ 記述方法
transitionと同じ
アニメーションの加速や減速などを調節する
animation-delay: 0.5s;
アニメーションが開始するまでの時間設定・s（秒数）・ms（ミリ秒数）
animation-timing-function: ease-out;
・ease・linear
・ease-in・ease-out
・ease-in-out
Animations 主な関連プロパティ
再生する回数を設定する
animation-iteration-count: infinite;
・infinite （無限ループ）・数字 （再生回数）
通常再生するか、逆再生するかなど設定する
animation-direction: reverse;
・nomal・reverse・alternate・alternate-reverse
通常通りに再生常に逆再生する再生・逆再生と繰り返す逆再生・再生と繰り返す
Animations 主な関連プロパティ 記述方法
アニメーションの加速や原則などを調節する
animation-delay: 0.5s;
アニメーションが開始するまでの時間設定・s（秒数）・ms（ミリ秒数）
animation-timing-function: ease-out;
・ease・linear
・ease-in・ease-out
・ease-in-out実際に動きを見てみましょう
demo
プロパティを組み合わせた制作例
Sample 1 transitionでナビゲーションに動きをつける
demo
Sample 2 transitionとtransformで 実装するナビゲーション
demo
Sample 2 animationを使った装飾例
demo
CSS3 お役立ちツール
CSS3の実装は時間がかかる・・・
分かってるけど
書くのが大変ブラウザ対応確認するのが手間
コードがややこしい
時間がない！でも使いたい！
アニメーション作成ツール
Adobe Edgehttp://www.adobe.com/jp/products/edge.html
Sencha Animatorhttp://www.sencha.com/products/animator/
Flash Professional CS6 / Toolkit for CreateJShttp://www.adobe.com/jp/products/flash/flash-to-html5.html/
HTML5・CSS3 JavaScript
CreateJShttp://www.createjs.com/
CSS3 作成ツール
Animate.CSShttp://daneden.me/animate/
Styliehttp://jeremyckahn.github.com/stylie/
CSS3.0 MAKERhttp://www.css3maker.com/
CSS3 Sandboxhttp://westciv.com/tools/ transform
transitionanimationetc...
CSS3 作成ツール
Grad3http://grad3.ecoloniq.jp/
cssarrowpleasehttp://cssarrowplease.com/
CSS3 Multi Column Layout Generatorhttp://www.aaronlumsden.com/multicol/
3D CSS Text Generatorhttp://www.3dcsstext.com/
CSS3PROPERTYS
CSS3 作成ツール
border-image-generatorhttp://border-image.com/
CSS3PROPERTYS
まとめ
・案件の要件に応じて取り入れる
・プロパティの理解を深める
・効率化できるものは活用しよう
ありがとうございます！
Photo and Design sonsun
鍋坂理恵
info@sonsun33.comTwitter : @sonsunFacebook : sonsun