レイアウト崩れを起こさないために、制作時に意識したほうが良い基礎的なことをまとめてみました。
Webサイト制作を始めたばかりの方の参考になれば幸いです。
（あくまで意識したほうが良いことなので、コードサンプルなどは機会があればまとめます。）
表示個数は変動するものだと考える
一覧などで要素を横に並べてレイアウトするとき、個数の変動を意識しないでデザインやコーディングをしてしまうと、融通が利かなくなり表示崩れが起きてしまいます。
崩れの例
- 個数が想定より少なく、要素と要素の余白が開きすぎる
- 想定した個数より多く入ってしまい、一つ一つの要素が狭く窮屈になってしまう
予防策
上記のような崩れが起きる場合、個数を固定してコーディングし、増減のテストを怠っていることが多いです。
コーディング時には、数を減らしたり増やしたりしても崩れないか試してみることが大事です。
動的な要素であれば個数は必ず変動するので増減に耐えられるよう作ると思いますが、依頼時に個数が決まっていたとしても仕様変更が起こりやすい部分なので、増減するように作っておくほうが安心です。
変動するように作れていれば、急な仕様変更の際の調整も不要になります。
背景は途切れないようにする
リピート背景の場合は大丈夫ですが、一枚の背景画像でレイアウトする場合には注意が必要です。
崩れの例
- 想定よりモニターが大きいまたは小さい場合、表示位置がずれてしまう
- 背景が中途半端なところで途切れてしまう
予防策
背景画像が拡大縮小するよう設定しておくと崩れを緩和出来ることが多いです。ただ、その場合は高解像度のモニターでも耐えられるよう、画像自体を大きくしておいたり、SVGなど拡大縮小しても劣化しないよう作っておく必要があります。
背景画素が途切れてしまう場合、両サイドにグラデをかけて背景色に馴染ませるようにするなど、デザイン時に背景画像に工夫をしておくのも大事です。
高さ指定をしすぎない
崩れさせないためにガチガチに高さを指定したくなるかと思いますが、かえって崩れやすくなることがあります。
崩れの例
- 想定より長い文章が入って、エリアからはみ出てしまう
- 想定より内容が少なく、余計な余白ができてしまう
予防策
高さ指定をせず、paddingやmarginを使用してレイアウトを成立させるほうが崩れにくくなります。
コーディング時の工夫も必要ですが、何はともあれ高さが変動してもおかしくないようデザインしておくのが一番大事です。
当たり前なことですが、意外とデザイン時に意識しきれておらず、コーディング時に後悔した経験がある人は多いかと思います。
ダミー文言の場合は意識してデザインしていると思いますが、テキスト指定がしっかりされている場合にもある程度融通が利くように作っておくと安心です。
省略も活用する
前述のとおり、高さ指定をしすぎないことで崩れ防止にはなりますが、テキストが想定よりも長い場合、崩れはしなくとも違和感のある表示になってしまうこともあります。
崩れの例
- 想定よりも長いテキストが入り、同じレイアウトの要素と差が出てしまう
予防策
サムネイルや一覧ページの構成要素などの場合は、テキスト省略を活用することで崩れを防ぐことができます。
CSSなどでテキスト省略を入れると、意図したレイアウトに近い状態を維持できるため、活用できる箇所であれば積極的に使うと良いです。
位置固定（position）は不変的な要素に使う
位置固定もコーディング時によく使うかと思いますが、使う場所には注意が必要です。
動的な要素を位置固定にしてしまうと、思わぬ崩れに繋がります。
崩れの例
- 位置固定した要素の中身が増えて、はみ出してしまう
- 固定した要素以外の要素が消えて、想定した位置と違う個所に位置固定されてしまう
予防策
位置固定は画像などの、高さが変わらない要素にのみ使うほうが崩れにくいです。
動的な要素の場合は、位置固定はせずmarginやpaddingをうまく活用するほうが崩れにくいレイアウトになります。
どうしても動的要素を位置固定する場合は、テキスト省略を設定しておくなど、高さが変わらないようにする工夫が必要になります。
まとめ
WEBサイトは見る人の環境に表示が左右されてしまうものです。
崩れにくさを意識しながら制作することで、見る人への配慮にもつながります。
他にも、仕様変更に強いページやサイトにもなりますので、常に意識しておくことが大事かと思います。