[HTML,CSS]新人エンジニアがView作成時にするうっかりミス

# はじめに
新人エンジニアの私がビューを作成しているときに犯したうっかりミスをいくつか紹介します。
反面教師にして、皆さんもお気をつけください。

# 新人エンジニアがView作成時にするうっかりミス
## ウインドウを縮めた時にビューが崩れる
私「ビュー完成しました！」
先輩「お〜画面ちょっと縮めてみて」
・・・・・
私「あれ、レイアウトが崩れた...」

画面サイズは端末や見る人によっても異なります。
ウィンドウを縮めたときにもレイアウトが崩れていないかを必ず確認するようにしましょう。

## cssの記述が散らばっている
```
.header {
　　　　font-size: 16px;
　　　　padding-top: 20px;
  background-color: grey;
  padding-bottom: 30px;
}

.body {
  padding: 25px;
  background-color: white;
　　　　font-size: 14px;
}
```
上記のコードで気になる点が**2つ**あります。
1つ目は`.header`で`padding-top`と`padding-bottom`の**記述がまとめられていない**ことです。
`padding`や`margin`などの記述はスペースで区切って複数の値を指定できるので、まとめて書くようにしましょう。

2つ目は`.header`と`.body`でcssの**記述順が異なる**ことです。
ほとんど同じスタイルが登場しているのに記述の順番がバラバラになっています。
cssの記述順には**アルファベット順**や**視覚順**などがあるようです。
開発チームで厳密なルールを決めろとは言いませんが、せめてでも自分が記述したファイル内のコードには統一感を持たせたいですね。

## inline-blockで謎の隙間が空いている
皆さんは`display: inline-block`で要素を横並びにした時に生まれる謎の隙間をご存知でしょうか？
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWQdXBP" data-user="kidorina" 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/kidorina/pen/MWQdXBP">
  Untitled</a> by kidorina (<a href="https://codepen.io/kidorina">@kidorina</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

上記のように`display: inline-block`を指定しているdivタグを改行すると、隙間が空いてしまいます。
この隙間が原因で再現したいデザインよりも隙間が広くなったり、marginやpaddingの調整をする必要が生じてしまいます。

この隙間を無くすには親要素に`font-size: 0;`を指定します。
子要素にはfont-size指定が必要になるので忘れないようにしましょう。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BarBBro" data-user="kidorina" 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/kidorina/pen/BarBBro">
  Untitled</a> by kidorina (<a href="https://codepen.io/kidorina">@kidorina</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## line-height分の余白が考慮されていない
文字の高さは文字サイズ(font-size)と行間(line-height)で決まります。
行間は文字の上下に均等に2分割された値が適応されます。
`margin`や`padding`を設定するときに行間分の余白を考慮しないと、
再現したいデザインよりも余白が広がってしまいます。

下記のように、文字から余白をつけるのか、行間込みの文字から余白を付けるのかで大きくビューが変わってしまうので注意しましょう。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWErEmB" data-user="kidorina" 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/kidorina/pen/XWErEmB">
  Untitled</a> by kidorina (<a href="https://codepen.io/kidorina">@kidorina</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 終わりに
いかがでしたか？皆さんもお気をつけあれ！


## 参考文献
https://zenn.dev/web_tips/articles/f1167f4314dcb3

https://webuddy.info/css/il-crevice/

http://www.b-tm.co.jp/blog/detail/48.html