【WEB制作×勉強】Day30①
ポートフォリオ動画とともに作成→オリジナルポートフォリオ作成→サーバー契約、ドメインゲットまでの流れを一気にやってnoteでの記録が止まってしまってた…！
色々初めて事が多くてメモだけ残したけど、
今後使ってかないとまた忘れそう〜
復習もしたいけど、中級、上級に進んで新しい事も学びたいー！時間がいくらあっても足りないよー😂
position sitcky
ウェブページをスクロールするときに、ある要素（例えば、見出しやメニュー）が画面の特定の位置に来たときに、その場所に「くっついて」動かなくなるようにすることができる
flex-basis
flex-basisはdisplay: flexを使用したときに使うプロパティ。具体的には、フレックスボックスの子要素（flexアイテム）の基本的な大きさを指定するために使う。width heightとの違いはどちらも大きさを指定するものではあるが、違いは以下の2点↓↓↓
flex-basisは、フレックスボックスの方向（横並びか縦並びか）によって、幅（width）か高さ（height）を決める。例えば、横並びの場合は幅、縦並びの場合は高さになる。
フレックスボックスの中では、flex-basisがwidthよりも優先される。つまり、両方を指定した場合、flex-basisの値が使われる。
transition
ＣＳＳの基本構文↓
transition: [property] [duration] [timing-function] [delay];
・transition-property:
変化させるプロパティを指定します。allを使うと、すべてのプロパティが対象になる。
・transition-duration:
変化にかかる時間を指定します。秒（s）やミリ（ms）で指定する。
・transition-timing-function:＊
変化の速度を指定します。ease, linear, ease-in, ease-out, ease-in-outなどがある。
・transition-delay:
変化が始まるまでの遅延時間を指定する。
使用例↓↓
このコードでは、ボタンにマウスをホバーすると、背景色が青から緑に、文字色が白から黒に0.3秒かけて変化する。
.button {
background-color: blue;
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
background-color: green;
color: black;
}
ポイント
transitionプロパティは通常の状態に指定し、変化後の状態は擬似クラス（例: :hover）で指定する。
複数のプロパティをカンマで区切って指定できる。
*transition-timing-function
1. ease
初期状態：ゆっくり始まる
中間状態：速く進む
最終状態：ゆっくり終わる
効果：自然な加速と減速を伴う滑らかな動きになります。多くのケースでデフォルトとして使われる。
2. linear
すべての瞬間に同じ速度で変化します。加速や減速は一切なく、一定のペースで変化するのが特徴。
効果：機械的な動きや、均一なアニメーションを作成したい場合に使用。
3. ease-in
初期状態：ゆっくり始まる
中間状態～最終状態：加速して終わる
効果：徐々に加速していくので、要素が「滑り出す」ような動きを表現できる。
4. ease-out
初期状態～中間状態：速く始まる
最終状態：ゆっくり終わる
効果：最初に速く進んで、後半はゆっくりになるので、「滑り止まる」ような動きを表現できる。
5. ease-in-out
初期状態：ゆっくり始まる
中間状態：速く進む
最終状態：ゆっくり終わる
効果：easeに似ていますが、ease-inとease-outを組み合わせたような動きで、最初と最後がゆっくり、中間が速くなります。非常に自然な動きを作るのに向いている。
.element {
transition: all 0.5s ease-in-out;
}この例では、すべてのプロパティの変化が0.5秒かけて「ゆっくり始まり、速く進み、ゆっくり終わる」というアニメーションになる。
background
複数の背景プロパティをまとめて1つのbackgroundプロパティとして指定することができる。
【例】
background: url('image.png') no-repeat center center / cover fixed;画像 image.png を背景に設定
繰り返しなし
画像を中央に配置
cover によって要素全体を覆うようにサイズを調整
背景を固定