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

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

鍋坂理恵
Rie Nabesaka

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

CSS3で実装するメリット

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

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

・ファイルサイズの軽減

・アニメーションが軽い

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

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

主なCSS3プロパティ

box-shadow CSS Animations FlexBox
text-shadow CSS Gradients CSS Columns
border-radius CSS Reﬂections Media Queries
opacity CSS 2D Transforms
rgba() hsla() CSS 3D Transforms

box-sizing CSS Transitions

Background Size
Multiple backgrounds
border-image




Background Size
border-image

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




Background Size
border-image

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

Transforms, Transitions, Animations

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

記述方法を理解しよう

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

2D Transform 3D Transform

translate 移動 translate 移動

rotate 回転 rotate 回転

scale 拡大縮小 scale 拡大縮小

skew ゆがみ(傾斜) skew ゆがみ

matrix 変形指定 matrix 変形指定

perspective 遠近効果

Transforms 記述方法

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

関数値

2D transform 記述方法

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

CSS

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

右回に
り
20度回転さる
せ


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

CSS

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

X軸に15度
傾斜させる

2D transform の基準点記述方法

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


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

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

X軸 Y軸

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


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

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

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

perspective（遠近効果）


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

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


perspectiveプロパティ

#container { .box1 { .box2 {
perspective: 200; transform: rotateY(50deg); transform: rotateY(-50deg);
} } }


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

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

要素の裏返し記述方法

transform: rotateY(180deg);
裏面を表示させるかどうか
backface-visibilityプロパティ
backface-visibility: hidden; ・・・表示させない
backface-visibility: visible; ・・・表示させる X方向なら
垂直に反転

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

transition

始点終点

アニメーション全体

animation

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

アニメーション全体

無限ループが可能

アニメ
ションのーショ
アニメー長さを
ンの
点の設定設定
始点と終

Transitions

アニメ
ョン全体のーショ
アニメーシる遅延の
ンの
を調節す設定
速度進行

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

transition-property

transition-duration

transition-timing-function

transition-delay


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

transition-duration: 2s;

transitionの変化にかかる時間を設定する
・s（秒数）
・ms（ミリ秒数）
こ２だで
のつけも
アメシン
ニーョ
でる
き


transition-timing-function: ease-out;
アニメーションの加速や減速などを調節する

・ease ・ease-in ・ease-in-out
・linear ・ease-out

transition-delay: 0.5s;

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


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

transition: background-color 2s linear;

アニメーション対象

アニメーションの長さ

減速や加速の設定


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

transition: background-color 2s linear;
実際に動きを
見てみましょ
う
アニメーション対象
demo

アニメーションの長さ

減速や加速の設定

アニメ
ムによるーショ
キーフレー途中かンを
ら変化
細かい指定できる

Animations

ションに無限ル
クープが
ユーザーアる設定で
再生でききる
関係なく

Animations 記述方法

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

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

0% 50% 75% 100%

アニメーションアニメーション
始点終点

Animations 記述方法

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

Animations 基本プロパティ記述方法

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

animation-duration
@keyframesで実行させたいアニメーション全体の長さを指定する
・s（秒数）

こ２は
のつ
必設す
ず定る

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

animation-timing-function: ease-out;
アニメーションの加速や減速などを調節する

・linear ・ease-out

animation-delay: 0.5s;

アニメーションが開始するまでの時間設定
・s（秒数）
transition
とじ
同

Animations 主な関連プロパティ

animation-iteration-count: infinite;
再生する回数を設定する

・inﬁnite （無限ループ）
・数字（再生回数）

animation-direction: reverse;
通常再生するか、逆再生するかなど設定する

・nomal 通常通りに再生
・reverse 常に逆再生する
・alternate 再生・逆再生と繰り返す
・alternate-reverse 逆再生・再生と繰り返す

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

animation-timing-function: ease-out;
アニメーションの加速や原則などを調節する

・linear 実際に動きを
・ease-out 見てみましょ
う
dem
animation-delay: 0.5s; o
アニメーションが開始するまでの時間設定
・s（秒数）

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

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

demo

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

demo

Sample 2 animationを使った装飾例

demo

どブラウ
分かってるけ確認す
ザ対応
変るのが
書くのが大手間

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

時間が
ない！
ややこしいでも使
コードがいたい
！

アニメーション作成ツール
Adobe Edge
http://www.adobe.com/jp/products/edge.html

Sencha Animator
http://www.sencha.com/products/animator/

Flash Professional CS6 / Toolkit for CreateJS
http://www.adobe.com/jp/products/ﬂash/ﬂash-to-html5.html/

CreateJS
http://www.createjs.com/

HTML5・CSS3
JavaScript

CSS3 作成ツール
Animate.CSS
http://daneden.me/animate/

Stylie
http://jeremyckahn.github.com/stylie/

CSS3.0 MAKER
http://www.css3maker.com/

CSS3 Sandbox
http://westciv.com/tools/ transform
transition
animation
etc...

Grad3
http://grad3.ecoloniq.jp/

cssarrowplease
http://cssarrowplease.com/

CSS3 Multi Column Layout Generator
http://www.aaronlumsden.com/multicol/

3D CSS Text Generator
http://www.3dcsstext.com/
CSS3
PROPERTYS

border-image-generator
http://border-image.com/

CSS3
PROPERTYS

・案件の要件に応じて取り入れる
・プロパティの理解を深める
・効率化できるものは活用しよう

ありがとございます
う！
Photo and Design sonsun
鍋坂理恵
info@sonsun33.com
Twitter : @sonsun
Facebook : sonsun

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

Recomendados

Recomendados

Más contenido relacionado

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

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