[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で要素を横並びにした時に生まれる謎の隙間をご存知でしょうか？

See the Pen Untitled by kidorina (@kidorina) on CodePen.

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

この隙間を無くすには親要素にfont-size: 0;を指定します。
子要素にはfont-size指定が必要になるので忘れないようにしましょう。

See the Pen Untitled by kidorina (@kidorina) on CodePen.

line-height分の余白が考慮されていない

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

下記のように、文字から余白をつけるのか、行間込みの文字から余白を付けるのかで大きくビューが変わってしまうので注意しましょう。

See the Pen Untitled by kidorina (@kidorina) on CodePen.

終わりに

いかがでしたか？皆さんもお気をつけあれ！

参考文献