[CSS]簡単にエラスティックや高さの揃ったカラムが実装できるスタイルシートのフレームワーク -Elastic css

Elastic cssは、印刷対応も考慮した、エラスティックレイアウトや高さの揃ったカラムが実装できるスタイルシートのフレームワークです。

エラスティックと高さを揃える箇所のキャプチャ

Elastic css

エラスティックレイアウトの実装例

レイアウトのカラム数はデフォルトで4カラムまで対応しており、それぞれのカラムに固定・可変とスタイルシートで指定ができます。
固定するカラムの幅は、インラインで指定します。

高さを揃えたカラムの実装例

各カラムの高さを揃えるには、親のdivに「same-height」を指定するだけです。
揃えているのは、スクリプト(jQuery)によるものです。

印刷対応の実装例

印刷対応を考慮したクラスも用意されています。
印刷をしない箇所には「no-print」、印刷時のみ表示する箇所には「print-only」などがあります。

sponsors

top of page

©2024 coliss