blog ブログ

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%);
}

上記のように数パターン実装方法があるので、構築状況に応じて使い分けてもいいかなと思います。

お問い合わせのご確認

現在、コーディング業務・デザイン業務の外部委託は行っておりません
ご確認の上、ご連絡いただきますようお願いいたします。