エンジニアさん向け。
デザイナー/コーダーから受け取ったHTMLをWEBアプリに組み込んだら、なんだか見栄えがおかしくなったなあ……、という時に注意すると良いかもしれない点を挙げてみました。
全体のサイズ感が違う気がするとか、余計な装飾がついちゃってる、とかいう時。
プロジェクト作成時にフレームワーク側でBootstrapなどのCSSフレームワークを用意してくれることがあります。
そのCSSフレームワークをもともとは使用していないとか、使用する場合でもバージョンが違ったりすると、見栄えや動きがおかしくなります。
使っていないものは読み込まないのが大事です。
全称セレクタはこういうのです。
* {
プロパティ: 値;
}
この「*」ですね。これがですね！
すべての要素に適用されてしまうんですね！
リセットCSSで使用しているのをよく見ますが、そこからコピペしてきて組み込み後のCSSに書き加えると地獄です。変更したい要素にだけピンポイントでスタイルを当てましょう。
組み込み前後で高さや横幅が変わってしまった！という時にありがち。
要素の高さや幅を親要素に対して何%かで指定している時に起こりがちです。
親要素やさらに上のbody、htmlで高さなど指定している場合があります。フレームワークが用意するデフォルトCSSや別に読み込んだCSSフレームワークが打ち消している場合もあるので検証してみてください。
経験上、height・min-height・overflowあたりが怪しい。
margin-top、margin-bottomで起こりがち、あったはずの余白が消えてしまう問題。
HTMLで綺麗に見えた時とは隣り合う要素が違うとか、中身がカラになった時に起こります。
marginの相殺は割と有名なあるあるです
（参考記事:
[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック|coliss）
が、クセがあるので厄介な時はpaddingやborderで回避しましょう。
marginの相殺を意図して使っている場合も（その上で表示に変な点が出ている場合も）あるので、変更する場合はデザイナー/コーダーに相談した方が無難です。
例えば
<table>
<tbody>
<tr class="tr">
<td>テキスト</td>
</tr>
<div class="tr">要素追加</div><!-- 表示されない -->
</tbody>
</table>
このような入れ子は正しくない構文という事でブラウザが無視することがあります。
入れ子を適切な形にするか、デザイナー/コーダーに相談してください。
HTMLは文書構造の正しさが重要です。何でもかんでもdivやspanで突っ込まないこと。
div＝ブロック要素、span＝インライン要素、として紹介されることもありますが……。
ブロック要素だと思ってdivを使ったら親要素の影響でブロック要素ではなかった、とかdisplay:table;の中で使っていた、とか
display属性を指定したらFlexboxの設定を上書きしちゃって全体が吹っ飛んだ、とか
デザイナー/コーダーに（略）
デザイナー/コーダー目線で、HTML/CSSに後から手を加える際になるべく避けてほしいことです。
これらもレイアウト崩れの原因になります。
よほどの時以外は使わないでほしい（魂の叫び）
でも急ぎの対応の時は使ってしまいがち。使う時は最小限で！！
CSSの優先度には法則があります。!importantを使わなくても大体何とかなるので何とかしよう。何とかならない時には影響が最小限度になる範囲で使おう。
参考：!importantはもう使わない！CSSの優先順位をおさらいしよう
探せばまだまだありそうですが、今のところ思いつくのはこの辺です。
怪しいポイント探しの一助になれば幸いです。
