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

Post on:2016年4月26日

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: 外部ファイル

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

<head>
  ...
  <link rel="stylesheet" href="css/driveway.min.css"/>
</head>

<head>

...

</head>

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

Step 2: drivewayの構造

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

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

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

Step 3: HTML

基本的なHTMLの構造です。

<div class="dw-pnl ">
  <div class="dw-pnl__cntnt">
    <p>Panel content.</p>
  </div>
</div>

<p>Panel content.</p>

</div>

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

<div class="dw">
  <!-- LAYOUT CONTENT HERE -->
  <div class="dw__fcs-crtn"></div>
</div>

</div>

<div class="dw-pnl dw-flp dw-flp--md">
  <div class="dw-pnl__cntnt dw-flp__cntnt">
    <div class="dw-flp__pnl dw-flp__pnl--frnt">
      <h1>You can flip me round</h1>
    </div>
    <div class="dw-flp__pnl dw-flp__pnl--bck">
      <h1>Yeah that's right</h1>
    </div>
  </div>
</div>