< pocket

Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法

Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法

かなり前に、スマホ版の関連ニュース一覧の表示をスマートニュース(SmartNews)風にしたいな〜と思い、Flexboxを使って実装してみました。その当時はちょうどFlexboxを覚えたばかりで、個数や画面幅が変わっても柔軟に対応できるのを知って大変感動したのを覚えています。

というわけで、今回はそのとき感じた「知ってよかった!」の気持ちを振り返りながら実装方法をメモしておこうと思います。

スマートニュース(SmartNews)風の表示とは

「スマートニュース(SmartNews)」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。

読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。

スマートニュース(SmartNews)画面

SmartNews

ただ、この見た目をfloatdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ!

Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法

以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。

See the Pen Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する by 彩 (@maritime_color) on CodePen.

実装のポイント

親要素にdisplay: flex;とflex-wrap: wrap;を指定する

実装のキモはやっぱりFlexbox!親要素であるulタグにdisplay: flex;を指定しましょう。さらに、並びを複数行にわたって配置するために、flex-wrap: wrap;も併せて指定してください。

  display: flex;
  flex-wrap: wrap;

:nth-child()で表示を切り替える

:nth-child()を使って要素の順番によってwidthborderの有無などのcssを切り替え、デザインに変化を与えます。

:nth-child()で表示を切り替える

ここでは1〜2個めは2つ並び、3〜5個めは3つ並び、6つめ以降は縦並びというようにcssを指定しています。

/* —————— 1〜2個め(2つ並び) —————— */
li:nth-child(-n+2){
  width: 50%;
}

/* ------------ 3〜5個め(3つ並び) ------------ */
li:nth-child(n+3):nth-child(-n+5){
  width: 33%;
  border-top: 1px solid #ddd;
}
li:nth-child(n+3):nth-child(-n+5) p{
  /* 行数が多くなるため4行で省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

/* ------------ 6個め以降(縦並び) ------------ */
li:nth-child(n+6){
  border-top: 1px solid #ddd;
}
li:nth-child(n+6) a{
    display: flex;
 }
li:nth-child(n+6) .image{
    width: 30%;
    margin: 0 8px 0 0;
 }
li:nth-child(n+6) p{
    flex: 1;
 }

数が足りない時はflex-grow: 1;で要素の幅を伸ばす

今回のサンプルでは7つの記事を一覧で表示させていますが、例えば記事が7つに満たなかった場合も大丈夫!flex-grow: 1;を指定すれば、スペースが余っても要素の幅を伸ばすことが可能なんです!

子要素(liタグ)に以下の一行を足せばOK!

flex-grow: 1; /* 要素の数が足りない時に幅を伸ばす */
数が足りない時はflex-grow: 1;で要素の幅を伸ばす

-webkit-line-clampで行数を調整

こちらは必須ではありませんが、見た目の調整のために!

以下のように3列表示にした場合、スマホだと文字の折り返しが多くなって高さが出すぎてしまうので、途中でテキストを省略したくなりますよね。

-webkit-line-clampで行数を調整

そんな時は-webkit-line-clampを使って指定した行にクランプ文字(…)を付与してみましょう。ここでは4行で省略するために「4」を指定していますが、任意の数字に変えてOKです。

さらに、overflow: hidden;ではみ出した部分を非表示にすれば完成です!

  /* 行数が多くなるため4行で省略 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

-webkit-line-clampは、IEやEdge、Firefoxに対応していないため、PCでの使用にはまだ向いていないかもしれませんが、ChromeやiOS Safari、Android Browserなどには対応しているので、スマホサイトでの導入であれば問題ないと思います。

-webkit-line-clampのブラウザ対応状況

Can I use… Support tables for HTML5, CSS3, etc

さいごに

いかがでしたか?私がFlexboxを初めて実務で使ったのがこのスマートニュース(SmartNews)風の表示方法でした。それまではfloatばかり使って要素を並べていたのですが、Flexboxを使ってみてこんなに簡単に実現できるのかと感動したのをお覚えています。

最近では、要素を横並びにする時は、柔軟に対応できるFlexboxを主に使うようになりました。まだ勉強の最中ですが、今後もFlexboxを使って色々なことができたら楽しいなと思います。

以上、彩でした!

この記事をシェアする!

コメント

0件のコメント

コメント

もし何かコメントをいただければ幸いです。また、ご指摘等も大歓迎です。
よろしくお願いします。(※Eメールアドレスは公開されません)

トラックバック

トップに戻る