03-6416-3903

平日10:00〜18:00

CONTACT

最新情報 & コラム

親要素の幅を超えて画面いっぱいに表示する方法

ALLWEB

webのデザインをする時には、最初にサイト全体のコンテンツ幅を決めて制作しますが、強弱を出すために「特定のセクションだけ横幅いっぱいにする」というようなデザインにする場合があります。

そのため、コーディングする時には、コンテンツ幅を指定したクラス(以下のようなコード)を各セクション毎に指定していし、コンテンツ幅を超える場合はこのクラスを付与しないという作り方をします。

.container {
    width: 960px;
    margin: 0 auto;
}
section毎にコンテンツ幅を指定したクラスcontainerがある
<section>
    <div class="container">
        <p>ここのコンテンツ幅は960px</p>
    </div>
</section>
<section>
    <div class="container">
        <p>ここのコンテンツ幅は960px</p>
    </div>
</section>
<section>
    <p>containerがないので画面いっぱいにできる</p>
</section>
<section>
    <div class="container">
        <p>ここのコンテンツ幅は960px</p>
    </div>
</section>

しかし、calc()関数を使うことで、中のセクションを親要素の影響を受けずに画面いっぱいにすることができます。

つまり、1つのcontainerでセクションを括ることができるので、画面幅いっぱいに広げるsection要素にだけ、スタイルを指定するだけでよくなるので、コードがcontainerまみれになることを防げます。

calc()を使用する

今回は、画面幅いっぱいに広げる要素に「spread」というクラスをつけて、このクラスに下記のコードを記述します。

.spread {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

上記のコードを解説していきます。

まず左右両方にmarginを50%とすることで、要素がmarginにつぶされてしまい、要素の幅を失ってしまいます。

次にmarginを戻してあげる必要があるので、今度は左右のmarginにマイナス50vwとしてあげると、合計100vwとなり、画面いっぱいに要素を広げることができます。

「潰して戻す」というイメージです。これならどんな幅でも対応することができます。

左右に余白をつける

先ほどのコードで画面幅いっぱいに広げることができましたが、中の要素まで一緒に引き延ばされてしまいます。

そういうデザインならそのままでいいのですが、「背景だけ伸ばして中の要素はコンテンツ幅に揃えたい」ということがあります。

その場合は、今度は先ほど指定した数値を左右のpaddingに指定してあげると、中身だけ戻すことができます。

新しく「spreadContainer」というクラスをつけてコードを記述しました。

.spreadContainer {
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}

HTMLにクラスを付与

その場合のHTMLは下記のとおりです。親要素を超えるsectionに先ほどのspreadというクラスを付与します。

※背景だけ伸ばしたい場合は「spreadContainer」というクラスも付与

全てをcontainer内に入れ、広げるsectionにクラス付与
<div class="container">
    <section>
        <p>ここのコンテンツ幅は960px</p>
    </section>
    <section>
        <p>ここのコンテンツ幅は960px</p>
    </section>
    <section class="spread">
        <p>ここを画面幅いっぱいにする</p>
    </section>
    <section>
        <p>ここのコンテンツ幅は960px</p>
    </section>
</div>

これでspreadというクラスをつけたところだけ、containerを超えて表示されたはずです。イメージとしては下の画像の赤い部分のような感じです。

※paddingを指定したspreadContainerのクラスを付与すると、赤い部分の中の要素は、中の濃いグレーの箇所と揃うようになります。

スクロールバーが出る場合

vw単位は水平スクロールバーを含んだ幅なので、スクロールバーが出てしまわないように、親要素またはhtmlとbodyにoverflow-x:hiddenをかけてあげましょう。

html,body {
    overflow-x: hidden;
}