HTML📦ブロック要素とインライン要素の違い


# ブロックレベル要素とインライン要素

## ブロックレベル要素
- 1つのまとまった単位となっているひとかたまり（見出しや段落）
- 常に改行されて縦につまさる
- 幅は横に広がる（デフォルトで横幅100%）
- 子には、インライン要素もブロック要素も入れることができる
- 注意点として、 `p`タグの中に他のブロック要素は入れない
- ブロック要素の例
    - `section`
    - `h1`〜`h6`
    - `hgroup`: 見出しのグループ化
    - `p`
    - `blockquote`: 引用文
    - `pre`: 整形済みテキスト
    - `div`: 汎用ブロックレベル要素
    
## インライン要素
- ブロックレベルの中に入っているテキストの一部分
- 改行されず横に並ぶ
- 幅・高さの指定は基本的にできない
- 中身の幅にフィット
- ブロック要素は子には入れられない
- インライン要素の例
    - `img`
    - `br` 
    - `em`: 強調
    - `strong`
    - `q`: 引用文として「」になる
    - `span`: 汎用インラインレベル要素
- インライン要素の中でも画像や動画、埋め込みコンテンツなどは置換要素と呼ばれる！

### インライン要素の置換要素について
- HTMLファイルの中に表示したい「中身」を直接書きません。
- 代わりに、「中身がどこにあるか」という情報（パスやURL）だけを属性で指定します。
- ブラウザは、その情報を元に外部のファイル（画像ファイル、動画ファイルなど）を読み込み、HTMLのその場所に「代わりに」表示します。

#### 置換要素は`width`や`height`を設定できる
- インライン要素は通常、`width`や`height`は設定できない。
- しかし置換要素は外部から読み込まれるコンテンツの固有サイズがあるので、設定することができる！

## ブロック要素・インライン要素比較表
| 比較項目                      | ブロック要素                                               | インライン要素                                        |
| ------------------------- | ---------------------------------------------------- | ---------------------------------------------- |
| **表示形式**                  | 常に**改行**されて表示される                                     | **改行されず**横に並ぶ                                  |
| **幅の扱い**                  | デフォルトで**横幅100%**                                     | **中身の幅にフィット**                                  |
| **高さの扱い**                 | 内容に応じて広がる／`height`指定OK                               | 内容に応じて広がる／`height`は効かない                        |
| **幅・高さの指定**               | `width` / `height` **指定できる**                         | 基本的に**指定できない**（一部可能）                           |
| **子要素に入れられるもの**           | ブロック要素・インライン要素**どちらもOK**                             | 原則としてインライン要素のみ（HTML5では多少緩和）                    |
| **margin / padding の効き方** | 上下左右すべて効く                                            | 上下には**効かないことが多い（ブラウザによる）**                     |
| **displayでの切り替え**         | `display: inline;` にすればインライン化できる                     | `display: block;` にすればブロック化できる                 |
| **注意点**                   | `<p>`の中にブロック要素を入れるのはNG（HTML仕様違反）                     | `<span>`で囲んだ中に`<div>`など入れるのは非推奨                |

# ボックス
HTMLのそれぞれの要素には、ボックスと呼ばれる四角い表示領域が用意されます。
　※ボックスの初期状態は、要素の種類やブラウザの種類によって異なります。
 　→初期状態の違いをなくす目的で用意するCSSを`リセットCSS`といいます。

## ブロックレベル要素のボックス
```
┌───────────────────────────────┐
│         外側の余白（Margin）        
│   ┌───────────────────────┐   │
│   │     境界線（Border）          
│   │   ┌───────────────────┐   │
│   │   │   内側の余白（Padding）  ← 背景色が適用される範囲
│   │   │ ┌─────────────────┐ 　│
│   │   │ │ 表示領域（Content）   │ 
│   │   │ └─────────────────┘   │
│   │   └───────────────────┘   │
│   └───────────────────────┘ 　│
└───────────────────────────────┘
```
- `margin`：他の要素との外側のすき間
- `border`：枠線（太さ・色など指定できる）
- `padding`：内側の余白（この中に背景色が塗られる）
- `content`：実際にテキストや画像が表示される領域

