●トップ > HTML5+CSS3

HTML5+CSS3

８回目　ＣＳＳで位置を移動させてみる

2014-11-26

位置を移動

位置移動でござる

--[ html ]-----------------------
<section>
<h1 class="ugokasu1">位置移動でござる</h1>
</section>

--[ CSS ]------------------------
.ugokasu1{
	  animation: ugokuzo 8s;
	  animation-iteration-count: 5;
	  -webkit-animation: ugokuzo 8s; /* Safari & Chrome */
	  -webkit-animation-iteration-count: 5;
	  background: #ff3366;
	  border-radius: 10px;
 	  color: #ffffff;
	  font-size: 14px;
 	  margin-bottom: 30px;
 	  padding: 10px;
 	  width: 200px;
}

	@keyframes ugokuzo {
	  0%   { transform:  translate(0px, 0px);    }
	  50%  { transform:  translate(300px, 0px);   }
	  100%   { transform:  translate(0px, 0px);    }
	}
	@-webkit-keyframes ugokuzo {
	  0%   { -webkit-transform:  translate(0px, 0px) ;   }
	  50%  { -webkit-transform:  translate(300px, 0px);   }
	  100%   { -webkit-transform:  translate(0px, 0px) ;   }
	}

こちら、ベンダープレフィックスの記載必要

それでもＩＥ９では利用できないようです
未対応ブラウザのために　単色の背景も設定すること。

・linear-gradient 線形グラデーション
・radial-gradient　円形グラデーション←あまり使えそうにないのでお試し省略

ピンクでグラデーション

--[ html ]-----------------------
<section>
<h1 class="gurade1">ピンクでグラデーション</h1>
</section>

--[ CSS ]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

--[ CSS 失敗]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
0deg,　　
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
0deg,
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

５回目　①＋② 応用 / ページ読み込みで動く

2014-11-17

波とイルカ

--[ html ]-----------------------

 <div id="hani">
    <span class="animation-nami"></span>
    <span class="iruka2"></span>
    </div>

--[ CSS ]------------------------
｛animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向｝
＠keyframes キーフレーム名｛～｝

#hani{
    height: 100px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#hani span {position:absolute;}

.animation-nami{
width:100%; 
height:30px; 
z-index:10; 
left:0; 
bottom:0; 
background-image:url(images/nami.png);
}

.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}

@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}

.iruka2{ 
        background-image:url(images/iruka1.png) ;
	width:160px;
	height:160px;
        z-index:5;
        bottom:-110px;
 	-webkit-animation:irukamawaru2 6s linear infinite normal;
	animation:irukamawaru2 6s linear infinite normal;
}

@keyframes irukamawaru2{
	0%	{}
	100%	{transform: rotate(360deg);}
}

角丸でござる

--[ html ]-----------------------
<section>
<h1 class="midasi1">角丸でござる</h1>
</section>

