🔭

気になる余白 (EOTD No.7)

2020/12/14に公開

こちらAmetaです！
第7回目のEOTD(Error Of The Day)です。

本日のエラー

左端にある小さな隙間...。

今日開発を始めたアプリケーションのホームページをデザインしている最中に気がつきました。

header, body, footer。全ての要素でwidth; 100vwとして設定しているのですが、なぜか横方向へのスクロールバーが表示されてしまいます。

そして実際にスクロールしてみると、写真のような余白が表示されるのでした。

100vwと言う表記に問題があるのではと思い、100%を試してみました。

すると、横方向へのスクロールバーは消えました！

しかしながら、さっきは左端だけだった余白が右端にも出現するはめに。。。

今日、この問題を解決する方法は見つけれらませんでした。

ただ、100vwと100%の違いはわかったのでその点をまとめておこうと思います。

vwは表示領域の幅を100等分した単位です。

一方で、%は親要素を100%として子要素の幅を指定する時に使用することができます。

つまりvwはブラウザで表示されている領域に対して、%はhtmlの親要素に対して変化を付けたい時に使用するものです。

もう一つの違いとして、vwは表示領域の中でも与えられた場所のみで可動。
もしhtml全体にmarginなどがかけられている場合はそこはvwの対象外となります。

以上の違いを踏まえて、、

横方向へのスクロールが取り除けた理由は、100vwから100%に変更したことで、幅がスペース全体に適応されているからだとわかりました。

操作に支障はないのでこのまま開発を進めていきますが、開発が終わるまでには解決したい課題ができました。。