ギャラリーサイトなどでよく見かける、画像を敷き詰めてタイル状に並べたグリッドレイアウトを実現するには、「Masonry」に代表されるjQuery/Javascriptプラグインを利用することで、表示幅を計算して簡単に自動で配置することができますが、Javascriptを利用するという点で、少々敷居が高く感じてしまう方も多いかもしれません。
しかし、現在はメジャーブラウザ(IEはv.11〜)で多くのCSS3のプロパティをサポートしているため、簡単なMasonryグリッドレイアウトであれば、CSS3のFlexboxのみで表現可能です。
というわけで、今回はFlexboxを利用したレスポンシブ対応のMasonryレイアウトのサンプルをご紹介します。
See the Pen Pure CSS Masonry Gallery with Flexbox by digistate (@digistate) on CodePen.
コード解説
HTMLの構成
まず、フレックスボックス表示の対象となるグリッドレイアウト全体は .flexbox セレクタで囲っています。
その中に、タイル化するフレックスボックスアイテム(div)を .item セレクタを付けて必要な数だけ追加しています。
サンプルでは個々のフレックスボックスアイテム内に、画像(img)とタイトルテキスト(.title)を入れています。
<div class="flexbox">
<div class="item">
<img src="画像のURL" />
<p class="title">タイトル</p>
</div>
:
</div>
CSS
フレックスボックスエリア全体
まずは、フレックスボックス化する対象の .flexbox をフレックスボックスとして定義しています。
.flexbox{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
height: 100vw; /* ビューポート(幅)を基準に表示高を指定 */
}
flex-direction: column; とするとアイテムを垂直(列)に並べるようになり、flex-wrap: wrap; とすることでアイテムがオーバーフローした際に、下に折り返すように指定しています。
これだけでは、高さの制限がないため1列でアイテム(画像)が並んでしまうので、Masonryのようにするために高さ(height)を指定します。
サンプルでは height: 100vw; の部分です。
個々のフレックスボックスアイテム
各フレックスアイテム(div)には、.item というセレクタをつけているので、これに対して表示したいカラム数から算出される表示幅(3カラム = 33.3%)だけを指定するだけでオーケーです。
.item{
width: 33.33%;
}
レスポンシブ化(メディアクエリ)
グリッドレイアウトで必ず考慮しなければいけないのが、モバイル端末を意識した表示幅に応じてカラム数が可変するようにレスポンシブ化することです。
今回のサンプルでは以下のようにしています。
/* 表示幅が860px以下 */
@media ( max-width : 860px ){
.flexbox{
height:220vw;
}
/* 2カラムにする */
.flexbox .item{
width: 50%;
}
}
/* 表示幅が667px以下 */
@media ( max-width : 667px ){
.flexbox{
height:auto;
}
/* １カラムにする */
.flexbox .item{
width: 100%;
}
}
表示幅が860ピクセル以下になると、フレックスボックス全体の高さを変更(220vw)し、フレックスボックスのアイテムの幅を50%に広げることで、2カラム表示にしています。
同様に、表示幅が６６７ピクセル以下になったときは、アイテムの表示幅を100%にして１カラムにしています。
ちなみに、DigiPressテーマの専用プラグインである「Shortcodes for DigiPress」では、FlexboxのCSSの知識がなくても簡単にコンテンツをフレックスボックス化するショートコードが用意されています。
「Shortcodes for DigiPress」を使ったフレックスボックス表示例は以下で公開しています。