【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 によって要素全体を覆うようにサイズを調整

• 背景を固定