【CSS】子要素を親要素の幅を超えて画面幅いっぱいにする方法

親要素に依存せず子要素を画面幅いっぱいに表示したい場合は「vw」と「calc」を利用すると実現できます。
注意点

親要素の幅が画面幅より広くなった場合、子要素が想定した幅にならない可能性が高いので、 別途レスポンシブなデザイン(CSS)が必要になります。

vwはスクロールバーの幅を考慮しないので、スクロールバーが表示された場合はレイアウトが崩れてしまいます。
そのため、常時スクロールバーが表示するようにしてスクロールバーの幅を考慮したマージンを設定する等の対策が必要になります。
(対応例)
この記事は役に立ちましたか?
  • 役に立った(0)
  • もっと詳しい情報が必要(0)
  • 情報が古かった(0)
  • 目的の情報では無かった(0)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする