CSSで要素を配置する基本テクニック8種類をサンプル付きで紹介します

# 概要
MDNの[CSS レイアウト入門](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction)を参考に、CSSレイアウトの基本のテクニックの概要を自分なりにまとめました。それぞれの項目について詳しく知りたい場合は、各項目の冒頭に記載してあるリンク（MDNの[CSS レイアウト](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout)の各章）を参照してください。

## 「CSSレイアウト」とは
> ビューポートや互いを基準にしてボックスを適切な場所に配置する方法

[CSS レイアウト](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout)より

例えば、「赤い四角を画面の右半分に、青い四角を画面の左半分に配置する」「画像の右側に文章を配置し、それを1セットとして縦並びに配置する」などがCSSレイアウトということになります。四角を赤くしたり、画像や文字のサイズを整えるのは、「レイアウト」の範囲外です。

# 通常フロー
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Normal_Flow
ブラウザがデフォルトで`HTML`ページをレイアウトする方法です。
特にスタイルを設定していない状態を指します。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="KKpKaaZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="KKpKaaZ">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/KKpKaaZ">
  KKpKaaZ</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# [`display`](https://developer.mozilla.org/ja/docs/Web/CSS/display)プロパティ
https://developer.mozilla.org/ja/docs/Web/CSS/display
要素が通常フローでどのように振る舞うかを変更するプロパティです（`block`, `inline`など）。
または`display`値によってオンにされるレイアウト方法全体を指します（`flex`など）。
任意の要素に設定できます。

- ブロック要素（`block`）: 縦並び
- インライン要素（`inline`）: 横並び

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="mdJdRmV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mdJdRmV">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/mdJdRmV">
  mdJdRmV</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# フレックスボックス
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
`Flexible Box Layout Module`の略です。
子項目に`flex`プロパティ（向き、要素の大きさなど）を追加できます。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="eYNYgRL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="eYNYgRL">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/eYNYgRL">
  eYNYgRL</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# グリッド
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids
行と列に物を並べる（2次元）用に設計されています。
子項目にプロパティを設定しなくても自動で配置されます。開始ラインや終了ラインを設定することで柔軟に配置できます。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="eYNYgjb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="eYNYgjb">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/eYNYgjb">
  eYNYgjb</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# フロート
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Floats
設定すると、要素が左または右に移動し、通常フローから除かれます。
また、フロート項目を囲んでいるコンテンツが周囲に浮き（回り込み）ます。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="zYGYNVg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="zYGYNVg">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/zYGYNVg">
  zYGYNVg</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 位置指定（[`position`](https://developer.mozilla.org/ja/docs/Web/CSS/position)プロパティ）
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Positioning
通常フローの時に要素が配置されていた場所から、別の場所に移動できます。

## 静的位置指定 (Static Positioning)  
デフォルトです。特別な位置指定がありません。
## 相対位置指定 (Relative Positioning)  
通常フロー内の位置に相対的に移動できます。
## 絶対位置指定 (Absolute Positioning)  
ページの通常のレイアウトフローから完全に外れます。
`<html>`の端に相対的な位置に固定できます。
## 固定位置指定 (Fixed Positioning)  
ブラウザのビューポート基準で要素を固定します。
## 粘着位置指定 (Sticky Positioning)  
ビューポートからオフセットにぶつかるまでは`static`の、それ以降は`fixed`の挙動をします。
割と最近できたプロパティです。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="RwPwpbp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwPwpbp">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/RwPwpbp">
  RwPwpbp</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 表レイアウト
表をスタイルするための機能です。
`display: table-cell;`のような書き方をすると表レイアウトになります。
表以外のレイアウトにも使えるようです（表レイアウトでページレイアウトを行っていた時代もあった、らしい）。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="rNVNyaE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="rNVNyaE">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/rNVNyaE">
  rNVNyaE</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 段組みレイアウト
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
新聞のように複数列にレイアウトする方法です。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="mmkcoins" data-slug-hash="RwPwpWg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwPwpWg">
  <span>See the Pen <a href="https://codepen.io/mmkcoins/pen/RwPwpWg">
  RwPwpWg</a> by mmkcoins (<a href="https://codepen.io/mmkcoins">@mmkcoins</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>