## インラインレベル要素のボックス
```
　　　　　　　　 ┌──────────────┐ 
              │  Padding     │
              │ ┌──────────┐ │
              │ │ Content  │ │
              │ └──────────┘ │
              └──────────────┘
```
- 上下`margin`は基本的に無視されます。
- `padding`は効くけど、縦方向の見た目には影響が出にくいこともあります。

# `margin・padding`の設定
## 1つの値を設定
~~~CSS
/* 上下左右に同じ余白を設定 */
margin（padding）: 20px; /* 上下左右20px　*/
~~~

## 2つの値を設定
~~~CSS
/* 上下と左右に異なる余白を設定 */
margin（padding）: 20px 10px; /* 上下20px、左右10px */
~~~

## 3つの値を設定
~~~CSS
/* 上、左右、下に異なる余白を設定 */
margin（padding）: 20px 10px 30px;  /* 上20px、左右10px、下30px */
~~~

## 4つの値を設定
~~~CSS
/* 上、右、下、左に異なる余白を設定 */
margin（padding）: 20px 10px 30px 40px; /* 上20px、右10px、下30px、左40px */
~~~

## `margin`の相殺

**ブロック要素の場合、**
上下の`margin`が隣接している場合、重なり合う（左右は重なり合わない）
- 10pxと10pxが重なり合っていると、計10px
- 10pxと20pxが重なり合っていると、計20px
となるよ！

**相殺される条件**
- 上下に並ぶブロック要素
- 間に`border`や`pading`がない
- 浮いてない（`float`や`position: absolute`じゃない）

**一方でインライン要素の場合、**
横の`margin/padding`はまあまあ効くが、縦（上下）は非推奨かつ非安定。
そのため、インライン要素の上下スペースを調整したいときは、`line-height`や`display: inline-block;`を使おう！


# 要素を表示する領域（Content）について

## Contentに関わるプロパティ

### 1. `width`（幅）
: 要素の横幅を決めるプロパティ

### 2. `height`（高さ）
: 要素の高さを決めるプロパティ

### 3. `min-width` / `min-height`（最小幅・最小高） 
: 要素の幅や高さの「最低ライン」を決める。それより小さくならないようにする制限。

### 4. `max-width` / `max-height`（最大幅・最大高）
:要素の幅や高さの「上限」を決める。それより大きくならないようにする制限。

:::note warn
`%`で高さを指定する場合の注意
親要素に高さを指定しないと正しく指定されません。
:::

❎NG:
```CSS
/*divのみに設定する*/
div {
  height: 100%;
  background-color: pink;
}
```

✅OK:
```CSS
/*divとbodyに設定する*/
/*bodyの親要素はhtmlなので、ここもきちんと設定する*/
html,
body {
  height: 100%;
}

div {
  height: 100%;
  background-color: pink;
}
```

![スクリーンショット 2025-05-01 17.09.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/5f4a3836-4250-4ed6-91d7-21d7583a95bd.png)

# `border`関連
## 1.`border-radius`
borderの角を丸くする💪🏻

## 2.`box-shadow`
要素に 影（シャドウ） をつけるCSSプロパティ
→border（枠）の外側につくように見える！
※けれど厳密には、要素のボックス全体（Content、Padding、Borderを全て含む）の外側に影を生成する

構文：
```CSS
box-shadow: 水平方向 垂直方向 ぼかし距離 拡がり距離 色;
```

使用例：
```CSS
box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.3);
```

## 3.`box-sizing`
ボックスのContentのみに設定される`width`と`height`を、
`padding`と`border`まで広げて適用することができます。

### `content-box`
`width/height`は コンテンツ部分のサイズだけを指定。

### `border-box`
`width/height`に`padding`と`border`も含めて指定。
 
**🔰サンプル**
```HTML
<div id="d1">
      box-sizing: content-box
</div>
<div id="d2">
      box-sizing: border-box
</div>
```

```CSS
div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin-bottom: 20px;
}

#d1 {
  box-sizing: content-box;
  background-color: lightblue;
}
/*全部で幅200px → 中身が調整されて小さく見える*/
#d2 {
  box-sizing: border-box;
  background-color: lightgreen;
}
```
![スクリーンショット 2025-05-01 17.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/1a547b0d-fd3a-43fc-9409-88ce421d23af.png)

# `display`で<br>ブロック要素・インライン要素を自由に扱う