--[ CSS ]------------------------
.midasi1{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

角丸とテキストに影

角丸とテキストに影でござる

--[ html ]-----------------------
<section>
<h1 class="midasi2">角丸とテキストに影でござる</h1>
</section>

--[ CSS ]------------------------
.midasi2{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    box-shadow: 20px 20px 10px 0px black;
    text-shadow: 1px 1px 3px #000;
}

見出しを斜めに

見出しを斜めにでござる

--[ html ]-----------------------
<section>
<h1 class="midasi3">見出しを斜めにでござる</h1>
</section>

--[ CSS ]------------------------
.midasi3{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

４回目　②ページ読み込みで動く/要素を回転表示する -transform:rotate-

2014-11-17

@keyframes　キーフレーム名{
　 0% { transform: rotate(角度deg);}
100% { transform: rotate(角度deg);}
}

個別表示

・transform:rotate() ()要素を回転表示する

補間方法　animationn-timing-function

・normal　順方向（時計回り）初期値
・alternate　奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse　逆回り　←一部動かないなどの不具合有
・alternate-reverse　初回のアニメーションは逆方向に実行し、次は順方向

角度　deg

・deg　角度

補間方法　animationn-timing-function

・rotate(回転角度)　rotate()関数では、角度によって2D回転を指定します。
・rotateX(回転角度)　　X軸を軸とする角度によって時計回りの回転を指定します。
・rotateY(回転角度)　　Y軸を軸とする角度によって時計回りの回転を指定します。
・rotateZ(回転角度)　　Z軸を軸とする角度によって時計回りの回転を指定します。
・rotate3d(数値, 数値, 数値, 回転角度)

回る

--[ html ]-----------------------

<div class="anime01a"></div>

--[ CSS ]------------------------
.anime01a{
	background:#000;
	color:#fff;
	width:100px;
	height:10px;
	margin:40px 0;
	-webkit-animation:anime01a 5s infinite alternate;
	animation:anime01a 5s infinite alternate;
}

@-webkit-keyframes anime01a{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes anime01a{
	0%	{}
	100%	{transform: rotate(360deg);}
}

回るイルカ

--[ html ]-----------------------

<div class="iruka"></div>

--[ CSS ]------------------------
｛animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向｝
＠keyframes キーフレーム名｛～｝

.iruka{ 
background:url(images/iruka1.png);
width:160px;
height:160px;
margin:40px 0;
-webkit-animation:irukamawaru 5s linear infinite normal;
animation:irukamawaru 5s linear infinite normal;
}

@-webkit-keyframes irukamawaru{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes irukamawaru{
	0%	{}
	100%	{transform: rotate(360deg);}
}

３回目　①ページ読み込みで動く -animation-

2014-11-17

animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向

｛animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向｝
＠keyframes キーフレーム名｛～｝

個別表示

・キーフレーム名　animation-name
・再生時間　 animation-duretion
・補間方法 animationn-timing-function
・ディレイ animation-delay(アニメ開始を遅らせる時間)
・繰り返し　animation-iteration-count
・方向　animation-direction

補間方法　animationn-timing-function

・ease 最初と最後を滑らかに変化
・linear 一定の速度で変化
・ease-in 最初をゆっくり変化
・ease-out 最後をゆっくり変化
・ease-in-out 最初と最後をゆっくり変化

繰り返し　animation-iteration-count

・infinite　デフォルトの回数は1だがこちらを指定すると永遠に繰り返し実行される
・回数

方向　animation-direction

・normal　順方向（時計回り）　初期値
・alternate　奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse　逆回り
・alternate-reverse　初回のアニメーションは逆方向に実行し、次は順方向

ゆっくり傾く

--[ html ]-----------------------

<div class="anime11"></div>

--[ CSS ]------------------------

.anime11{
	background:#003d84;
	color:#fff;
	margin:25px 0;
	width:100px;
	height:10px;
	-moz-animation:anime11 5s infinite alternate linear;
	-webkit-animation:anime11 5s infinite alternate linear;
	animation:anime11 5s infinite alternate linear;
}
@-webkit-keyframes anime11{
	0%	{}
	100%	{-webkit-transform: skewY(-15deg);}
}
@keyframes anime11{
	0%	{}
	100%	{transform: skewY(-15deg);}
}

応用・・・波

--[ html ]-----------------------

<div class="animation-nami"></div>

--[ CSS ]------------------------

.animation-nami{
width:100%; 
height:30px; 
z-index:10; 
left:0; 
bottom:0; 
background-image:url(images/nami.png);
}

.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}

@-webkit-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-moz-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-o-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-ms-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}

２回目　マウスオーバーで変わる -transition-

2014-11-14

transition:再生時間　プロパティ　補間方法　ディレイ

｛transition:再生時間　プロパティ　補間方法　ディレイ｝

個別表示

・再生時間　 transition-duretion
・プロパティ transition-property
・補間方法 transition-timing-function
・ディレイ transition-delay

補間方法

角を丸く

--[ html ]-----------------------

<div class="anime01"></div>

--[ CSS ]------------------------

.anime01{
	background:#003d84;
	color:#fff;
	padding:10px;
	width:200px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime01:hover{
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
}

複数のプロパティを同時に変更

■リンクを貼ってみました

お問い合わせはこちら

--[ html ]-----------------------
<div id="anime06"><a href="/contact/">お問い合わせはこちら</a></div>

--[ CSS ]------------------------
★背景色とテキスト色と幅が1秒で変化するCSS

div#anime06 {
	background-color: #003d84;
	width: 150px;
	padding:10px;
	-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
	transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div#anime06 a{
        color: #fff;
}

div#anime06:hover{
	background-color: #ffeb00;
	color: #000;
	width: 300px;
}

div#anime06 a:hover{
	color: #000;
}

