「30DAYSトライアル2nd」はこちらホームCSS子要素を親要素(インナー幅)からはみ出して画面いっぱいにするCSSCSS2020年2月11日ツイートシェアB!はてブポケット子要素を親要素からはみ出して画面いっぱいにするは、今まであれば親要素から出してコーディングし直すというのが一般的でした。今ではcalcとvwとい新たなCSSの概念があるので、子要素を親要素からはみ出して画面いっぱいにするということが簡単にできるようになっています。おわりサンプルHTMLを作るまずはサンプルとなるHTMLを作っていきます。このHTML構造とクラスを使って作っていくので、一緒に進めたい方は同様に作ってください。class="body">ここはインナー幅の中</div></div></div>.innerには以下のような指定をしています。12px;}現時点の表示としては以下のような感じですね。ちなみに、このinnerの書き方は実際のコーディングで頻出する書き方なので、ぜひ使えるようになっておきましょう!レイアウトの基本である.innerの中央寄せを覚えよう!子要素を画面いっぱいにするCSSの書き方それでは、上記HTMLの中の.fullを親要素からはみ出して画面いっぱいにしてみます。100vw;}このCSSを当てた状態で表示を確認してみると、以下のようになっていることが分かるはずです。100vw;は画面いっぱいにするための指定です。100%;は親要素に対しての相対的な値に対して、100vw;はウインドウサイズいっぱいの値になります。いうことで、100vwを指定することによって、幅としてはウインドウサイズになるわけですね。あとは、これを正しい位置に設置してあげればOKということです。ちなみに100vwだけを指定した場合の表示は以下のような感じです。50vw);は何をしているかというと、親要素の半分の幅だけずらして、画面の半分の幅だけ戻すということをしています。-50vw;をそれぞれ試してみてください。-50vw;でウインドウの半分戻す。リンク画面いっぱいにして親要素の幅に戻す方法さらに、背景だけ画面幅いっぱいにして中のコンテンツは親要素の中に収めたいってケースもあります。50%);を追加するだけです。今回の例では、もともとpaddingを使っていたので、そこを考慮すると、以下のようになります。100vw;}これを表示させてみると以下のようになりました!わたしはmarginの逆って覚えています。100vwには注意すべき点があって、それがスクロールバーの幅を含むという点です。100vw;すると、スクロールバーがあるページだとはみ出てしまうということですね...。水平スクロールされてかっこ悪い結果となってしまうので、注意して対応しておきましょう。hidden;させるだけです。今回の例だと親要素の.contentに対して指定してあげてください。100vw;のセットを覚えておくだけでもOKです。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。「WAI-ARIA」を使ったHTMLのコーディング例はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。