- ブロックレベル要素はそのままだと縦に並びますが、
`display`プロパティは、ボックスの表示形式を根本的に変更したいとき使用します。
- 使用することでインライン要素をブロック要素のように表示させたり、逆も可能となります。


## 注意点
-  `transition` や `animation`に設定することはできない

## 指定できる値
- `inline`: インライン要素と同様の表示にする
- `block`: ブロックレベルと同様の表示にする
- `inline-block`: 
それぞれが「横に並ぶボックス（＝インラインのように並び、でも中ではブロックのようにふるまう）」になる
- `none`: ボックスを消す

| `display` の種類  | 幅・高さの指定   | `padding`/`margin` の上下 | 改行される？  | 表示される？ |
| -------------- | --------- | ---------------------- | ------- | ------ |
| `inline`       | ❌（無効）     | ❌（効きづらい）               | ❌（横に並ぶ） | ✅      |
| `block`        | ✅         | ✅                      | ✅（改行）   | ✅      |
| `inline-block` | ✅         | ✅                      | ❌（横に並ぶ） | ✅      |
| `none`         | ❌（表示されない） | ❌（無効）                  | ❌       | ❌（非表示） |

## 表示確認

 `div`→ブロック要素、`span`→インライン要素
 上記は、同じCSS指定でも、表示が異なります。

<details><summary>サンプルコード</summary>

```
/*html*/
　　<span class="sam1"
      >サンプル１<br />span要素</span
    >
    <div class="sam1">
      サンプル１<br />div要素
    </div>
    <br />
    <br />
    <span class="sam2"
      >サンプル2<br />span要素</span
    >
    <div class="sam2">
      サンプル2<br />div要素
    </div>
    <br />
    <span class="sam3"
      >サンプル3<br />span要素</span
    >
    <div class="sam3">
      サンプル3<br />div要素
    </div>
    <br />
    <span class="sam4"
      >サンプル4<br />span要素</span
    >
    <div class="sam4">
      サンプル4<br />div要素
    </div>

/*style*/

span,
div {
  color: #fff;
}

span {
  background: #f6d;
}

div {
  background: #69e;
}
```

</details>


![スクリーンショット 2025-05-02 9.58.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/c2b2e455-cbbb-4c18-bbb4-1140a393386c.png)

それぞれ何が違うのか、細かく見ていきましょう！


### 1.`inline`で、ブロック→インラインへ変更
```CSS
.sam1 {
  display: inline;
}
```
![スクリーンショット 2025-05-02 10.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/a0dd6d04-af89-4804-87d1-ead74c8cee47.png)

- サンプル1：ブロック要素（`div`）に`inline`を設定
    - 横並びになった！
    - 幅も要素と同じになった！
- サンプル2：ブロック要素もインライン要素もそのまま

### 2.`block`で、インライン→ブロックへ変更
```CSS
.sam2 {
  display: block;
}
```
![スクリーンショット 2025-05-02 10.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/0f38539d-7148-49c8-aca1-9682b0234368.png)

- サンプル2：インライン要素（`span`）が、ブロック要素と同じ表示になった！

### 3.`none`で、ボックスを削除
```CSS
.sam3 {
  display: none;
}
```
- ブロック要素もインライン要素も、丸ごと消えた！

### 4.`inline-block`で横に並ぶボックスを設定
**インラインのように並び・でも中ではブロックのようにふるまうよ**

**step1**:上下左右に`padding`を設定
```CSS
.sam4 {
  padding: 10px;
}
```
![スクリーンショット 2025-05-02 10.38.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/684b4f13-8229-4521-a814-54d7e6460fb2.png)
→インライン要素（`span`）は`padding/margin`が上下に効かないので、
 おかしな表示になってしまう

**step2**:上下左右に`padding`・`inline-block`を設定
```
.sam4 {
  display: inline-block;
  padding: 10px;
}
```
![スクリーンショット 2025-05-02 10.41.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/c0c0e270-6efb-40b5-8c96-6d7f93ac1ad4.png)

- ブロック要素（`div`）
    - 本来は縦に積まれる要素が、改行されずインライン要素のように横並びになる
    - でも、幅・高さ・paddingなどの指定はそのまま有効
- インライン要素（`span`）
    - 横並びは維持したまま、幅・高さ・内側余白（`padding`）などを自由に指定できるボックスになる
    - インライン的に横に並ぶのはそのままです。