Download - さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法
![Page 1: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/1.jpg)
さらに一歩踏み込んだCSS3の使い方!
コツとポイントを理解して
楽しくサイトを彩る方法
Photo and Design sonsun
鍋坂 理恵
![Page 2: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/2.jpg)
鍋坂理恵Rie Nabesaka
香川県生まれのWebデザイナー制作会社で各種制作を経て独立カメラマンの夫・5歳の息子育児・家事・仕事に奮闘中
![Page 3: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/3.jpg)
CSS3について
![Page 4: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/4.jpg)
CSS3で実装するメリット
・画像を使わなくても実装できることが増えた
・従来では難しかった表現が可能に
・ファイルサイズの軽減
・アニメーションが軽い
・高解像度ディスプレイでもキレイ!
![Page 5: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/5.jpg)
http://www.findmebyip.com/litmus/
![Page 6: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/6.jpg)
主な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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/7.jpg)
主な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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/8.jpg)
主な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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/9.jpg)
Transforms, Transitions, Animations
アニメーション実装ができるプロパティ
![Page 10: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/10.jpg)
Transforms, Transitions, Animations
アニメーション実装ができるプロパティ
![Page 11: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/11.jpg)
http://www.findmebyip.com/litmus/
![Page 12: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/12.jpg)
記述方法を理解しよう
![Page 13: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/13.jpg)
Transforms
![Page 14: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/14.jpg)
Transforms
2D Transform 3D Transform
・・・拡大縮小、変形、回転、ゆがみ などの表現
translate
rotate
scale
skew
matrix
移動
回転
拡大縮小
ゆがみ(傾斜)
変形指定
translate
rotate
scale
skew
matrix
perspective
移動
回転
拡大縮小
ゆがみ
変形指定
遠近効果
![Page 15: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/15.jpg)
Transforms 記述方法
.box1 { transform: rotate(20deg); }
関数 値
![Page 16: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/16.jpg)
2D transform
.box1 { transform: rotate(20deg);}
CSS
<div class="box1">SAMPLE</div>
右回りに20度回転させる
記述方法
![Page 17: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/17.jpg)
2D transform 記述方法
.box1 { transform: skewX(15deg);}
CSS
X軸に15度傾斜させる
<div class="box1">SAMPLE</div>
![Page 18: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/18.jpg)
2D transform の基準点 記述方法
デフォルトでは要素の中央
![Page 19: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/19.jpg)
2D transform の基準点 記述方法
基準点を設定するtransform-originプロパティ
.box1 { transform-origin: 100% 100%; }
X軸 Y軸
left, right, top, bottomの指定も可能
![Page 20: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/20.jpg)
2D transform の基準点 記述方法
.box1 { transform: rotate(20deg);}
.box1 { transform: rotate(20deg); transform-origin: 100% 100%;}
![Page 21: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/21.jpg)
3D transform 記述方法
X軸、Y軸に加え、Z軸の指定が可能に
![Page 22: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/22.jpg)
3D transform 記述方法
X軸、Y軸に加え、Z軸の指定が可能に
perspective(遠近効果)
![Page 23: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/23.jpg)
3D transform 記述方法
奥行きを表現する、perspective関数
.box3 {transform: perspective(200) rotateY(20deg);}
.box3 {transform: perspective(80) rotateY(20deg);}
![Page 24: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/24.jpg)
3D transform 記述方法
perspectiveプロパティ
#container {perspective: 200;}
.box1 {transform: rotateY(50deg);}
.box2 {transform: rotateY(-50deg);}
![Page 25: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/25.jpg)
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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/26.jpg)
要素の裏返し 記述方法
裏面を表示させるかどうか backface-visibilityプロパティbackface-visibility: hidden; ・・・表示させないbackface-visibility: visible; ・・・表示させる
transform: rotateY(180deg);
X方向なら垂直に反転
![Page 27: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/27.jpg)
CSS3でアニメーション表現を行う、Transitions と Animations
アニメーション全体
始点 終点
transition
アニメーション全体
0% 50%
無限ループが可能
細かく設定できる 75% 100%
animation
![Page 28: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/28.jpg)
Transitions
![Page 29: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/29.jpg)
Transitions
アニメーションの
始点と終点の設定
アニメーションの長さを設定
アニメーション全体の
速度進行を調節する
アニメーションの遅延の設定
![Page 30: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/30.jpg)
Transitions 4つのプロパティ 記述方法
transition-property
transition-duration
transition-timing-function
transition-delay
![Page 31: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/31.jpg)
Transitions 4つのプロパティ 記述方法
transitionを適用させるプロパティを設定する ・プロパティ名 (background-colorなど。カンマ区切りで複数設定も)・all (すべてのプロパティ)・none (適用しない)
transition-duration: 2s;
transitionの変化にかかる時間を設定する・s(秒数)・ms(ミリ秒数) この2つだけでも
アニメーションできる
transition-property: all;
![Page 32: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/32.jpg)
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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/33.jpg)
Transitions 4つのプロパティ 記述方法
ショートハンドで記述することも可能(半角スペースで区切る)
transition: background-color 2s linear;
アニメーション対象
アニメーションの長さ
減速や加速の設定
![Page 34: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/34.jpg)
Transitions 4つのプロパティ 記述方法
ショートハンドで記述することも可能(半角スペースで区切る)
transition: background-color 2s linear;
アニメーション対象
アニメーションの長さ
減速や加速の設定
実際に動きを見てみましょうdemo
![Page 35: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/35.jpg)
Animations
![Page 36: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/36.jpg)
Animations
キーフレームによる
細かい指定
アニメーションを途中から変化できる
ユーザーアクションに
関係なく再生できる
無限ループが設定できる
![Page 37: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/37.jpg)
@keyframesでアニメーション名を定義して、フレームごとの設定を行う
@keyframes 'アニメーション名' {}
アニメーション始点
Animations
アニメーション終点
0% 50% 75% 100%
記述方法
![Page 38: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/38.jpg)
@keyframes 'animation' { 0% { background-color: #ff0b00; } 50% { background-color: #ffd800; } 100% { background-color: #54ff00; }}
Animations 記述方法
![Page 39: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/39.jpg)
Animations 基本プロパティ
animation-name
animation-duration
記述方法
@keyframesで実行させたいアニメーションの名前を指定する
@keyframesで実行させたいアニメーション全体の長さを指定する・s(秒数)・ms(ミリ秒数)
この2つは必ず設定する
![Page 40: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/40.jpg)
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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/41.jpg)
Animations 主な関連プロパティ
再生する回数を設定する
animation-iteration-count: infinite;
・infinite (無限ループ)・数字 (再生回数)
通常再生するか、逆再生するかなど設定する
animation-direction: reverse;
・nomal・reverse・alternate・alternate-reverse
通常通りに再生常に逆再生する再生・逆再生と繰り返す逆再生・再生と繰り返す
![Page 42: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/42.jpg)
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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/43.jpg)
プロパティを組み合わせた制作例
![Page 44: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/44.jpg)
Sample 1 transitionでナビゲーションに動きをつける
demo
![Page 45: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/45.jpg)
Sample 2 transitionとtransformで 実装するナビゲーション
demo
![Page 46: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/46.jpg)
Sample 2 animationを使った装飾例
demo
![Page 47: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/47.jpg)
CSS3 お役立ちツール
![Page 48: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/48.jpg)
CSS3の実装は時間がかかる・・・
分かってるけど
書くのが大変ブラウザ対応確認するのが手間
コードがややこしい
時間がない!でも使いたい!
![Page 49: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/49.jpg)
アニメーション作成ツール
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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/50.jpg)
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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/51.jpg)
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の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/52.jpg)
CSS3 作成ツール
border-image-generatorhttp://border-image.com/
CSS3PROPERTYS
![Page 53: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/53.jpg)
まとめ
![Page 54: さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法](https://reader034.vdocuments.mx/reader034/viewer/2022052311/55864c4fd8b42ae11f8b45af/html5/thumbnails/54.jpg)
・案件の要件に応じて取り入れる
・プロパティの理解を深める
・効率化できるものは活用しよう