[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway

去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。

そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です!

サイトのキャプチャ

driveway -GitHub

drivewayの特徴

drivewayは、レスポンシブ対応のMasonryレイアウトをピュアCSSで実装するMITライセンスのCSSです。

デモのアニメーション
  • 実装が簡単
  • インタラクティブ
  • レスポンシブ対応
  • カスタマイズが簡単
  • 拡張性も豊か

実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。
ちなみに、2017年4月11日にVistaのサポートも終了します。
参考: Windows 製品のサポート ライフサイクル について

drivewayのデモ

デモではdrivewayで実装されたMasonryレイアウトの動作を確認できます。

サイトのキャプチャ

デモページ

各パネルのレイアウトもさまざまなものが用意されていますが、インタラクション用のコンポーネントもいくつか実装されています。
まずは、パネルが回転する「Flip」。

デモのアニメーション

デモページ: Flip

そのパネルのみにフォーカスがあたる「Focus」。

デモのアニメーション

デモページ: Focus

鼓動のようにちょっとだけ大きくなる「Pulse」

デモのアニメーション

デモページ: Pulse

drivewayの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

テーマ用のMixinもstylusに用意されています。

Step 2: drivewayの構造

drivewayは異なるタイプのブロックで構成されています。

  • container: コンテナ
  • panels: パネル
  • clusters: 集まり
  • segments: 区切り
  • flip panels(option): フリップ パネル
  • focus curtain(option): フォーカス カーテン

コンテナの中にパネルを配置し、それが集まったり、区切りがあったりします。

Step 3: HTML

基本的なHTMLの構造です。

「dw」がdrivewayのレイアウト用コンテナで、「.dw-pnl」がパネル、「.dw-pnl__cntnt」がパネルのコンテンツ、フォーカスなどは「.dw-pnl--fcs」を利用して実装します。

更に詳しい実装方法は、driveway -GitHubのusageをご覧ください。

top of page

©2017 coliss