概要
画像エリアとテキストエリアを1:1で分割して、1行ずつ左右交互に配置するレイアウトのこと。基本的にSP用とPC用で縦並び／横並びが切り替わるのが前提となっている。
多くの場合、SP用では同じレイアウトを繰り返す形になるので、SP用のレイアウトを実装してから、PC用に横並びに変更するモバイルファーストの組み方と相性が良いレイアウト。
SP用のレイアウトを実装する
SP用では全てのブロックが同じレイアウトになるので、まずはSP用の1ブロックを実装する。マークアップはPC用で横並びになった時のレイアウトを意識して、大きく画像と見出し＆テキストの2つのブロックに分割しておく。また、<section>の冒頭は見出しで始まるほうが望ましいので、上から順に見出し＆本文→画像となるようにマークアップしておく。
SPで画像のほうを上に配置したい場合、flexboxレイアウトで実装し、flex-directionをcolumn-reverseとすることで実現可能。
.alternate {
display: flex;
flex-direction: column-reverse; /* flexboxアイテム（子要素）を下から上に指定する */
}PC用のレイアウトを実装する
メディアクエリで768px以上の時に横並びになるように変更する。既にflexbox化していますので、基本的にはflex-directionをrow-reverseとすれば横並びになる。
ただし縦幅に対して見出し＋テキストコンテンツは上下中央に配置したいので、テキストブロックのほうを再度display:flexとし、こちらはflex-direction:columnとした上でjustify-content:centerとしておく。
flexアイテム自身にdisplay:flexを指定してflexboxの入れ子を作ることで、複雑なレイアウトでもかなり自由に作ることができるようになる。
@media screen and (min-width: 768px),print {
.alternate {
flex-direction: row-reverse; /* 反転横並びに変更 */
}
.alternate__body {
width: 50%;
display: flex; /* 子要素にも指定 */
flex-direction: column; /* タイトルとテキストを縦並び */
justify-content: center; /* 中身を上下中央に配置 */
}
.alternate__thumb {
width: 50%;
}
}PC用のレイアウトを交互に左右入れ替える
PC用のレイアウトの左右を入れ替えるには、偶数番目のブロックのflex-directionをrowに変更する。指定方法としては各ブロックに偶数か奇数かを判別するためのclassを追加する方法と、市松レイアウト領域全体を囲む親要素を追加して、親要素内での出現順で自動的に軸方向が変更されるようにする方法の2つが考えられる。どちらでも実現可能だが、前者の方が運用の自由度は高くなる。
<section class="alternate _reverse"> //左右を入れ替えるクラスを追記
～省略～
</section>@media screen and (min-width: 768px),print {
.alternate {
flex-direction: row-reverse;
}
.alternate._reverse {
flex-direction: row; /* 左右を入れ替える */
}
}テキスト量が増えても問題ないように調整
市松レイアウトはテキスト量が多くなってテキストエリアの高さが画像の高さを超える状態になると、画像エリアに余白が生じてレイアウトが崩れてしまう。そのため万一テキスト量が増えても画像の高さとテキストエリアの高さが常に揃うように調整しておく必要がある。
flexboxで横並びした場合、画像エリアとテキストエリアの高さはすでに揃っているので、画像の高さをheight: 100%とし、画像が歪んでしまわないようにobject-fitでトリミング調整すれば良い。
@media screen and (min-width: 768px),print {
.alternate__thumb img {
height: 100%;
object-fit: cover;
}
}