ITエンジニア/デザイナ向けにオープンソースを毎日紹介

画像やテキストがおり混ざったコンテンツを綺麗に並べるのは意外と大変です。CGM系でユーザが自由に投稿できたりすると、そういった高さの可変まで考慮してデザインを考えないといけません。

さらにそれがレスポンシブで多数のデバイスに対して綺麗に表示することを考慮するなんてなるとさらに大変でしょう。そこで使ってみたいのがSmart Content Placerになります。

Smart Content Placerの使い方

こちらは幅が広い場合。
こちらは幅が広い場合。

狭めた場合。コンテンツがいい感じに自動的に再配置されます。
狭めた場合。コンテンツがいい感じに自動的に再配置されます。

さらに縮めてスマートフォンサイズにした場合も綺麗に並びます。
さらに縮めてスマートフォンサイズにした場合も綺麗に並びます。

Smart Content Placerを使えばまさにスマートにコンテンツを配置してくれます。レスポンシブに対応しており、幅を変えるとアニメーションしながら綺麗に移動してくれるのが格好いいです。

Smart Content PlacerはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Smart Content Placer by Jason Mayes

jasonmayes/Smart-Content-Placer

 

MOONGIFTの関連記事

  • DevRel
  • Com2