【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。

# 1. 記事の目的
**わたしはCSSが書けません。**

しかし、htmlやjavascriptで作成した成果物やコンテンツを、最低限の見た目にしたいという思いはあります。
**「最低限の見た目」＝「画面サイズに依存せずに画面の中心に配置する」**と考えた私は、**「なら、成果物を画面の中心にもってくるCSSをいつでも使えるように用意しておこう。」**と決意しQiitaに投稿しました。それだけです。


# 2. コード（コピペ用）
bodyタグに対して、以下のようにCSSを設定することで、コンテンツを中心に配置できます。

```css
body {
    margin:0;
    display:flex;
    min-height:100vh;
    justify-content:center;
    align-items:center;
    /* flex-direction: column; */
}
```
一般公開するので、一通り解説をします。
詳細は参考リンクに譲ります。

# 3. CSS の解説
## 3-1. 解説用html
解説用のhtmlサンプルは以下の通りです。今回はbodyタグの下に見た目用のCSSを追記しています。あくまで解説用のため、本来は必要ないです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        body {
            /* ここを個々に解説をします */
            /* margin: 0; */
            /* display: flex; */
            /* justify-content: center; */
            /* min-height: 100vh; */
            /* align-items: center; */
            /* flex-direction: column; */
        }     
    </style>
</head>

<body>
    <div class="item item1">アイテム1</div>
    <div class="item item2">アイテム2</div>
    <div class="item item3">アイテム3</div>    
</body>

<style>
    /* 枠線や背景色などの見た目用CSS */
    body {
        box-sizing:border-box;
        border: black 10px solid;
        padding: 10px;
        background-color: gainsboro;
    }
    .item{
        border: black 2px solid;
        padding: 3px;
        margin: 3px;
        background-color: #fff;
    }
</style>    
</html>
```

こんな感じの見た目になります。（通常なら見た目用CSSがないため、もっと味気ない感じになりますよね。）
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205371/353f0880-d992-c384-ed73-34fdaeabb1c3.png)
図1. 何もない状態



## 3-2. `margin:0;`
まず、`margin`と呼ばれる枠(`border`)の外の設定です。（図1の黒太枠の外の余白です。）

デフォルトでは`margin:8px`となっていました。`margin:0`に設定することで枠の外の余白をなくします。
※`margin:0`のときはpxのような単位がなくても構いません。もちろん、単位があっても動作します。

```css
body {
    margin: 0px;
    /* display: flex; */
    /* justify-content: center; */
    /* min-height: 100vh; */
    /* align-items: center; */
    /* flex-direction: column; */
}       
```

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205371/ced59b82-9ce8-651c-7e8d-6f1fdef2cc76.png)
図2. margin:0 を設定

黒太枠（bodyのborder）の外側の余白(margin)がなくなりました。

## 3-3. `display: flex;`
**flexコンテナ**と呼ばれるものを設定します。
以下の`justify-content`や`align-items`などを使用するために必要です。

```css
body {
    margin: 0;
    display: flex;
    /* justify-content: center; */
    /* min-height: 100vh; */
    /* align-items: center; */
    /* flex-direction: column; */
}         
```

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205371/59bf85f6-185f-4999-f971-68a929629a5c.png)
図3. display: flexの適用

`display:flex`を適応するとこんな感じです。黒太枠内が**flexコンテナ**です。
**flexコンテナ**を適用したタグの子要素（アイテムたちのことです！）が**左**に寄せられています。
ブロックレベル要素（タグごとに改行される要素）のアイテムたちが**横並び**になっています。（図2だと縦に並んでました）

## 3-4. `justify-content:center;`
**flexコンテナ**内の要素を、水平方向のどの位置に配置するかを指定します。
デフォルト（指定していない場合）は`justify-content:flex-start`。左寄せになります。（図3 参照）
今回は`justify-content:center`を指定して、中央にします。

```css
body {
    margin: 0px;
    display: flex;
    justify-content: center;
    /* min-height: 100vh; */
    /* align-items: center; */
    /* flex-direction: column; */
}     
```

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205371/426109e5-e10e-d025-8e92-1b3b085a837c.png)
図4. justify-content: center の適用

左に寄っていたアイテムたちが、真ん中に集合しました！

## 3.5. `min-height:100vh;`
**flexコンテナ**の領域の最低の高さを**100 vh**に設定します。

**vh**は**viewport height**と呼ばれる、**viewport（表示領域）の高さに対する割合の単位**です。
100vhはviewportに対して100%という意味です。
つまり**`min-height:100vh`＝「bodyの高さを少なくとも、表示領域と同じにする」**になります。

```css
body {
    margin: 0px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    /* align-items: center; */
    /* flex-direction: column; */
}     
```

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205371/c898929b-73ba-67f4-790c-5707a97f5d9a.png)
図5. min-height: 100vh の適用

黒太枠線(`body`の`border`)が画面いっぱいに広がりました。
それにともない、アイテムたちが縦にみょーんとなっています。

## 3-6. `align-items:center;`
図5でアイテムたちが縦にみょーんとなってしまっているのは、`align-items`のためです。
`align-items`は**flexコンテナ**内の要素を垂直方向のどの位置に配置するかを指定します。
デフォルト（指定していない場合）は`align-items:stretch` が指定されている状態です。親要素の高さになります。（図5参照）
今回は、中央揃えにしたいので`align-items:center`を指定します。

```css
body {
    margin: 0px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
    /* flex-direction: column; */
}     
```

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205371/b9976ad6-9ccd-c6ce-18a3-4c440a6bd9d0.png)
図6. align-items: center の適用

## 3-7. （追記）`flex-direction: column;`
**3-3. `display: flex;`**でアイテムが横配置になりました。
これは`flex-direction: row;`がデフォルトで反映されているからです。

`flex-direction`は**flexコンテナ**内のアイテムの向きを指定するプロパティです。
`flex-direction: column;`とすることで、縦配置のまま画面中心にコンテンツを移動することができます。

# 4. さいごに
コンテンツを画面の中心に持ってくることができました！

これで最低限の見た目は保証がされるはずです！（私は信じています！）
あとはいいコンテンツを作るだけですね！…

# 参考リンク
* [CSS フレックスボックスレイアウト](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)
 flexboxをちゃんと理解したい場合はこちら。

* [日本語対応！CSS Flexboxのチートシートを作ったので配布します](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1)
使い方がわかりやすく参考にしています。

* [CSS には vw, vh, vmin, vmax という単位がある](https://dev.classmethod.jp/articles/css-length-viewport/)
vhについてはこちら。