さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して...

55
さらに一歩踏み込んだCSS3の使い方! コツとポイントを理解して 楽しくサイトを彩る方法 Photo and Design sonsun 鍋坂 理恵

description

CSS Nite OSAKA Vol.32より

Transcript of さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して...

Page 1: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

さらに一歩踏み込んだCSS3の使い方!

コツとポイントを理解して

楽しくサイトを彩る方法

Photo and Design sonsun

鍋坂 理恵

Page 2: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

鍋坂理恵Rie Nabesaka

香川県生まれのWebデザイナー制作会社で各種制作を経て独立カメラマンの夫・5歳の息子育児・家事・仕事に奮闘中

Page 3: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS3について

Page 4: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS3で実装するメリット

・画像を使わなくても実装できることが増えた

・従来では難しかった表現が可能に

・ファイルサイズの軽減

・アニメーションが軽い

・高解像度ディスプレイでもキレイ!

Page 6: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

主なCSS3プロパティ

box-shadowtext-shadowborder-radiusopacityrgba() hsla()

box-sizingBackground SizeMultiple backgroundsborder-image

FlexBoxCSS ColumnsMedia Queries

CSS AnimationsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS Transitions

Page 7: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

主なCSS3プロパティ

box-shadowtext-shadowborder-radiusopacityrgba() hsla()

box-sizingBackground SizeMultiple backgroundsborder-image

FlexBoxCSS ColumnsMedia Queries

CSS AnimationsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS Transitions

比較的使いやすいプロパティ

Page 8: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

主なCSS3プロパティ

box-shadowtext-shadowborder-radiusopacityrgba() hsla()

box-sizingBackground SizeMultiple backgroundsborder-image

FlexBoxCSS ColumnsMedia Queries

CSS AnimationsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS Transitions

今日はこのプロパティに注目!

Page 9: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transforms, Transitions, Animations

アニメーション実装ができるプロパティ

Page 10: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transforms, Transitions, Animations

アニメーション実装ができるプロパティ

Page 12: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

記述方法を理解しよう

Page 13: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transforms

Page 14: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transforms

2D Transform 3D Transform

・・・拡大縮小、変形、回転、ゆがみ などの表現

translate

rotate

scale

skew

matrix

移動

回転

拡大縮小

ゆがみ(傾斜)

変形指定

translate

rotate

scale

skew

matrix

perspective

移動

回転

拡大縮小

ゆがみ

変形指定

遠近効果

Page 15: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transforms 記述方法

.box1 { transform: rotate(20deg); }

関数 値

Page 16: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

2D transform

.box1 { transform: rotate(20deg);}

CSS

<div class="box1">SAMPLE</div>

右回りに20度回転させる

記述方法

Page 17: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

2D transform 記述方法

.box1 { transform: skewX(15deg);}

CSS

X軸に15度傾斜させる

<div class="box1">SAMPLE</div>

Page 18: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

2D transform の基準点 記述方法

デフォルトでは要素の中央

Page 19: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

2D transform の基準点 記述方法

基準点を設定するtransform-originプロパティ

.box1 { transform-origin: 100% 100%; }

X軸 Y軸

left, right, top, bottomの指定も可能

Page 20: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

2D transform の基準点 記述方法

.box1 { transform: rotate(20deg);}

.box1 { transform: rotate(20deg); transform-origin: 100% 100%;}

Page 21: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

3D transform 記述方法

X軸、Y軸に加え、Z軸の指定が可能に

Page 22: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

3D transform 記述方法

X軸、Y軸に加え、Z軸の指定が可能に

perspective(遠近効果)

Page 23: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

3D transform 記述方法

奥行きを表現する、perspective関数

.box3 {transform: perspective(200) rotateY(20deg);}

.box3 {transform: perspective(80) rotateY(20deg);}

Page 24: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

3D transform 記述方法

perspectiveプロパティ

#container {perspective: 200;}

.box1 {transform: rotateY(50deg);}

.box2 {transform: rotateY(-50deg);}

Page 25: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

3D transform の基準点 記述方法

X軸、Y軸、Z軸の基準点が設定できるデフォルトではX軸Y軸は要素の中心、Z軸は「0」となる

.box { transform: perspective(250) rotateY(20deg); transform-origin: 100% 100% 0;}

.box { transform: perspective(250) rotateY(20deg); transform-origin: 0% 0% 0;}

Page 26: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

要素の裏返し 記述方法

裏面を表示させるかどうか backface-visibilityプロパティbackface-visibility: hidden;  ・・・表示させないbackface-visibility: visible;   ・・・表示させる

transform: rotateY(180deg);

X方向なら垂直に反転

Page 27: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS3でアニメーション表現を行う、Transitions と Animations

アニメーション全体

始点 終点

transition

アニメーション全体

0% 50%

無限ループが可能

細かく設定できる 75% 100%

animation

Page 28: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transitions

