CSSで記事の一部を画面幅一杯に広げる方法

WordPressではブロックエディタの導入と同時に「全幅」という幅指定が導入されました。ブロックに全幅を指定すると.alignfullというクラスが付与され、画面幅一杯に広がることが望まれます。LPなど１カラムの記事でよくあるデザインですね。

最初からこれを想定して作られたテーマならよいのですが、そうでないテーマ（親要素の幅が画面幅ではない）の場合、全幅表示を実現しようとすると少し工夫が必要です。

この記事ではその方法を解説しました。

今回の記事で全幅表示にしたいHTML

今回は下記のようなHTMLを例にして考えてみます。クラス名はWordPressに合わせています。

<div class="entry-content">
 <p>通常の幅のコンテンツ</p>
 <div class="alignfull">
  <p>全幅表示のコンテンツ</p>
 </div>
</div>

.entry-content {
 width:720px;
 margin:0 auto;
}
p,
.alignfull {
 width:100%;
}

このCSSでは.entry-contentの幅が720pxになっているため、子要素も720pxとなり下図のように.alignfullは画面幅になってくれません。これはWordPressのテーマではありがちの条件だと思います。

今やりたいことは、下図のようにするに一部だけ親要素をはみ出して広げた状態です。

マイナスマージンの設定がポイント

これを解決するのは下記のようなCSSを記述します。わかりやすくするために少し冗長に書いています。

.entry-content {
 width:720px;
 margin:0 auto;
}
p {
 width:100%;
}
.alignfull {
 widht:100vw;
 margin-left:calc( ( 100% - 100vw ) / 2 );
}
.alignfull p {
 margin: 20px auto;
 width 100%;
}

ポイントは次の2つです。

• 幅を100vw
• マイナスマージンを使う

まず、.alignfull要素の幅に100vwを指定します。そうすると親要素に関係なく画面幅に広がってくれます。ところが、このままだと開始点が親要素の左端になってしまうので下図のように画面右側に要素がはみ出してしまいます。

これを解決するには、はみ出した幅（画面左端から親要素の左端までの距離）だけ、マイナスマージンで左に寄せる必要があります。

この長さは画面幅によって変化するので固定値にはできません。そこで出てくるのがcal()です。幅は次のようにして計算することができます。

ただし、このままでは正の数値なのでマイナスにする必要があります-1を掛けてもよいですし、小さい方から大きい方を引いてもマイナスにできます。

margin-left: cal( ( 720px - 100vw ) / 2 );
margin-left: cal( ( 100vw - 720px ) / 2 * -1 );

これでマイナスマージンが計算できましたが、これだと.entry-contentの幅が変わったときに.alignfullのCSSも修正しなければならず面倒です。そこで親要素の幅に自動的に合わせるように100％を指定します。そうするとメンテナンス性が良くなります。

margin-left: cal( ( 100% - 100vw ) / 2 );

また割り算を先にしておけば次のようにもっとシンプルに書くこともできます。

margin-left: cal( 50% - 50vw ) ;

これで、希望通りのレイアウトが実現できました。

あとは仕上げとして中のp要素を.entry-contentと同じ幅にして中央揃えにしておけば完成です。

WordPressやフレームワークで一部のコンテンツだけ全画面表示にしたい場合に是非使ってみてください。