【CSS】その他のcssプロパティ

# 目次
1. [アルファチャンネル](#アルファチャンネル)
1. [position](#position)
1. [transition](#transition)
1. [transform](#transform)
1. [background](#background)
1. [GoogleFonts](#GoogleFonts)


# アルファチャンネル
重要度：重要

* アルファチャンネルとは：`rgba`の`a`のこと。
* `a`の役割：**不透明度**

例：
![スクリーンショット 2024-10-08 14.29.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/9752faf2-f2c5-ed5e-59ef-8c09593fc3a9.png)

```html:index.html
<div class="default">
  <p>デフォルト</p>
</div>

<div class="rgba-box">
  <p>背景だけが透明なボックス (RGBA)</p>
</div>

<div class="opacity-box">
  <p>ボックス全体が透明なボックス (Opacity)</p>
</div>
```
```css:index.css
/* デフォルトのボックス */
.default {
  background-color: red;
}

/* RGBAを使用した背景色 */
.rgba-box {
  background-color: rgba(255, 0, 0, 0.5); /* 背景のみ半透明 */
  color: black;
}

/* opacityを使用して要素全体に透明度を適用 */
.opacity-box {
  background-color: red;
  opacity: 0.5; /* 全体を半透明にする */
  color: black;
}
```

* **`rgba`の使い方**：cssで色を指定する時に、rgbに加えて`a`も**0~1の範囲**で指定する。（1が不透明、つまり見える状態）
　
    * 例では、真ん中の四角に対して、背景に不透明度を指定している。
　
* **`rgba`の特徴**：逆に、**背景にしか不透明度が設定できない！** 文字にも設定したい時はその都度、書かないといけない。

---

### 要素全部に不透明度を設定したいとき

**`opacity`を使う！**

例の、3つ目のボックス。

cssに`opacity: 0.5;`と指定するだけで、その要素全体に不透明度を設定できる。

　

# position
重要度：超重要

* `position`とは：**要素をどのように配置するか**設定するプロパティ

### static
* デフォルト
* `top`とか効果がない

例：
![スクリーンショット 2024-10-08 16.52.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/a3badf52-9747-dab7-6fdb-b612dd05bf8a.png)

```html:index.html
<section id="static">
  <h2>Static</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>
```
```css:index.css
#static .middle {
  position: static;
  top: 50px;
}
```
**コードの説明**：cssに`top: 50px;`を書いても反映されない。

---

### relative
* **static**の`top`, `right` , `bottom` , `left`の**効果があるバージョン**

#### もっと細かい説明
`relative` は、要素の**元の位置**を基準にして動かす。

* **元の位置**（通常配置される場所）はそのままキープされていて、要素はそこから指定された分だけ移動する。
* 例えば、`top: 50px` を指定すると、その要素は元の場所から**下に50pxだけ動く**けど、要素が元々あった場所のスペースは**そのまま残る**。


例：
![スクリーンショット 2024-10-08 17.03.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/26c0313c-6455-eb98-4827-37a996ca4e9f.png)


```html:index.html
<section id="relative">
  <h2>Relative</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>
```
```css:index.css
#relative .middle {
  position: relative;
  top: 50px;
}
```
**コードの説明**：cssの`top: 50px;`が反映されて、真ん中の図形が少し下にずれている。


つまり、**元の位置は保持されたまま、その位置を基準に動く**のが `relative` の特徴。

---


### absolute
* `absolute` をつけると要素は**その場で空間を作らない**。
* 動く基準が親要素にあるか、画面全体にあるかで**配置される場所が変わる**。
　

どう**配置される場所が変わる**か
cssに`top: 1px`, `left: 1px`を設定したとする
* 親や祖先に `position` が指定されていない場合（**基準がない場合**）：

    * 要素は**画面全体（`body`）の**左上に配置される。

* 親や祖先に `position` が指定されている場合（**基準がある場合**）：

    * その要素は、**その親や祖先の**左上に配置される。
　

例：親や祖先に `position` が指定されている場合（**基準がある場合**）

![スクリーンショット 2024-10-08 18.42.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/4c5d37ee-7d90-ca68-8847-156141430790.png)


```html:index.html
<section id="absolute">
  <h2>Absolute</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>
```
```css:index.css
section {
  position: relative; /* 基準となる要素 */
}

#absolute .middle {
  position: absolute;
  top: 1px;
  left: 1px;
}
```
**コードの説明**：真ん中にあったはずの青色の図形は、 `section` を基準にして、上から1px、左から1px の位置に配置されている。

---


### fixed
* `fixed` をつけると、要素を**画面全体に固定**して、スクロールしてもその場所から動かないようにできる。
* `fixed` を使った要素は、`absolute`同様、**その場で空間を作らない**。


例：

![スクリーンショット 2024-10-08 21.04.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/45388886-4eba-4278-e1cc-be3c53870d0c.png)


```html:index.html
<section id="fixed">
  <h2>Fixed</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>
```
```css:index.css
#fixed .middle {
  position: fixed;
  top: 1px;
  left: 1px;
}
```
**コードの説明**：`position: fixed;`を設定した青色の図形は、画面の**左上に固定**され、スクロールしてもその場所に居続ける。



---


### sticky
* スクロールでその場所を超えるまでは**通常のレイアウトとして動き**、そこを超えたら**画面内に居続ける**

---

### MDN

https://developer.mozilla.org/ja/docs/Web/CSS/position


# transition
重要度：超重要

#### 説明
* 対象の要素に対して、何秒アニメーションかけるか、どういう動きをかけるかを指定できる。

* `transition-timing-function`を使うと、個別にどういう動きかを指定できる。

* `transition-timing-function`を使う時の、アニメーションの参考サイト

https://easings.net/


#### 使用例

ボタンにホバーすると、1秒かけて色が変わる
デフォルト
![スクリーンショット 2024-10-09 18.08.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/7e82b3f0-89e1-55f4-ca3f-49d0aab2adb7.png)
ホバー後
![スクリーンショット 2024-10-09 18.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/c4e261af-79b1-3170-3a94-af961f629bae.png)


```html:index.html
<body>
    <button class="transition-button">Hover Me</button>
</body>

```
```css:index.css
/* 初期のボタンスタイル */
.transition-button {
    transition: background-color 0.3s ease; /* 背景色の変化に0.3秒のトランジションを適用 */
}

/* ホバー時のボタンスタイル */
.transition-button:hover {
    background-color: lightcoral; /* 背景色が赤系に変化 */
}

```

#### 書き方
`transition: background-color 0.3s ease;`
`transition: プロパティ名 | 再生時間 | イージング関数 ;`
* 「**どのプロパティに、何秒かけて、どういう動きをさせるか**」を設定
* 「**どのプロパティに**」は必ず書く
* 待ち時間を付け足すと、ホバーして1s待ってから動くみたいなのもできる
* 詳しくはMDNの構文を参考に

#### メモ
cssだけでこんなにアニメーションつけれるのにびっくり

#### MDN

https://developer.mozilla.org/ja/docs/Web/CSS/transition


# transform
重要度：知っておくといい

#### 説明
* 回転させたり、歪ませたり、スケールをいじったりできる。
* 詳しくはMDNの構文を見る。
* transformの特徴：要素に入ってる全部のコンテンツにtransformが適応される。


#### 使用例

ホバーした時に、ボックスを45度回転、1.5倍に拡大、右に50px・下に50px移動、20度横方向・10度縦方向に傾ける

![スクリーンショット 2024-10-10 10.44.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/f3dc24e7-c08c-8447-b6d5-2dc0d0d1cc2b.png)


```html:index.html
<body>
    <div class="rotate">Rotate</div>
    <div class="scale">Scale</div>
    <div class="translate">Translate</div>
    <div class="skew">Skew</div>
</body>
```
```css:index.css
/* 回転 */
.rotate:hover {
  transform: rotate(45deg); /* 要素を45度回転 */
}

/* 拡大縮小 */
.scale:hover {
  transform: scale(1.5); /* 要素を1.5倍に拡大 */
}

/* 移動 */
.translate:hover {
  transform: translate(50px, 50px); /* 要素を50px右、50px下に移動 */
}

/* 傾斜 */
.skew:hover {
  transform: skew(20deg, 10deg); /* 要素を20度横、10度縦に傾ける */
}
```

#### 書き方
* `rotate(45deg)`： 要素を45度**回転**させる
* `scale(1.5)`: 要素を1.5倍に**拡大**する
* `translate(50px, 50px)`: 要素を**右に50px、下に50px移動**させる
    * `translate（X軸 , Y軸）`
* `skew(20deg, 10deg)`: 要素を**20度横方向に、10度縦方向に傾ける**

#### メモ
* これにtransitionでアニメーションつけたら、ホバー時に動きがついたボタンが作れる。

#### MDN

https://developer.mozilla.org/ja/docs/Web/CSS/transform


# background
* 背景色の代わりに、画像を背景にできる
* coverにすると縦横比は保ったまま、画面を埋めてくれる
* 画像のどこを基準に表示するかも指定できる。下が基準とか

おしゃれな画像が得られるサイト

https://unsplash.com/ja

#### MDN

https://developer.mozilla.org/ja/docs/Web/CSS/background


# GoogleFonts

https://fonts.google.com/

#### 説明
* ユーザーがフォントを持ってなくても、開く時にフォントをダウンロードするから誰にでもそのフォントが適応されちゃう。便利。
* しかも無料
* 複数のフォントを一文でダウンロードできるけど、フォントが多すぎると重くなるから注意

#### 使い方
![スクリーンショット 2024-10-10 10.58.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/da875484-9e56-4c64-95e2-dffc82fed8fe.png)

「Get font」＞「Get embet code」＞画像の画面

この画面になったらコードをコピーして貼れば使える。