cssについて
id/class/要素 を指定した書き方について
.<class名>{}
/*
.nameClass {color: red;}
これもできる
<タグ名>.<class名> {color : black}
*/
#<id名> {}
/*
#nameId {color: blue;}
<タグ名>#<id名> {color : black}
*/
<タグ名> {}
/*
div { color: yellow;}
*/
/* 複数指定 は以下(タグ、id,classなんでもOKらしい) */
◯◯,xx,△△ {
}
変数ぽいものを扱ってみる
<html>
<head>
<style>
:root {
--color: red;
}
div {
color: white;
background-color: var(--color)
}
</style>
</head>
<body>
<!-- デフォルトの赤が表示される。 -->
<div>赤</div>
<!-- 指定した色が表示される。 -->
<div style="--color: blue;">青</div>
<div style="--color: gold;">金</div>
<!--
🚨未指定の場合、赤が表示される。(--colorが書き換わる訳ではない!!)
-->
<div>赤</div>
</body>
</html>
keyframeについて
@keyframes bnr-animation{
0% {width: 60px; background-color: #6cb371; }
50% {width: 234px; height: 60px; background-color: #ffd700; }
100% {width: 234px; height: 234px; background-color: #ff1493; }
}
@keyframes animation{
from{
/*アニメーションを開始するときのCSSを記述*/
}
to{
/*アニメーションを終了するときのCSSを記述*/
}
}
.box{
width: 60px; height: 60px; background: #6cb371;
animation-name: bnr-animation;
animation-duration: 10s;}