読者です 読者をやめる 読者になる 読者になる

Debriefing [デブリーフィング] | Web関連・恋愛・ライフハックを発信するブログメディア。

都内で働く20代Web系男子が運営するメディア。Web関連、恋愛、ライフハックなどについて情報を発信していきます。

【CSSのレイアウト崩れ】スマホで見ると文字が左寄せになるバグを解消する方法

web

スマホで見ると文字が左寄せになるバグを解消する方法

最近のWebサイトはスマホ対応されているWebサイトが一般的になってきました。 スマホサイトがないと「このサイト大丈夫か?」などと不信感を抱く時代に着々となってきていますね。 しかしまだまだスマホ対応がされてなく、PCサイトしかないサイトもあるかと思います。

そんななか先日PC用のサイトをコーディングした時にスマホで見たらどんなふうに表示されるか確認してみたところ、下の画像のように文字が左により、右にスペースが空いてしまうバグを発見しました。

PCサイトをスマホサイトでみると文字にスペースが入る

iPhoneAndroid両方の端末で同じ現象がおきていました。
今回はこのスペースを解消する方法を紹介します。

理想的なスタイル

理想的な表示はこんな感じです。

最初はwidthの指定かなと思ったのですが関係ないようでした。 いろいろ調べてみたところ原因はわからないのですが、テキスト部分を囲っているタグに下記のCSSを指定してあげれば解決できました。

文字の部分の背景色が単色の場合は

p {
  background-color:#fff;(背景色と同じ色)
}

文字の部分の背景色がグラデーションとかの場合

p  {
  background-image: url(img/dummy.png);(透過の画像を背景画像に指定)
}

文字を囲っているタグに対して上記のようにCSSを設定すると解消することができました。
文字の部分の背景が単色ならそのままbackground-colorでその色を指定するだけで解消できますが、グラデーションなどの場合は透明な画像作成して、背景画像として指定すれば解消できます。
ほかに良い方法があれば共有したいと思います。

広告を非表示にする