久々にHPを作ったんですが、いつもながらスマホ対応には苦労させられました。
色々あるのですが、一番はこれ！
上下左右にできた謎の空白スペース。
このせいでHPが縮小してしまうのでLPの場合はインパクトも減少してしまうし頂けない事態だ。
ただコーディングについて勉強したのがスマホ出始めの頃だったため、レスポンシブとかほんっと苦手。
とりあえず先人のお力だけが頼りなので、ネットでひたすらググります。
問題点
サーバーにアップ後に出る。
ローカル状態だと出ない。
chromeの拡張機能で確認、またアップ後のURLを自前のAndroidで確認してもやっぱりスペースがあった。
解決法1、viewportを確かめる
以前にも右側にスペースが出てしまうことがあって、その時はviewportを付け忘れていたせいだった。
だが今回はちゃんと装備済み。
- <meta name=”viewport” content=”width=device-width,initial-scale=1″>
デバイスによって表示の大きさを合わせますよ。
はじめの表示サイズは1倍にして表示させるよ。という意味らしいですね。
合わせてないけどね！！
試しに以下に変更してみた。
- <meta name=”viewport” content=”width=1024,initial-scale=1″ />
表示した直後は拡大されて表示されるが、タップをすればちゃんと幅100%に！
最悪この方法か・・・？
widthの値を小さくすればあまり拡大しなくなるし…とはいえデバイスはいろいろだし、今回はタブレット～スマホまでをこちらのhtml+cssで対応させるのでデバイスに幅があり過ぎるしな～。
ということで却下！
解決法2、bodyのpadding、marginは？ 他の要素のpaddingは？
ちゃんと0になっています。
100%にpaddingが付くとはみ出るらしいので、他の要素でも確認。
修正しましたが、やっぱりスペースは消えません。
解決法3、全体を囲んでoverflow: hidden;
body内直下を
で囲み
#wrap{
overflow: hidden;
padding:0;
margin:0;
}
を指定するとはみ出る要素が消えてスペースが消えるそう！
ワクワクしながら試すも・・・消えない！！
解決法4、borderで囲み確認
打つ手なし・・・仕方がないのでひとつひとつの要素を確認していきます。
すると全部の要素、さらにはbodyまでもこのスペースの枠内で収まっているのじゃないですか。
bodyのpaddingもmarginも0なのにナゼ？？？
ここにきてあれがないことに気づき、以下を設置します。
*{
padding:0;
margin:0;
}
すると・・・消えた～～～！！！
自前作成の場合アスタリスクは初めに書くんですが、今回は参考サイトからcssを拝借→改変をしていたから、気づかなかったようです。
それにしても*（アスタリスク）≒body
ちょっとだけ*のがより大きな要素っていうイメージくらいしか持っていませんでした。恥ずかしい。
調べ直してみました。
すると『*は全ての要素に適用される』とのこと。
すると書着だしていない要素のpadding、marginがこの謎のスペースを作り出したってことなのかしら？
しょっぱなに登場させたことしかないけど、p *｛ なんて使い方も出来るらしい。
もっと使いこなさないといけないですね。