2019年9月21日コンテナ内にある要素を横幅いっぱいに広げたい。いろんなサイトを見ていると、セクションによって幅いっぱいに広がっている部分とそうでない部分があったり、柔軟に対応する必要があります。今回は、コンテナ内にある要素を横幅いっぱいに広げる方法について紹介します。CodePen.今回は、カード型ボックスの横並びレイアウトで、インナー内に収まっていますが、背景の要素のみが横幅いっぱいに広がっています。※全画面で表示してご覧ください。50vw);calc関数は、プロパティ値に計算式を使わせてくれる便利なやつです。50vw)でコンテナから解放せよそもそも%とは、親要素を基準とした割合を表す単位です。vw(ビューポート)は、ウィンドウの横幅を基準とした割合を表す単位。この計算結果を左右のマージンに適用するものです。「要素の横幅の半分から、ウィンドウの横幅の半分を引いた分マージンをとる」という意味になりますね。うんちょっと何言ってるかわからないですね。ビューポート(ウィンドウの横幅)が1400px親要素の横幅が1000pxとしましょう。この場合の、50%-50vwは、「500px-700px」となりますね。-200pxのネガティブマージンを左右に適用するということになり、コンテナから要素がはみ出して表示されるということです。こちらのサイトがわかりやすく開設されています。→コンテナからの解放。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。