HTMLの超きほん　〜ブロックレベル要素とインライン要素〜

# HTMLは要素の積み重ね
HTMLは入れ子構造の要素が積み重なって表示されます。

基本的にはHTML文書で先に記述したものほど
- より上に
- より左に

表示されます。

![0315-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323790/c14bca94-e742-d60f-9b39-0a4e529cc0dc.png)

でも、下に要素が重ならず、横にくることもあります。

この違いはなんでしょうか？

# `ブロックレベル要素`と`インライン要素`
要素の種類よって、積み重なり方が違います。

ざっくり説明すると
- `ブロックレベル要素`: 
    - 改行される要素
    - 横にスペースがあっても下に積み重なる
- `インライン要素`: 
    - 改行されない要素
    - スキマがあれば横に並ぶ

もう少し詳しく見ていきましょう。

## ブロックレベル要素
### ブロックレベル要素の特徴
`ブロックレベル要素`は以下のような特徴があります。
- 親要素の横幅いっぱいに広がる箱
- 箱は縦に積み重なる
    - 幅や高さを設定できる
    - 余白を設定できる

### 主なブロックレベル要素
| 用途 | 要素名 |
|:-:|:-:|
| 見出し  | h1〜h6要素  |
| 段落  | p要素  |
| 箇条書き  | li要素  |
| 汎用タグ  | div要素  |

### 実際に書いてみる
※各要素の背景に色をつけています
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyJoYqo" data-editable="true" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/dyJoYqo">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## インライン要素
### インライン要素の特徴
`インライン要素`は以下のような特徴があります。
- 箱（ブロックレベル要素）の中に入れる中身
- テキストの長さにあわせて横幅が広がる
    - 幅や高さを設定できない
    - 余白をうまく設定できない
    - 【例外】`img要素`や`input要素`など一部は幅・高さ・余白を設定できる

### 主なインライン要素
| 用途 | 要素名 |
|:-:|:-:|
| リンク  | a要素  |
| 画像  | img要素  |
| 入力 | input要素 |
| 汎用タグ | span要素 |

### 実際に書いてみる
※内側に余白をもつ箱に入れてみます
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="popJjKK" data-editable="true" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/popJjKK">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# インラインブロック要素
**「横に並ぶ箱やリストはつくれないの？」**
と思った方もいるかもしれません。

そんな時は、CSSで`displayプロパティ`の値を`inline-block`と設定し、

インライン要素を`インラインブロック要素`に変更します。

### インラインブロック要素の特徴
`インラインブロック要素`は以下のような特徴があります。
- 箱（ブロックレベル要素）の中に入れる中身
- テキストの長さにあわせて横幅が広がる
    - 幅や高さを**設定できる**
    - 余白を**設定できる**

つまり、ブロックレベル要素とインライン要素の性質を併せもちます。

### 実際に書いてみる
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWabyQo" data-editable="true" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/QWabyQo">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 補足

### Flexbox
他にも、`Flexbox`を利用して箱を自由自在に並び替えることができます。

よく使われる機能ですので、気になった方は調べてみてくださいね。

### おわり
さいごまでお読みいただき、ありがとうございます！

この記事はプログラミング初心者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。

また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方は[Twitter](https://twitter.com/yutaka_pg)などでご連絡くださいー！

これからもどうぞよろしくお願いします:rabbit: