フロートで2段組みレイアウト
floatプロパティは、画像の周りに文章を回り込ませたり、要素を左右に寄せるときに使われるプロパティ。そんなfloatプロパティを使って段組みレイアウトしてゆきます。
Works
カルーセル（デフォルト）
CSS「scroll-snap-typeプロパティ」と、JS「Intersection Observer API」を使ったスクロールカルーセル。
一覧要素をふたつのdiv要素で括る。
複数の項目を一覧にしたマークアップ（例えばul/li要素）の、親要素（ここではul要素）にクラスcarousel_containerを付与し、その一覧を.carousel_container要素で括り、さらに.js-carousel要素で括る。
アーカイブ一覧のカルーセル
アーカイブ一覧.c-archivelist要素に、クラスcarousel_reelを併記し、カルーセルにしている。
.js-carouselに、クラス-gradientを付与すると、左右がグラデーションで消えてゆく。
適宜、項目の幅や矢印UIの位置などを専用CSSファイルで調整している。
インライン・ブロックで2段組みレイアウト
要素をインラインレベルのブロックコンテナとして表示する値「inline-block」を使って段組みレイアウトしてゆきます。
テーブルレイアウトで2段組みレイアウト
要素をtable要素のように表示する値「table/table-cell」を使って段組みレイアウトしてゆきます。
フレキシブルボックスで2段組みレイアウト
要素をフレキシブルにレイアウトするための値「flex」を使って段組みレイアウトしてゆきます。
カラムを使って2段組みレイアウト
columnsプロパティは、段落が横に長すぎる場合に、一定の幅で文章を列ブロックに分割するためのプロパティ。そんなcolumnsプロパティを使って段組みレイアウトしてゆきます。
グリッドで2段組みレイアウトとまとめ
要素内にグリッドを生成して自由にレイアウトするための値「grid」を使って段組みレイアウトしてゆきます。
Instagram風
.js-carouselに、クラス-instagramを付与すると、UIがInstagramっぽくなる。