CSSの装飾
たくさんプロパティがあるが、全部覚えなくてもよい
しかし、初期値についてはしっかり理解しておく必要がある
background-size
cover: 画像で覆う 全体
contain: 比率を保ったまま全体をうつす 画像が繰り返す
background-repeat: no-repeat; で繰り返しを無しに設定する
重要な画像はHTMLに書いてalt属性を活かすほうがよい （SEO的に
背景などはCSSでおｋ
キービジュアルは重要なのでHTMLに！
HTML <img scr=”” alt=””> ☞ object-fit を使う backgroundは効かない
変形アニメーション
transform 前の状態と後の状態を書く
transition 時間を決める
:hover {}は hoverには差分のみ記述する
transition-timing-function 変形の仕方
ease linear ease-in ease-out ease-in-out いろいろ試してみる
transitionの特徴
・始点と終点を結ぶ
・一回のみ
・スタートにはhoverなどのユーザーアクションが必要
・往復で効果を適用できる
animationの特徴
・始点終点以外にもいくつも追加できる
・一回だけでなくループ、逆再生もおｋ
・ユーザーアクションなくてもページ読み込みだけで自動再生できる
・hoverでの往復は個別に指定しなければならないのでめんどくさい
@keyframes アニメーション名{}
今日のひるごはん
