Hail2u.net

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

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

普通に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-spaceoverflowプロパティを使って複数行にならないようにし、p要素ではheightoverflowプロパティで4行以上にならないようにします。実際のCSSは他のルールとの兼ね合いなどもあって、もうちょっと複雑になっています。高さの計算などはSassでやってたりとかするので、書くのは面倒ではないですけどね。

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

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

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

追記

そのままだと空白がバラバラでなんか揃っているのに揃っていない感じだったので薄い半透明の背景をちょっと加えました。ボタンっぽいイメージになると思うので、ついでにa要素で括って全体をクリックできるようにも。最初はなんかいまいちだなーとか作っときながら思ってましたが、段々気に入ってきました!