こんにちは。
モンブランの江藤です。
モンブランではデザインにこだわったサイトが多く、
（もちろん使いやすさが前提ですが）
全ページシンプルで見ただけで組み方がわかる！
というようなレイアウトを組むことはあまり無いです。
今回はそんな中でも特に変わったレイアウトのコーディングを紹介しようと思います。
htmlとcssですごろくを表現？？
ご紹介するのは半径数キロの範囲で不動産をされている、「住まいの松栄」様から！
コーディングはわたくし、江藤が担当しました。
不動産業だけでなく、まちづくりにも積極的に参加されておられるお客様で、
サイト自体もイラストをふんだんに使った、柔らかい雰囲気のサイトとなっております。
そんな松栄さんのコーディングで一番大変だったのはここ
すごろくをhtmlとcssで表現
デザインを初めて見た時思いました。
「これ流石にガッツリ組まないよね？？画像でいいよね？？」
ダメでした。
これテキスト部分は基本的にテキストで、1個1個ちゃんと組んでます。
しかもちゃんとフルレスポンシブです。
めちゃくちゃ頭使いました。。
ざっくりとした基本的な組み方としてはFlexで横並びにした要素を作って、
重なるようにtransformで位置を動かしてるような感じです。
全部説明するのは流石に厳しいので一部を説明できればと思います。
画像の青背景 BOX01は通常通り左から右に横並び。
緑背景 BOX02は並び順を右から左にして（スマホ時小さいboxが上に来るため）要素の高さ分をtranslateYで上にずらす。
赤背景 BOX03はまず一番左の大きいマスに幅を指定して、コンテンツ幅からそのマス分のmarginを右側に設定。
小さいマスと一番右下のマスを一括りにして、高さ分をtransformで位置を上にずらす。
これで3つのマスを下揃えにしました。（他に方法ありそうな気がします。）
スタッフさんの写真が入ったマスは、赤背景 BOX03に対してposition:absolute;で位置指定しています。
あとはこんな感じの組み方をレイアウト・マスの数に応じてひたすら調整していきました。
前回同様、このレイアウトも調べて出てくるものじゃないので、
ほんと脳トレのようなコーディングでした。笑
正直こういう未知のレイアウトを組むときはめちゃくちゃしんどいですが、
その分それができた時は全人類に話したくなるくらい嬉しいです。
コーダー同士でここができた自分を褒め合う会！とかしたいですね。笑
今回ご紹介した「住まいの松栄様 すごろくレイアウトページ」はこちら！
ぜひ実際にご覧ください！