2011-11-14

ホームの記事一覧をグリッド表示に

味も素っ気もないリストから既に廃れ始めた感のあるグリッドに変えてみました。一覧性があるようなないような微妙な感じですね。すぐ戻しそう。

普通にfloatプロパティを使って作りました。モックアップのコードで解説すると、各記事のHTMLが、

<section class="sub-news">
  <h3><a href="http://example.com/blog/entry">Entry Title</a></h3>
  <p>Entry Summary</p>
</section>

となっているので、このsection要素の高さをうまく固定して並べます。

.sub-news {
  margin: 0 0.7%;
  float: left;
  width: 32%;
  font-size: 75%;
}

.sub-news h3 {
  margin: 24px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sub-news p {
  margin: 24px 0;
  height: 84px;
  display: block;
  overflow: hidden;
}

並べるのは幅を適当に指定してfloatプロパティで良いですが、ちゃんと高さを揃えてやらないとうまく並ばなかったりすることがあります。そのためにh3要素ではwhite-spaceとoverflowプロパティを使って複数行にならないようにし、p要素ではheightとoverflowプロパティで4行以上にならないようにします。実際のCSSは他のルールとの兼ね合いなどもあって、もうちょっと複雑になっています。高さの計算などはSassでやってたりとかするので、書くのは面倒ではないですけどね。

もっと手軽にjQuery MasonryとかBrickmaker-jsなど敷き詰める系のJavaScriptライブラリを使っても良いかもしれないですね。文字だとちょっと読みづらいかもしれませんが。

狭い画面では今までと同じようにリスト表示にしてます。HTMLはそのままでh3でlist-itemにしてやってます。

CSS Multi-column Layout Moduleを使った奴も書いてみました。Opera 11で普通にずれました……。カラム切り替えのタイミングがちょっと違うようなので、ちゃんとcolumn-break-before等で制御しないとダメそうですね。まぁそれよりもそもそもカラム・レイアウトのためのもので、グリッド・レイアウトのためのものではないので、読まれる方向と並び方が噛み合っていないですね。Grid Layoutさん……。