calc()で片側にだけボックスを広げる
calc( 50% – 50vw )を片側だけに適用する方法。
h2要素をheader要素で囲み、after疑似要素で装飾用の背景ボックスをコンテナ枠内の幅100%でまず作成しておき、それを片側だけブラウザ幅まで引き伸ばすことで「片流れ」の状態を再現している。ベースとなる状態がコンテナ幅と同じで、そこから片方だけにはみ出すようなケースではこの手法が一番簡単に実装できる。上下方向のネガティブマージンとも併用すれば、「片流れ」かつ「重なり」の表現も可能。
<section class="section">
<header class="section__header _normal">
<h2 class="section__ttl">常夏の楽園</h2>
</header>
<p class="section__txt">この文章はダミーです。</p>
</section>.section__header::after {
content: "";
display: block;
height: 10vw;
min-height: 100px;
background: #cdecf0;
}
.section__header._normal::after {
margin-left: calc(50% - 50vw);
}
.section__header._reverse::after {
margin-right: calc(50% - 50vw);
}疑似要素を絶対配置する
「影」としての背景色エリアは、レスポンシブで全面オブジェクトの形状が変化した場合、基本的にそれに連動して同じようにサイズが変わるようにしておく必要がある。そのためまず全面オブジェクトを基準として疑似要素をposition: absoluteで絶対配置し、width／heightを100%とすることで連動して形が変化するボックスを作成し、それをleft／right／top／bottomなどのプロパティで必要な量だけずらすようにする。
また、絶対配置している要素を親要素の幅に関係なくブラウザ端まで伸ばしたい場合は、ネガティブマージンではなくwidthで直接vw単位の幅を指定しておけば問題ない。1：1で横並びしているボックスの場合は、ボックスの中央のラインからブラウザ端までのサイズを指定することになるので、単純に50vwとする。
.alternate__thumb {
position: relative;
}
.alternate__thumb::after { /* 疑似要素で全面オブジェクトと同じサイズの影を作る */
position: absolute;
top: -30px;
z-index: -1;
content: "";
display: block;
width: 100%;
height: 100%;
background: #cdecf0;
}
.alternate._normal .alternate__thumb::after {
right: 30px; /* 基準点が右端となるようにrightでずらす */
}
.alternate._reverse .alternate__thumb::after {
left: 30px; /* 基準点が左端となるようにleftでずらす */
}
@media screen and (min-width: 768px),print {
.alternate._normal .alternate__thumb::after {
right: 50px;
width: 50vw; /* widthでボックス幅自体を広げる */
}
.alternate._reverse .alternate__thumb::after {
left: 50px;
width: 50vw;
}
}背景色のグラデーションで塗り分ける
ボックスそのもののサイズや余白を変化させるのではなく、linear-gradient()で塗り分けてしまうという手法もある。その手法だと視覚的にずれたように見せているだけで物理的には単純なボックスの状態が維持されているため、隣接する要素との配置の兼ね合いなど、考慮すべき項目が減ってレイアウトが楽なのがメリット。
@media screen and (min-width: 768px),print {
.bigCard { /* エリア背景をグラデーションで塗り分ける */
background: linear-gradient(
to bottom,
#fff 100px,
#cdecf0 100px,
#cdecf0 calc(100% - 130px),
#fff calc(100% - 130px));
}
}