生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでCSS3を学ぼう#16〜#17

ドットインストールさん

ご機嫌でプログラミング学習をしています。CSS3は、見た目がわかりやすいので楽しいですね!

 

f:id:ponnkichi:20180302215417p:plain

 

 CSS3は全19回なので、気持ちよく終了できるように

今回は#16と#17を学習します。

#16 ベンダープレフィックスを使おう

#15でまなんだtransformプロパティは、

can I useで調べてみると、実は注意書きがあるのです。

f:id:ponnkichi:20180302085142p:plain

can I useで調べると、各種ブラウザで、transformが使えるかどうか見せてくれます。

すると、とくにSafariで黄色の注意書きが表示されていますよね。

f:id:ponnkichi:20171219214742p:plain

「なんと、それは一大事じゃ」

 

 

日頃Safariを使っている私には、非常に重大な問題です。

f:id:ponnkichi:20180302085425p:plain

注意書きのところにマウスをのせると、このような説明が出てきます。

実際に、Safariのブラウザで見てみると、ちゃんと変形されていません。

f:id:ponnkichi:20180302085519p:plain

Chromeで見ると、このようになっているので

f:id:ponnkichi:20180228222805p:plain

transformがSafariでは動いていないのがわかります。

さあどうしましょう!

そのような時に使うのが

「ベンダープレフィックス」です。

ベンダープレフィックスの種類

ベンダープレフィックスは、ブラウザごとに決まっています。

これを追加することで、黄色の注意書きが出ていたブラウザでも

そのプロパティが使えるみたいです。

 

今回はSafariで動かすので、「webkit」を使います。

f:id:ponnkichi:20180228222805p:plain

このような形にするのに、オレンジ色のbox2の方は

このように記述されていました。

#box2{

background: orange;

opacity: .5;

transform: rotate(30deg);

}

 中心はデフォルトのままで、30度動かしますよ、という指示になっています。

これをSafariでもこのように表示するには、

#box2{

background: orange;

opacity: .5;

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

 普通の命令(この場合はtransform)の前に、

ベンダープレフィックスをつけた命令をもう1行書き入れます。

 

すると、Safari

-webkit-transform: rotate(30deg);

 

の方を見るし、

他のブラウザは

transform: rotate(30deg);

の方を見ます。

 

さあ、Safariで見てみましょう。

f:id:ponnkichi:20180302090547p:plain

やった!ちゃんと回転しています。

CSS3はまだまだこのような点があるので、

うまく動かない時にはcan I useを確認して

ベンダープレフィックスを使って行くことが必要になります。

f:id:ponnkichi:20180302085425p:plain

can I useに、「webkit」って書いてありますね!

 

#17 transitionを使ってみよう

次は、要素のアニメーションを作る「transition」について学びます。

今回は、簡単にdivが用意されています。

<body>

    <div></div>

</body> 

 そして、cssでこのように指定されています。

まずは、普通の状態のdiv。

 div{

width: 100px;

height: 50px

background: skyblue;

}

 幅が100px、高さが50px、背景色がスカイブルーになっています。

そのボックスの上にマウスが乗ると、このようになりますよというように

指定されています。

div:hover{

width: 200px;

height: 50px;

background: blue

 hoverというのは、CSS入門編の#06で擬似クラスについて学習した時、

「マウスがのったとき」として習いました。

 

通常のとき、ボックスはこのように表示されています。

f:id:ponnkichi:20180302213607p:plain

マウスが乗っていないときはこう。

f:id:ponnkichi:20180302213634p:plain

ボックスの上にマウスが乗るとこうなります。

hoverのことは完全に忘れていましたが、たのしいですね!

f:id:ponnkichi:20171219214742p:plain

バック・トゥ・ザ・フューチャー

未来の乗り物として出てきた

『ホバーボード』を思い出すよね」

ホバーボードと紐づけて覚えれば、忘れない気がする…!

 

 

************

さて、

このスカイブルーからブルーへの変化ですが、

マウスが乗ると一瞬で変わるのですが

この変わり方をアニメーション化しよう、というのがtransitionです。

 

transitionプロパティには、次のような種類があります。

transition-property (どのプロパティを指すのかを指示する)

transition-duration (変化にかかる時間)

transition-timing-function 

  ease (開始と終了がなめらかになる)

  linear (等速度でアニメーションしてくれる)

  ease-in (開始がゆっくり)

  ease-out  (終了がゆっくり)

  ease-in-out (開始と終了がゆっくり)

transition-delay (変化が開始するまでに何秒かかるか)

 これを、指定してみましょう。

 

最初のdivの続きに、このように記述します。

div{

width: 100px;

height: 50px

background: skyblue;

 

transition-property: all;

transition-duration: 2s;

transition-timing-function : ease;

transition-delay: 0.8s;

}

 どのプロパティを指すのかは、幅や高さ、色がありますが「all」で全部を指定します。

変化にかかる時間は2秒。

開始と終了がなめらかになるeaseを指定して、

変化が開始するまでの時間は0.8秒です。

 

この指定をしたあと、

f:id:ponnkichi:20180302213607p:plain

この状態からマウスを乗せると

f:id:ponnkichi:20180302213634p:plain

パッと変化するのではなく、ゆっくりなめらかに変化しました!

(なにせ画像ではお伝えできなくて申し訳ないです)

とってもおもしろいので、映像をご覧になってみてくださいね^皿^

#17 transitionを使ってみよう

 

これは楽しい!

CSS3ではアニメーションまで指定できるのですね。

 

ちなみに、これらは一気に指定することもできます。

div{

width: 100px;

height: 50px

background: skyblue;

 

transition: all 2s ease 0.8s;

}

このように並べることもできます。

「何秒」が2個並ぶことになってしまいますが、並べて指定をしたときには

1つ目が transition-duration (変化にかかる時間)

2つ目がtransition-delay (変化が開始するまでに何秒かかるか)

の順で指定されるそうです。

 

アニメーションを作るtransition。

ぜひとも使えるようになりたいです♪