CSS
CSS3

親要素のpaddingを無視して、画面の横いっぱいに表示するCSS

CSSを書いていて、親要素からはみ出して表示したくなるときってありませんか?
特にスマホの画面などは、左右に余白を設けることが多いかと思います。
下記のようなイメージです。

スクリー<img width=

そんなとき、「Mainの中でこの見出しだけは画面の横いっぱに広げて欲しい」などという要望があると、paddingの一括指定ができなくなってしまいます。
それ以外の要素に対してそれぞれpaddingを指定したり、共通のクラスを付与したりといった対応が必要になります。
前者の場合、mixinにて共通化して呼び出したりでも対応できますが、やっぱりこれも面倒です。

そんなとき、全体にpaddingを指定したままでも、横にいっぱい表示する方法があります。

方法

横いっぱいに表示したい要素に下記を指定するだけです。

  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);

解説

そんなに大したことやっていませんが、簡単に解説します。

  • (100vw - 100%)

画面いっぱい(100vw)からその要素の値を引くということです。
calcを使っているので、単位が違うもの同士の計算が可能になります。
これによって左右の余白(padding)の合計値が取得できます。

  • ((100vw - 100%) / 2 * -1)

2で割って左右どちらかの値にします。
そこにさらに-1をかけることでマイナスの値にして、結果ネガティブマージンを指定することになります。

これによって、左右の余白(padding)分の値を伸ばすことになります。

注意

ただし、1点注意が必要です。
スマホの場合、<meta name="viewport" content="width=device-width,initial-scale=1">のような指定をしても、左右が固定化されなくなってしまいます。
本来であれば、左右のスワイプが効かないので上下のみにスクロールするはずなのですが、左右にもスワイプが可能になってしまうため、画面がグワングワン(?)します。

画面の横いっぱいにリンクを設置した際に、iPhoneのhover処理(タップエリアがグレーアウトされる感じのやつです)が効かなくなってしまう問題を思い出しますが、横いっぱいというのはどうもうまくいきませんね。
左右に1px余裕を持たせてあげれば解決はできますが、よ〜く見ると当たり前ですが1pxの隙間ができてしまいます。

どちらかの問題が受容できるのであれば、とても便利だと思います。
ただ、できればもっといい方法を知りたいので、他にいい方法があれば、ぜひ教えていただきたいです。
よろしくお願いいたします。