[CSS]簡単にエラスティックや高さの揃ったカラムが実装できるスタイルシートのフレームワーク -Elastic css
Post on:2008年11月18日
Elastic cssは、印刷対応も考慮した、エラスティックレイアウトや高さの揃ったカラムが実装できるスタイルシートのフレームワークです。
エラスティックレイアウトの実装例
レイアウトのカラム数はデフォルトで4カラムまで対応しており、それぞれのカラムに固定・可変とスタイルシートで指定ができます。
固定するカラムの幅は、インラインで指定します。
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
高さを揃えたカラムの実装例
各カラムの高さを揃えるには、親のdivに「same-height」を指定するだけです。
揃えているのは、スクリプト(jQuery)によるものです。
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="unit two-columns same-height"> <div class="column">first column content</div> <div class="column">second column content</div> </div> </textarea> |
印刷対応の実装例
印刷対応を考慮したクラスも用意されています。
印刷をしない箇所には「no-print」、印刷時のみ表示する箇所には「print-only」などがあります。
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
sponsors