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

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

Elastic css

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

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

<div class="unit two-columns">
<div class="fixed-left-column" style="width:250px;">first column content</div>
<div class="elastic-column">second column content</div>
</div>

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

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

<div class="unit two-columns same-height">
<div class="column">first column content</div>
<div class="column">second column content</div>
</div>

印刷対応の実装例

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

<div class="unit no-print">
    content does not get printed
</div>
<div class="unit print-only">
    content does get printed but not seen on screen
</div>

Post on:2008年11月18日