Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

スマホサイトで文字が左寄せになるCSSのバグを解消する方法

スマホサイトで文字が左寄せになるCSSのバグを解消する方法

画像出典:W3C

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

しかしまだまだスマホ対応がされてなく、PCサイトしかないサイトもあるかと思います。

 

先日、レスポンシブやスマホ専用サイトを作らずにPCサイトのみ作った場合、スマホでPCサイトを見たらどんなふうに表示されるか確認してみたところ、下の画像のように文字が左により、右にスペースが空いてしまうバグを発見しました。

スマホサイトで文字が左寄せになるCSSのバグを解消する方法

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

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

スマホサイトで文字が左寄せになるCSSのバグを解消する方法

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

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

p {
  background-color: #fff;
}

文字の背景色が背景画像とかグラデーションとかでなく、単色の場合に背景色と同じ色を指定します。

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

p {
  background-image: url(img/dummy.png);
}

背景画像を設定していたり、グラデーションを適応していた場合は、透過画像を1px×1pxなどで作り、ダミー画像として背景画像に設定します。

文字を囲っているタグに対して上記のようにCSSを設定すると解消することができました。

文字の部分の背景が単色ならそのままbackground-colorでその色を指定するだけで解消できますが、背景画像を設定していたり、グラデーションなどの場合は透明な画像を作成して、背景画像として指定すれば解消できます。

 

© Debriefing 2019 All Rights Reserved.