CSSを書いていて、親要素からはみ出して表示したくなるときってありませんか？
特にスマホの画面などは、左右に余白を設けることが多いかと思います。
下記のようなイメージです。
そんなとき、「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）分の値を伸ばすことになります。
下記でより詳細に説明しています。
もしよろしければこちらもご確認ください。
より詳細な説明
注意
ただし、１点注意が必要です。
スマホの場合、<meta name="viewport" content="width=device-width,initial-scale=1">のような指定をしても、左右が固定化されなくなってしまいます。
本来であれば、左右のスワイプが効かないので上下のみにスクロールするはずなのですが、左右にもスワイプが可能になってしまうため、画面がグワングワン（？）します。
画面の横いっぱいにリンクを設置した際に、iPhoneのhover処理（タップエリアがグレーアウトされる感じのやつです）が効かなくなってしまう問題を思い出しますが、横いっぱいというのはどうもうまくいきませんね。
左右に1px余裕を持たせてあげれば解決はできますが、よ〜く見ると当たり前ですが1pxの隙間ができてしまいます。
⇛ 追記）ブラウザのバージョンによって異なるようです。
どちらかの問題が受容できるのであれば、とても便利だと思います。
ただ、できればもっといい方法を知りたいので、他にいい方法があれば、ぜひ教えていただきたいです。
よろしくお願いいたします。