PICKUP BUILID施工事例

• 
• 
• 
• 

リビングリビングリビングリビングリビングリビングリビング

• 
• 
• 
• 

トイレトイレトイレトイレトイレトイレトイレトイレトイレトイレトイレ

• 
• 
• 
• 

［例.1］
一応、cssを調整すれば、無理やり縦横混ぜたレイアウトでも再現可能できる風の例。
希望するレイアウトとしてはこんな感じという事でしょうか？

但し、ちょっと無理やりな感じです。
縦長画像の下に登録された画像は、「overflow: hidden;」で無理やり見れなくしているだけです。

サブ.1：横長
サブ.2：横長
サブ.3：縦長
サブ.4：↑上の縦長画像に押し出されて、可視領域から不可視領域にはみ出してるため見えていないだけ
サブ.5：横長
サブ.6：横長

• 
• 
• 
• 

［例.2］
一応、cssを調整すれば、無理やり縦横混ぜたレイアウトでも再現可能できる風の例。
希望するレイアウトとしてはこんな感じという事でしょうか？

縦長、横長、おりまぜて登録は可能ですが、
理屈としては、［例.1］の通りなので、
縦長の画像を登録する際は、
『サブ.1』『サブ.3』『サブ.5』の【奇数】に登録して頂ければOKです。
その再、＜縦長の画像を登録した次の番号へは画像を登録しない＞という使い方になります。

• 
• 
• 
• 

［例.3］
間違って偶数列に縦長の写真を登録してしまうと、変な感じの表示になりますです。

なので、今回のものを採用する場合は、［例.2］の登録方法を守って頂く必要があります。

HTML側やマークアップから見直せば、もう少しよい書き方もあるかもしれませんが、
とりあえず、cssだけで整えようとすれば、こんな感じでしょうか。
common.css、3745行目～3787行目辺りでcssを書き直してあります。
理屈としては、今まで同様、imgに対しての「object-fit:cover;」を多様してサイズ感を整えてあります。
今回の書き方は、IEだと厳しかったので、今までは避けてましたが、
Chrome、Edge、Firefox等のモダンブラウザであれば問題ないので、IEが廃止されたからこそ書けるやり方かなーと思います。

• 
• 
• 

洋室洋室洋室洋室洋室洋室洋室洋室洋室洋室洋室洋室洋室

• 
•