画像に重ねた文字が改行で崩れた問題の解決法【Studio】

先日、Studioで画像の上に文字を重ねるデザインを作っていた時のこと。

デザインエディタ上では自分の理想通りに作ることができたのですが、画面幅を狭めた瞬間に文字が改行されて、その分だけ画像が隠れてしまうという問題が発生。

試行錯誤をして解決することができましたが、この問題に直面したのは僕だけではないはず。

本記事では画像に重ねた文字が改行で崩れる問題と、その解決法について解説します。

問題解決のための考え方についても話しているので、ぜひ参考にしてください。

画面幅でデザインが崩れる問題

まずは問題が発生した際のデザイン。

今回のデザインは、画像の下端に背景色つきの見出しを重ねるというものでした。

「画像の下端に文字をつけたい」ということで、画像と文字をグループ化して文字を絶対配置で下から0pxの位置に置いていました。

素直な考えで作ったデザインですが、問題は文字が画面幅に収まりきらなくなって改行された時。

下基準で固定しているため、高さが増えた分は上へ伸びていきます。

結果、帯が画像を想定以上まで隠してしまいました。

文字自体は読めますが、これでは流石に格好が付きませんよね。

解決のための考え方

手っ取り早いのは文字を改行させない方法ですが、それだと以下のような問題が残ります。

• 画面幅によっては文字が小さくなりすぎる
• 大きくすると画面からはみ出てしまう

どちらも文字が読めなくなってしまう致命的な問題なので、文字を改行させないのは却下。

そもそも文字が改行されることは正常な挙動、問題は伸びる方向です。

今回は文字が伸びて画像を隠すのが問題なので、下方向に伸びてくれれば解決します。

絶対配置からマイナスマージンへ変更

文字が下に伸びるようにするには、画像と文字を下端ではなく、文字の上端を基準に並べる必要があります。

そのため、文字を絶対配置から相対配置に戻し、上方向にマイナスのマージンを持たせることで画像と重ねるように変更しました。

実装時のポイントも特になく、重なり順を調整して文字が画像より前に来るようにするくらいです。

これで文字が２行になろうが３行になろうが、下に伸び続けるだけなので、画像が予想以上に隠れてしまうことはありません。

まとめ

今回の問題に限らず、文字が改行することでデザインが崩れてしまう場面は多いと思います。

そういった時は今回のように、伸びても問題のない方向と配置基準を考えてみると意外と簡単に解決できるかもしれません。