１回目　CSSを書くにあたって「ベンダープレフィックス」

2014-11-14

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、
それらの機能を動作させるには、現状ではプロパティや値の先頭に-moz-や-webkit-などの
ベンダープレフィックスを付ける必要があるようです。
© 引用サイト⇒ベンダープレフィックスさまサイトより）

★動くCSS3を書くにあたって、必ずHTML5で書くこと！

■ 主要ブラウザのベンダープレフィックス

-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-o-　　　　…… Opera
-ms-　　　…… Internet Explorer


■ border-imageプロパティで画像ボーダーを機能させるには、 
FirefoxやGoogle Chromeなどのそれぞれのブラウザ向けのベンダープレフィックスを付ける必要があるようです。

-moz-border-image: url("bg_dot.png") 15 round;　　　　 // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round;　　　// Google Chrome、Safari向け

CSS3が勧告されるまでには、まだ時間がかかりそうですし、
動くデザインはとても魅力なんですが、
Firefoxなどのブラウザでは一部がベンダープレフィックス無しで動作するようになっている一方、
新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるようです。

ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、
今後の仕様策定の進展やブラウザのバージョンアップに備えて、
ベンダープレフィックス無しの指定を併記しておくほうが良いようです。

 border-image: url("bg_dot.png") 15 round;　　　　 　　　　//ベンダープレフィックス無し（標準）も併記する
-moz-border-image: url("bg_dot.png") 15 round;　　　　 // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round;　　　// Google Chrome、Safari向け

う～～～～ん。。動くデザインはかっこいいんだけれど、
ちょっと面倒かなあ。
すべてのブラウザで同じ動作がみられないと、クレームきそうだし。。悩む。。

鹿児島のフリーランスWebデザイナーのブログ｜小田聖夏

未経験からWebクリエイターに転身して20年以上の経験を持つ。デジタルハリウッドSTUDIOやヒューマンアカデミーで講師としても活動中。

HTML5+CSS3

８回目　ＣＳＳで位置を移動させてみる

位置を移動

７回目　CSS見出しをグラデーションで♪

こちら、ベンダープレフィックスの記載必要

ピンクでグラデーション

ピンクでグラデーション

５回目　①＋② 応用 / ページ読み込みで動く

波とイルカ

６回目　CSS見出し

角丸

角丸でござる

角丸とテキストに影

角丸とテキストに影でござる

見出しを斜めに

見出しを斜めにでござる

４回目　②ページ読み込みで動く/要素を回転表示する -transform:rotate-

個別表示

補間方法　animationn-timing-function

角度　deg

補間方法　animationn-timing-function

回る

回るイルカ

３回目　①ページ読み込みで動く -animation-

animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向

個別表示

補間方法　animationn-timing-function

繰り返し　animation-iteration-count

方向　animation-direction

ゆっくり傾く

応用・・・波

２回目　マウスオーバーで変わる -transition-

transition:再生時間　プロパティ　補間方法　ディレイ

個別表示

補間方法

角を丸く

複数のプロパティを同時に変更

１回目　CSSを書くにあたって「ベンダープレフィックス」

HTML5+CSS3

位置を移動

こちら、ベンダープレフィックスの記載必要

ピンクでグラデーション

ピンクでグラデーション

波とイルカ

角丸

角丸でござる

角丸とテキストに影

角丸とテキストに影でござる

見出しを斜めに

見出しを斜めにでござる

個別表示

補間方法 animationn-timing-function

角度 deg

補間方法 animationn-timing-function

回る

回るイルカ

animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向

個別表示

補間方法 animationn-timing-function

繰り返し animation-iteration-count

方向 animation-direction

ゆっくり傾く

応用・・・波

transition:再生時間 プロパティ 補間方法 ディレイ

個別表示

補間方法

角を丸く

複数のプロパティを同時に変更

補間方法　animationn-timing-function

角度　deg

補間方法　animationn-timing-function

animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向

補間方法　animationn-timing-function

繰り返し　animation-iteration-count

方向　animation-direction

transition:再生時間　プロパティ　補間方法　ディレイ