Page 29: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transitions

アニメーションの

始点と終点の設定

アニメーションの長さを設定

アニメーション全体の

速度進行を調節する

アニメーションの遅延の設定

Page 30: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transitions 4つのプロパティ 記述方法

transition-property

transition-duration

transition-timing-function

transition-delay

Page 31: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transitions 4つのプロパティ 記述方法

transitionを適用させるプロパティを設定する ・プロパティ名 (background-colorなど。カンマ区切りで複数設定も)・all (すべてのプロパティ)・none (適用しない)

transition-duration: 2s;

transitionの変化にかかる時間を設定する・s(秒数)・ms(ミリ秒数) この2つだけでも

アニメーションできる

transition-property: all;

Page 32: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transitions 4つのプロパティ 記述方法

アニメーションの加速や減速などを調節する

transition-delay: 0.5s;

イベントを起こしてから、アニメーションが開始するまでの時間設定・s(秒数)・ms(ミリ秒数)

transition-timing-function: ease-out;

・ease・linear

・ease-in・ease-out

・ease-in-out

Page 33: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transitions 4つのプロパティ 記述方法

ショートハンドで記述することも可能(半角スペースで区切る)

transition: background-color 2s linear;

アニメーション対象

アニメーションの長さ

減速や加速の設定

Page 34: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Transitions 4つのプロパティ 記述方法

ショートハンドで記述することも可能(半角スペースで区切る)

transition: background-color 2s linear;

アニメーション対象

アニメーションの長さ

減速や加速の設定

実際に動きを見てみましょうdemo

Page 35: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Animations

Page 36: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Animations

キーフレームによる

細かい指定

アニメーションを途中から変化できる

ユーザーアクションに

関係なく再生できる

無限ループが設定できる

Page 37: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

@keyframesでアニメーション名を定義して、フレームごとの設定を行う

@keyframes 'アニメーション名' {}

アニメーション始点

Animations

アニメーション終点

0% 50% 75% 100%

記述方法

Page 38: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

@keyframes 'animation' { 0% { background-color: #ff0b00; } 50% { background-color: #ffd800; } 100% { background-color: #54ff00; }}

Animations 記述方法

Page 39: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Animations 基本プロパティ

animation-name

animation-duration

記述方法

@keyframesで実行させたいアニメーションの名前を指定する

@keyframesで実行させたいアニメーション全体の長さを指定する・s(秒数)・ms(ミリ秒数)

この2つは必ず設定する

Page 40: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Animations 主な関連プロパティ 記述方法

transitionと同じ

アニメーションの加速や減速などを調節する

animation-delay: 0.5s;

アニメーションが開始するまでの時間設定・s(秒数)・ms(ミリ秒数)

animation-timing-function: ease-out;

・ease・linear

・ease-in・ease-out

・ease-in-out

Page 41: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Animations 主な関連プロパティ

再生する回数を設定する

animation-iteration-count: infinite;

・infinite (無限ループ)・数字   (再生回数)

通常再生するか、逆再生するかなど設定する

animation-direction: reverse;

・nomal・reverse・alternate・alternate-reverse

通常通りに再生常に逆再生する再生・逆再生と繰り返す逆再生・再生と繰り返す

Page 42: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Animations 主な関連プロパティ 記述方法

アニメーションの加速や原則などを調節する

animation-delay: 0.5s;

アニメーションが開始するまでの時間設定・s(秒数)・ms(ミリ秒数)

animation-timing-function: ease-out;

・ease・linear

・ease-in・ease-out

・ease-in-out実際に動きを見てみましょう

demo

Page 43: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

プロパティを組み合わせた制作例

Page 44: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Sample 1 transitionでナビゲーションに動きをつける

demo

Page 45: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Sample 2 transitionとtransformで 実装するナビゲーション

demo

Page 46: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

Sample 2 animationを使った装飾例

demo

Page 47: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS3 お役立ちツール

Page 48: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS3の実装は時間がかかる・・・

分かってるけど

書くのが大変ブラウザ対応確認するのが手間

コードがややこしい

時間がない!でも使いたい!

Page 49: さらに一歩踏み込んだ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/

Page 50: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS3 作成ツール

Animate.CSShttp://daneden.me/animate/

Styliehttp://jeremyckahn.github.com/stylie/

CSS3.0 MAKERhttp://www.css3maker.com/

CSS3 Sandboxhttp://westciv.com/tools/ transform

transitionanimationetc...

Page 51: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

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

Page 52: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

CSS3 作成ツール

border-image-generatorhttp://border-image.com/

CSS3PROPERTYS

Page 53: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

まとめ

Page 54: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

・案件の要件に応じて取り入れる

・プロパティの理解を深める

・効率化できるものは活用しよう

Page 55: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法

ありがとうございます!

Photo and Design sonsun

鍋坂理恵

[email protected] : @sonsunFacebook : sonsun