CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト

CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。

デモのキャプチャ

Responsive Comic Book Layout

コマ割りレイアウトはレスポンシブ対応で、表示サイズによってレイアウトが変化します。各コマの吹き出しとかは位置を保持したまま変化します。

デモのアニメーション

マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。

コマ割り風レイアウトの実装

実装はシンプルです。

HTML

各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。

CSS

レイアウトの基本のCSSもシンプルです。

あとは、テキストや吹き出しを配置します。

top of page

©2017 coliss