インナー幅からはみ出して横幅100%にする方法

2025年2月6日

コーディングの際、innerクラスやcontainerクラスなどでデザインが崩れないようコンテンツ幅を決めてコーディングすることがほとんどです。

<div class="sample-wrap">
    <div class="inner">
        <p>コンテンツ幅のテキスト</p>
    </div>
</div>

.inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-block: 200px;
  background: #ddd;
  height: 100vh; //　視覚的にわかるよう設定
}

p {
  background: pink;
  padding-block: 10px;
  text-align: center;
}

デザインによっては、一部の背景やコンテンツのみ親要素をはみ出して、横幅100%にするケースもあります。
インナー幅をはみ出して横幅100%にする方法を解説します。

この記事でわかること

一部の要素のみインナー幅からはみ出して横幅100%にする方法

インナー幅を指定する理由
インナー幅からはみ出して横幅100%にする方法
まとめ

インナー幅を指定する理由

そもそもコーディングの際にインナー幅を指定するには理由があります。

画面の横幅いっぱいにコンテンツが広がると、行の長さが長くなりすぎて可読性が低下する。
画面サイズが変わっても、コンテンツの最大幅が統一されるため、デザインの一貫性を保てる。
レイアウト崩れの防止

このような理由から、コンテンツのインナー幅（最大幅）を指定して、上記の例のようにインナー幅にコンテンツを収めるようにします。

このインナー幅に収まっている要素（innerの子要素）でもcssを指定することで、親要素をはみ出して、横幅100%にすることができます。

インナー幅からはみ出して横幅100%にする方法

インナー幅からはみ出して横幅100%にするには、次のcssを指定します。

margin-inline: calc(50% - 50vw);

このスタイルは、左右の余白を無くして横幅を100%にする計算式です。

<div class="sample-wrap">
    <div class="inner">
        <p>インナー幅のテキスト</p>
        <p class="w100">横幅100%のテキスト</p>
    </div>
</div>

.inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-block: 200px;
  background: #ddd;
  height: 100vh;  //　視覚的にわかるよう設定
}

p {
  background: pink;
  padding-block: 10px;
  text-align: center;
}

.w100 {
  margin-inline: calc(50% - 50vw);
  background: lightblue;
}