【備忘録】サイトの表示崩れの時にチェックすること

要素の幅が画面幅を超えている

overflow: hidden;をbodyやhtmlに適用することで、要素がはみ出すのを防ぐことができます。
これは余分なスクロールバーを表示させたくない場合に有効です。

width:auto;

width: 100%;を指定すると、要素が親要素の幅を超えることがあります。
この場合、width: auto;を使用すると、要素のコンテンツや親要素のサイズに応じて適切な幅が自動的に設定されます。
親要素の幅が固定されている場合、autoは親要素の幅を基準に適用されます。
特に、display: flex;やdisplay: grid;を用いると、子要素はその内容に応じたサイズになります。

box-sizing:border-box;

要素の幅計算にpaddingとborderが含まれるようになります。

デフォルトの場合

div {
    width: 200px;
    padding: 20px;
    border: 5px solid red;
}

width: 200pxにpadding: 20px×2とborder:5px ×2が追加され、合計サイズは250pxになります。

box-sizing: border-box;

div {
    width: 200px;
    padding: 20px;
    border: 5px solid red;
    box-sizing: border-box;
}

width: 200pxにpaddingとborderが含まれるので、サイズは200pxのままになります。

box-sizing: border-box;を使うと、要素のサイズが予想しやすくなり、レイアウト調整がしやすくなります。width: 100%;の要素が予想外に大きくなるのを防げます。

text-align: center;

親要素に適用することで、テキストやインライン要素を中央揃えにするプロパティです。
子要素を中央に配置したい場合には、親要素にこのスタイルを設定することが重要です。

しかし、子要素の幅が親要素に収まらないと中央揃えが機能しないことがあります。
そのため、子要素の幅を固定するか、最大幅を指定することで中央揃えを実現できます。
これにより、子要素が親要素の中央に配置されるようになります。