webプログラミング講座 14日目

2日休んで、今日からまたWEBの学校

毎日、新しい発見があり楽しみで来ています。

 

今日は、先週からの続きでホームページ作りですが、家でヘッダだけ作ってきていたのにUSBの取り込み損ねていてない(汗

まだ制作の日にちがあるので大丈夫ですが、サイト作りは中々難しく自分のセンスのなさに情けない思いをしています。

午前中は、ホームページ作りの自習!

 

午後からは少し授業

CSS3で使えるようになったタグとCSSのレイアウトで知っておきたいブロックレベル要素、アニメーションなどをサッと解説

私のレベルでは、聞いてるだけで理解するまでは無理でしたが、この様なタグを入れるだけでいろいろな事がCSSだけで出来る事だけは理解しました。

 

ボタンなどを変化させる

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
div{
width: 100px;
height: 50px;
background: lightblue;
/* アニメーション */
/*
transition-property: width, height, background;
transition-duration: 1s;
transition-timing-function:ease-out;
transition-delay:0.5s;
*/
-webkit-transition: all 1s ease-out 0.5s;
}
div:hover{
width: 200px;
height: 100px;
background: lightgreen;
}

</style>
</head>
<body>
<div>アニメーション</div>
</body>
</html>

 

アニメーションHTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
div{
/*
width: 100px;
height: 50px;
background: lightblue;
*/
/* アニメーション指定 */
/*
animation-name: btn;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;*/
/*まとめて記述*/
-moz-animation: btn 2s ease-out 0s infinite alternate;  /* firefox */
-webkit-animation: btn 2s ease-out 0s infinite alternate; /* chrome/safari */
animation: btn 2s ease-out 0s infinite alternate;
}
@-webkit-keyframes btn{  /* chrome/safari */
0%{
width: 100px;
height: 50px;
background: lightblue;
}
100%{
width: 200px;
height: 100px;
background: lightgreen;
}
}
@keyframes btn{
0%{
width: 100px;
height: 50px;
background: lightblue;
}
100%{
width: 200px;
height: 100px;
background: lightgreen;
}
}
</style>
</head>
<body>
<div>アニメーション</div>
</body>
</html>

 

今日の弁当
001