ウェブデザインにおいて、要素を意図的にはみ出させることは、ページのレイアウトやデザインを工夫する上で非常に有効なテクニックです。この記事では、CSSを使用して要素を左右にはみ出させる方法について説明します。
要素を左右にはみ出させる
要素を左右に完全にはみ出させるには、以下のCSSを使用します。このテクニックでは、div要素の幅を100vw（ビューポートの幅）に設定し、左側のマージンを計算して中央揃えにすることで、左右にはみ出させます。
CSS
div {
width: 100vw;
margin-left: calc(50% - 50vw);
}解説:
width: 100vw;：要素の幅をビューポート全体の幅に設定します。margin-left: calc(50% - 50vw);：左側のマージンを計算し、要素を中央揃えにします。calc(50% - 50vw)を使うことで、要素の左端がビューポートの左端に揃うように調整します。
要素を左側だけにはみ出させる
要素を左側だけにはみ出させる場合は、以下のCSSを使用します。このテクニックでは、要素を絶対配置し、右端をビューポートの右端に揃えます。
CSS
div {
position: absolute;
height: 100%;
z-index: -1;
right: 0;
width: calc(100vw - ((100vw - 1200px) / 2));
}解説:
position: absolute;：要素を絶対配置にします。height: 100%;：要素の高さを親要素に合わせます。z-index: -1;：要素を背景に配置するためにz-indexを設定します。right: 0;：要素の右端をビューポートの右端に揃えます。width: calc(100vw - ((100vw - 1200px) / 2));：要素の幅を計算し、中央から左側にはみ出すように調整します。ここでは、1200pxが基準幅として設定されており、ビューポート幅と基準幅の差を使って計算しています。
