# CSS勉強会

### 目標
**ボックスモデルについてと、Flex, Grid について理解する！**

### 内容
このコードペンでインスタグラムみたいなレイアウトを作ってもらいます！
https://codepen.io/2ndpinew/pen/qBKaLjd

開くとこんな画面になると思います！
このテンプレートを使って、作業してもらいます！

## 軽く自己紹介
始める前に、名前、インターンの時のあだ名、CSSの熟練度など軽く教えてください！

## ざっくりレイアウトを考える
実際のインスタグラムのスクショをみながら全体のレイアウトについて考えます。

## テンプレート解説
[先ほどのコードペン](https://codepen.io/2ndpinew/pen/qBKaLjd) をみながら解説していきます

## 解説
### ボックスモデルについて

### ボックスモデルの制御
ブラウザのデフォルトの挙動では `box-sizing: content-box;`となっている(標準ボックスモデル)
`width`や`height`がコンテンツボックスに適用される

なので以下のスタイルがあった場合`.my-box`は`260px`になる
(コンテンツの200px + paddingの40px + borderの20px)

.my-box {
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

`box-sizing: border-box`とすると大きさの指定が`border box`に適用されるようになるので`.my-box`は`200px`になる
代替ボックスモデルと呼ばれるもので、こっちの方が直感的でわかりやすい

.my-box {
    box-sizing: border-box;
}

今回使うテンプレートでは全ての要素が代替ボックスモデルになるようにしている

* {
	box-sizing: border-box;
}

## 作ろう！
Instagramのアカウントがある方はdevtoolで見ながらレイアウトを作ってみてください
無い人は完成形を下に作ってください

ざっくり仕様はコード中に`Spec: `という形で記載してあります

### 実装のヒント
CSSの中に `// Hint: これがヒントだよ`のような形でヒントを書いています!

### 完成形