【CSS】ボックスモデル

# 目次
<img width="350" src="">

1. [ボックスモデル](#ボックスモデル)
2. [Border](#border)
3. [Padding](#padding)
4. [Margin](#margin)
5. [Displayプロパティ](#displayプロパティ)
   - 5.1 [インライン要素とブロック要素](#インライン要素とブロック要素)
   - 5.2 [inline-block](#inline-block)
   - 5.3 [display: none](#display-none)
6. [単位](#単位)
   - 6.1 [%（パーセント）](#-パーセント)
   - 6.2 [em](#em)
   - 6.3 [rem](#rem)


# ボックスモデル

ボックスモデルは、以下の4つの領域で構成されている。

- **Content**： 要素自体の中身
- **Border**： 要素の外周を囲む枠
- **Padding**： コンテンツとボーダーの間のスペース
- **Margin**： ボーダーの外側のスペース

開発者ツールでそれぞれ色分けされて表示されている。
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/d6b6d8a7-17ee-a13c-5052-e936d7f40c4b.png">

　

# Border

枠線

#### 例
```css:index.css
div {
  border: 2px solid red;  /* 2pxの赤いボーダー */
  border-radius: 50px;  /* 角を丸くする */
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/df936b8b-bf90-47b8-9d3a-4cded1ac76ef.png">


* **`border-radius`** を使って角を丸くすることができる

　

# Padding

内側の隙間

#### 例
```css
div {
  padding: 20px 30px;  /* 上下に20px、左右に30px */
}
```
![スクリーンショット 2024-10-05 19.21.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/21b677bb-2c26-4b6d-4e9f-55ec3eeb63a1.png)

#### 設定する時の種類
- **上下 / 左右** の設定: `padding: 10px 20px;`
- **上 / 左右 / 下** の設定: `padding: 10px 20px 30px;`
- **上 / 右 / 下 / 左** の設定: `padding: 10px 20px 30px 40px;`

　

# Margin

外側

#### 例
```css
div {
  margin: 10px 15px;  /* 上下に10px、左右に15pxのマージン */
}
```
![スクリーンショット 2024-10-05 19.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/f829c4ad-dc9d-968f-e276-6fb875e0c6f2.png)
* 画像の**オレンジの部分**が`margin`
* 細い**黄色い部分**が`border`
* **黄緑の部分**が`padding`
* **水色の部分**がコンテンツ

　
# Displayプロパティ

要素がインライン要素かブロック要素かを指定する

- **ブロックレベル要素**とは：`h1`, `div` など、幅と高さを持ち、改行される要素
- **インライン要素**とは： `span`, `a` など、テキストのように横並びになる要素

![スクリーンショット 2024-10-05 19.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/1e5aa7ad-298c-5259-5396-ba6f5c1bb238.png)


#### 例
```css
h1 {
  display: inline;  /* h1をインライン要素に変更 */
}
span {
  display: block;   /* spanをブロックレベル要素に変更 */
}
```
![スクリーンショット 2024-10-05 19.49.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/2bec91cf-6630-e457-cfca-479702ab9f46.png)
↑`h1`がブロックレベル要素になって、`span`がインライン要素に変わった！

---

### ブロックレベル要素とインライン要素の特徴
* **ブロックレベル要素**：`width`や`height`、`padding`、`margin`がすべて適用される
* **インライン要素**：`width`や`height`は適用されず、`padding`や`margin`は横方向にしか適用されない

でも、インライン要素に`width`や`padding`を適用させたい！

そんなときは！
#### **`inline-block`**
インライン要素のように横並びにしつつ、幅や高さ、マージン、パディングも適用可能にする。

```css
span {
  display: inline-block;
  width: 100px;
  height: 50px;
  padding: 10px;
  margin: 20px;
}
```
![スクリーンショット 2024-10-05 20.01.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/be9f86f1-39ba-0ddd-a82b-d8ca1fab112f.png)
インライン要素のspanに、marginなどで余白ができてる！

---

#### **`display: none;`**
要素を完全に非表示にする。

```css
div {
  display: none;
}
```

　

# 単位

### % （パーセント）
**親要素に対して**相対的なサイズを指定する

例：

```html:index.html
<body>
    <div>親要素はbody</div>
</body>
```
```css:index.css
div {
  width: 50%;  /* 親要素の幅の50% */
}
```
`div`の幅は親要素（`body`）の幅の50%を指定する。

　

 **例外**
 * **line-height**：
     行の高さを指定するプロパティ。
     このプロパティで%を使った場合、**その文字の大きさに対して**、動作する。

```css
h1 {
  font-size: 40px;
  line-height: 200%;  /* 行の高さは80px */
}
```
この場合、行の高さはh1のフォントサイズの2倍になる。

---

### **em**

#### `font-size`の場合
**親要素に対して**相対的なサイズを指定する

例：

```html:index.html
<div>
    <p>親要素はdiv</p>
</div>
```
```css:index.css
div {
  font-size: 50px;  
}

p {
  font-size: 2em;  /* 親要素のフォントサイズの2倍、つまり100px */
}
```

この場合、親要素の`div`のフォントサイズが50pxなので、`div`の中にある`p`は`2em`つまり、100pxとなる。


#### `font-size`以外の場合
**その要素自身**の`font-size`を基準とする

例：
```css:index.css
div {
  font-size: 20px;  
  padding: 2em; /* 20pxの2倍の40pxのパディング */
}
```

#### emが便利な場面
* 親要素の `font-size` を変更すると、`em` で指定した値が全て連動して変更される
* これにより、全体のデザインを一括で調整できる

#### emの問題点
* emを使用する際に、階層構造が深くなると問題が発生することがある
* ul>li>ul>li>ul>liがあったとして、そこにul1.5emを指定すると、
ulがでるごとに1.5倍されるからどんどんデカくなっちゃう

例：
```html:index.html
<ul>
  <li>最初のリスト項目</li>
  <ul>
    <li>ネストされたリスト1</li>
    <ul>
      <li>さらにネストされたリスト2</li>
      <ul>
        <li>さらにさらにネストされたリスト3</li>
      </ul>
    </ul>
  </ul>
</ul>
```
```css:index.css
ul {
  font-size: 1.5em; /* 1.5倍にする */
}
```
![スクリーンショット 2024-10-07 20.15.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/ba8e9d37-4f70-2e63-ed66-a5df9796d3d8.png)
だんだんおっきくなっていっちゃう。

---
そこで！
### **rem**
**ルート要素**の`font-size`を基準とした相対単位

* **ルート要素**とは：htmlタグ

* ルート要素の`font-size`が20pxなら`1rem`は必ず20pxになり、`2rem`は必ず40pxになる

例：

```html:index.html
<html lang="ja" style="font-size: 20px;">
<body>
    <h1>これは2remの見出しです</h1>
    <p>これは1.5remの段落です</p> 
</body>
```
```css:index.css
h1 {
    font-size: 2rem; 
}

p {
    font-size: 1.5rem; 
}
```
* `h1`：ルート要素のfont-size (20px)の2倍、つまり40px
* `p`：ルート要素のfont-size (20px)の1.5倍、つまり30px


### em と rem の簡単な使い分け
* `em` ：親要素に合わせて **個別の要素**のサイズを調整したいときに使う。
    * 例: **ボタンやカード内の文字や余白**を、親要素に合わせて変動させたいとき。
　
* `rem` ：サイト全体で **統一された基準**を持たせたいときに使う。
    * 例: ルートフォントサイズを基準に、**全体の文字やレイアウト**を調整しやすくする。