2022.08.26
inner内部のコンテンツをフルサイズで表示するCSSテクニック
はじめに
innerでwidthが制限されているコンテンツに対して、横幅をウィンドウいっぱいのフルサイズで表示したい時に使用するCSSテクニックです。
基本の記述
.hoge {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}margin top / bottomが無い場合
.hoge {
width: 100vw;
margin: 0 calc(50% - 50vw);
}ネガティブマージンを使いたく無い場合
.hoge {
position: relative;
left: 50%;
width: 100vw;
transform: translateX(-50%);
}上記のように数パターン実装方法があるので、構築状況に応じて使い分けてもいいかなと思います。