アイテムリストとは、私が作ったWeb造語(参考)なのですが、いわゆる「ブログ記事一覧」とか「ECサイトの商品一覧」とか、ひとかたまりのコンテンツが決まった体裁で並ぶデザインのことです。
この記事では、Gridの機能の中でも、Block Gridという機能を使って、簡単に作ってみましょう。
前提条件
まずはこちらをお読みください
- Zurb Foundation 導入前の予備知識
- Zurb Foundation 6で、Grid(レスポンシブ対応段組機能)を理解し実用する(基本編)
- Zurb Foundation 6のGrid(レスポンシブ対応段組機能)について、小ネタとTips編
XDでこんなカンプを作ってみました。
PCの時
タブレットの時
スマホの時
要は、
スマホ | タブレット | PC |
---|---|---|
2カラム | 3カラム | 6カラム |
であり、アイテムの幅は均等である、ということです。
実践
hoge.html
<div class="row small-up-2 medium-up-3 large-up-6">
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
<div class="columns">
<div class="inner">
<p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
<h2>見出しです</h2>
<div class="desc">
<p>ディスクリプションです ディスクリプションです ディスクリプションです ディスクリプションです </p>
</div>
<p class="text-right more"><a href="#">続きを読む ></a></p>
</div>
</div>
</div>
app.css
.inner {
border: 1px solid #ddd;
padding: 15px;
}
.eyecatch {
margin-bottom: 1em;
& img {
width: 100%;
}
}
.columns {
margin-bottom: 30px;
}
h2 {
font-size: 17px;
}
.desc {
font-size: 12px;
}
.more {
margin-bottom: 0;
}
結果
PCの時
タブレットの時
スマホの時
解説
通常のグリッドでは、.row
の中のカラムに降るクラスにつける数値の総和が12になるよう、というように書きました。しかし、Block Gridでは総和でなく、.row
の中で均等に割りたい数値を、.row.画面幅-up-n
と記載します。逆に、.columns
に対しては他にクラスをふる必要はありません。
Block Gridのイイトコロ
Gridではカラムの総和を常に考えないといけませんでしたが、Block Gridは割りたい数を指定すればいいだけなので、大変直感的です。
また、5や7といった素数で割ることもできます。多くのGridシステムが12という母数を採用しているのは、偶数と3の倍数で割りやすいからと言われていますが、時によっては5や7で割りたい時もあると思います。Block Gridは、8までであれば自由な数で割ることができます。
これはBootstrapなど他のCSSフレームワークにはないので、個人的にFoundationを気に入っている機能のひとつです。